html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

body{ 
  font-family: Calibri, Arial, Verdana, sans-serif;
  font-size: 14px;
  padding: 15px;
}
@media (max-width: 600px){
  body{
    padding: 5px;
  }
}

/* -- main page elements ---------------------------------------------------- */
#middle_column{
  max-width: 800px;
  margin: 10px auto;
  border-left: 1px solid RGB(220,220,220);
  border-right: 1px solid RGB(220,220,220);
  padding: 0 15px 40px 15px;
}
#top_add{
  width: 100%;
  min-height: 90px;
}
@media (max-width: 600px){
  #middle_column{
    border: none;
    padding: 0 0 40px 0;
  }
}

/* -- standard element ------------------------------------------------------ */
.clear{
  clear: both;
}
.error{
  border: 2px solid RGB(200,140,50);
  box-shadow: 1px 1px 2px 1px RGB(150,150,150);
  -moz-box-shadow: 1px 1px 2px 1px RGB(150,150,150);
  -webkit-box-shadow: 1px 1px 2px 1px RGB(150,150,150);
  padding: 7px 15px;
  margin-bottom: 7px;
  color: RGB(200,140,50);
}
.success{
  font-weight: bold;
}

/* headers */
h1{
  clear: both;
  font-size: 22px;
  font-weight: bold;
  border-bottom: 1px solid RGB(218,150,148);
  margin: 10px 0 7px 0;
}
h2{
  clear: both;
  font-size: 18px;
  color: RGB(218,150,148);
  margin: 15px 0 7px 0;
}
@media (max-width: 600px){
  h2{
    margin: 7px 0 0 0;
  }
}

/* links */
a{
  text-decoration: none;
  color: blue;
}
a:hover{
  text-decoration: underline;
}

/* text elements */
p{
  margin: 4px 0 3px 0;
}

/* definition tables */
dt{
  clear: left;
  float: left;
  width: 45%;
  max-width: 250px;
  background: RGB(255,255,255);
  margin-top: 2px;
  padding: 1px;
}
dd{
  float: left;
  background: RGBA(218,150,148, 0.2);
  width: 50%;
  max-width: 250px;
  margin-top: 2px;
  padding: 1px;
}

/* -- common elements ------------------------------------------------------- */
.top_nav{
  font-size: 12px;
  font-style: italic;
  padding-bottom: 25px;
}
.top_nav li.head{
  font-weight: bold;
}
.top_nav li.div{
  font-style: normal;
}
.top_nav li{
  display: block;
  float: left;
  border: none;
  padding: 0 5px;
}#header_wrapper{
  padding: 15px 5px 5px 5px;
  background: RGB(218,150,148);
  position: relative;
}

#header_wrapper a.title{
  text-decoration: none;
}
#header_wrapper h2{
  text-transform: uppercase;
  font-size: 32px;
  border: none;
  color: RGB(255,255,255);
  clear: none;
}
#header_wrapper h2 span{
  font-size: 40px;
}
#header_wrapper h3{
  font-size: 16px;
  color: RGB(0,0,0);
}

#header_wrapper div.welcome{
  float: right;
  color: RGB(255,255,255);
  font-size: 14px;
  line-height: 16px;
}
#header_wrapper div.welcome span{
  font-weight: bold;
}
#header_wrapper div.welcome img{
  vertical-align: middle;
  margin-left: 3px;
}
#header_wrapper div.welcome div.notifications{
  text-align: right;
  margin-top: 3px;
}
@media (max-width: 500px){
  #header_wrapper div.welcome div.notifications{
    display: inline-block;
  }
  #header_wrapper h2{
    font-size: 26px;
    clear: right;
  }
  #header_wrapper h2 span{
    font-size: 34px;
  }
}
#header_wrapper div.welcome div.notifications a{
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 3px;
  vertical-align: middle;
}
#header_wrapper div.welcome a.friends{
  background-image: url("http://www.cookingmode.net/icns/friends.png");
}
#header_wrapper div.welcome a.friends_new{
  background-image: url("http://www.cookingmode.net/icns/friends_h.png");
}
#header_wrapper div.welcome a.pm{
  background-image: url("http://www.cookingmode.net/icns/pm.png");
}
#header_wrapper div.welcome a.pm_new{
  background-image: url("http://www.cookingmode.net/icns/pm_h.png");
}

#header_wrapper form{
  float:right;
  color: RGB(255,255,255);
  font-size: 14px;
}
#header_wrapper label{
  width: auto;
  padding-bottom: 0px;
}
#header_wrapper input[type=text]{
  background: none;
  border: 1px solid RGB(255,255,255);
  padding: 5px;
  color: RGB(255,255,255);
  width: 100px;
}
#header_wrapper input[type=submit]{
  background: url("http://www.cookingmode.net/icns/search_glass.png")  no-repeat scroll 0 0 transparent;
  border: none;
  height: 24px;
  width: 24px;
  margin-left: 3px;
  cursor: pointer;
  box-shadow: none;
}

@media (max-width: 600px){
  #header_wrapper{
    margin-bottom: 35px;
  }
  #header_wrapper form{
    position: absolute;
    right: -23px;
    bottom: -27px;
    color: RGB(218,150,148);
  }
  #header_wrapper input[type=text]{
    color: RGB(218,150,148);
    border-color: RGB(218,150,148);
    padding: 2px;
  }
  #header_wrapper input[type=submit]{
    width: 1px;
  }
}

#header_wrapper ul{
  padding-top: 14px;
}
#header_wrapper ul li{
  display: block;
  float: left;
  border: none;
  padding: 5px 10px;  
  line-height: 12px;
  border-left: 1px solid RGB(255,255,255);
}
#header_wrapper ul li:first-child{
  border-left: none;
}
#header_wrapper ul li a{
  color: RGB(255,255,255);
  font-size: 14px;
}
@media (max-width: 600px){
  #header_wrapper ul{
    clear: right;
  }
  #header_wrapper ul li{
    padding: 4px;
  }
  #header_wrapper ul li a{
    font-size: 13px;
  }
}

/* form classes for standard layouts */
form.medium{
  max-width: 600px;
  margin: 0 auto;
}
form.separator{
  border-top: 1px solid RGB(220,220,220);
  margin-top: 25px;
  padding-top: 15px;
}

/* form element resets */
input, select, textarea{
  outline-style:none;
  box-shadow:none;
  border-color:transparent;
  -webkit-appearance: none;
  border-radius: 0;
}
input[type=checkbox]{
  -webkit-appearance: checkbox;
}
input[type=radio]{
  -webkit-appearance: radio;
}

/* -- standard form elements ------------------------------------------------ */
/* single class for inputs not contained in labels */
label{
  width: 48%;
  max-width: 350px;
  float: left;
  padding: 5px 10px 5px 0;
}
label input[type=text], label input[type=email], label input[type=password], input[type=text].single, label select{
  width: 100%;
  margin-top: 7px;
  border: 2px solid RGB(220,210,210);
  padding: 4px;
  font: inherit;
  line-height: 17px;
}
label select{
  padding: 3px 4px;
}
label input[type=text]:focus, label input[type=email]:focus, label input[type=password]:focus, input[type=text].single:focus, label select:focus{
  border: 2px solid RGB(218,150,148);
}

label input[type=checkbox]{ 
  float:left; 
  /*width:15px; */
  margin-top:-1px 
}

label.textarea{
  clear: both;
  width: 100%;
  max-width: 710px;
}
label.textarea textarea{
  width: 100%;
  height: 80px;
}
label.textarea textarea.high{
  height: 160px;
}
textarea{
  border: 2px solid RGB(220,210,210);
  margin-top: 7px;
  min-height: 63px;
  padding: 4px;
}
textarea:focus{
  border: 2px solid RGB(218,150,148);
}

label.fullwidth{
  width: 98%;
  max-width: none;
}
label.maxwidth{
  width: 98%;
  max-width: 710px;
}
label.width3Q{
  width: 72%;
  max-width: none;
}
label.width1Q{
  width: 23%;
  max-width: none;
}
@media (max-width: 600px){
  label.width1Q, label.width3Q{
    width: 98%;
  }
}

input, select, textarea{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* buttons */
div.buttons{
  clear: both;
  text-align: center;
}
input[type=submit], input[type=reset]{
  background-color: RGB(218,150,148);
  background: -moz-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); 
  background: -webkit-gradient(linear,RGB(244,180,179), RGB(218,150,148)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* IE10+ */
  background: linear-gradient(to bottom,RGB(244,180,179), RGB(218,150,148)); /* W3C */
  /*IE9 and older removed as it does not work together with the inset box 
  shadow. The inset box shadow is more important, so IE may fall back to the 
  single color background */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b4b3', endColorstr='#da9694',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 1px 1px RGB(255,255,255), inset -1px -1px RGB(255,255,255);
  border: 1px solid RGB(218,150,148);
  padding: 5px;
}
input[type=submit]:active, input[type=reset]:active{
  background-color: RGB(244,180,179);
  background: -moz-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); 
  background: -webkit-gradient(linear, RGB(218,150,148),RGB(244,180,179)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* IE10+ */
  background: linear-gradient(to bottom, RGB(218,150,148),RGB(244,180,179)); /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da9694', endColorstr='#f4b4b3',GradientType=0 ); /* IE6-9 */
}

/* other elements */
div.label_alt{
  height: 60px;
  width: 48%;
  max-width: 350px;
  float: left;
}
a.link_button{
  background-color: RGB(218,150,148);
  background: -moz-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); 
  background: -webkit-gradient(linear,RGB(244,180,179), RGB(218,150,148)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,RGB(244,180,179), RGB(218,150,148)); /* IE10+ */
  background: linear-gradient(to bottom,RGB(244,180,179), RGB(218,150,148)); /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b4b3', endColorstr='#da9694)',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 1px 1px RGB(255,255,255), inset -1px -1px RGB(255,255,255);
  border: 1px solid RGB(218,150,148);
  padding: 5px;
  color: RGB(0,0,0);
}
a.link_button:hover{
  text-decoration: none;
}
a.link_button:active{
  background-color: RGB(244,180,179);
  background: -moz-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); 
  background: -webkit-gradient(linear, RGB(218,150,148),RGB(244,180,179)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, RGB(218,150,148),RGB(244,180,179)); /* IE10+ */
  background: linear-gradient(to bottom, RGB(218,150,148),RGB(244,180,179)); /* W3C */
}


/* -- special forms --------------------------------------------------------- */

/* form that should show no labels */
form.no_label{
  padding-top: 15px;
}
form.no_label label{
  width: auto;
  padding: 0;
  margin: 0;
  max-width: none;
}
form.no_label div.buttons{
  clear: none;
  float: left;
  padding-top: 7px;
}
form.no_label div.buttons input[type=submit]{
  height: 28px;
}

form#pm_new label{
  position: relative;
  width: 100%;
  max-width: none;
  height: 28px;
  line-height: 28px;
}
form#pm_new label input{
  position: absolute;
  top: 0px;
  right: 10px;
  width: 80%;
  margin-top: 0px;
  font: inherit;
  line-height: 18px;
}
form#pm_new label.textarea{
  height: auto;
}
form#pm_new textarea{
  height: 200px;
  font: inherit;
  line-height: 18px;
}


#footer{
  border-top: 4px solid RGBA(218,150,148,0.6);
  margin-top: 0px;
  margin-bottom: 25px;
}
#footer_links{
  padding-top: 10px;
  margin: 0 auto;
  text-align: center;
}
#footer_links li{
  display: inline;
  border: none;
  padding: 5px 10px;  
  line-height: 12px;
  border-left: 1px solid RGBA(218,150,148,0.5);
}
#footer_links li:first-child{
  border-left: none;
}
#footer_links li a, #device_switch a{
  font-size: 12px;
  color: RGBA(6,69,173, 0.6);
}
#footer_links li a:hover, #device_switch a:hover{
  color: RGB(6,69,173);
}

#device_switch{
  padding-top: 10px;
  text-align: center;
}

@media (max-width: 600px){
  #footer_links li{
    padding: 3px;
  }
  #footer_links li a{
    font-size: 11px;
  }
}/* -- recipe header --------------------------------------------------------- */
div.recipe_header{
  height: 250px;
  position: relative;
  background-position:center;
}
div.recipe_header a.full{
  color: RGB(0,0,0);
  border: none;
  display: block;
  width: 100%;
  height: 100%;
}
div.recipe_header a:hover{
  text-decoration: none;
}
div.recipe_header_list{
  margin: 10px;
  max-width: 600px;
  height: 100px;
}
div.recipe_header_activity{
  margin: 10px 10px 10px 50px;
  max-width: 550px;
  height: 80px;
}
div.recipe_header_list:hover, div.recipe_header_activity:hover{
  box-shadow: 0 0 2px 2px RGB(180,180,180);
}

div.recipe_header div.recipe_delete{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 4px;
}
div.recipe_header div.recipe_delete:hover{
  background: RGBA(255,0,0,0.7);
}
div.recipe_header div.recipe_delete span.del{
  margin-top: 3px;
  float: right;
  font-size: 24px;
  cursor: pointer;
  color: RGBA(0,0,0,0.3);
  background: RGBA(255,255,255,0.3);
  border-radius: 12px;
  display: block;
  width: 24px;
  height: 24px;
  text-align: center;
}
div.recipe_header div.recipe_delete:hover span.del{
  color: RGB(255,0,0);
  background: RGB(255,255,255);
}
div.recipe_header div.recipe_delete span.exp{
  padding-top: 3px;
  font-size: 12px;
  height: 30px;
  width: 55px;
  display: none;
  margin-right: 30px;
  text-align: right;
  color: RGB(255,255,255);
  font-weight: bold;
}
div.recipe_header div.recipe_delete:hover span.exp{
  display: block;
}

div.recipe_header div.recipe_info{
  position: absolute;
  bottom: 0px;
  background: RGBA(255,220,218, 0.6);
  padding: 0 5px 2px 5px;
}
div.recipe_header div.recipe_info a:hover{
  text-decoration: underline;
  color: RGB(6,69,173);
}
div.recipe_header div.recipe_info h1, div.recipe_header div.recipe_info h2{
  border: none;
  font-size: 22px;
  font-weight: bold;
  color: RGB(0,0,0);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 580px;
}
div.recipe_header div.recipe_info h1 span.edit{
  display: inline-block;
  width: 16px;
  margin-right: 3px;
  background-image: url("http://www.cookingmode.net/icns/edit_p.png");
  background-repeat: no-repeat;
  background-position: top;
  height: 16px;
  vertical-align: middle;
}
div.recipe_header div.recipe_info h1 span.edit:active{
  background-image: url("http://www.cookingmode.net/icns/edit_h.png");
}
body.mouse div.recipe_header div.recipe_info h1 span.edit{
  display: none;
}
@media (max-width: 700px){
  div.recipe_header div.recipe_info{
    left: 0px;
    right: 0px;
  }
}
@media (max-width: 500px){
  div.recipe_header div.recipe_info h1, div.recipe_header div.recipe_info h2{
    font-size: 16px;
  }
}
div.recipe_header div.recipe_info img{
  margin-right: 3px;
}
div.recipe_header ul li{
  display: block;
  float: left;
  border: none;
  padding: 5px 10px;  
  line-height: 19px;
  border-left: 1px solid RGB(255,255,255);
}
div.recipe_header ul li:first-child{
  border-left: none;
}
div.recipe_header li.prep span{
  text-align: right;
  display: inline-block;
  width: 100px;
}
div.recipe_header li.prep span.edit{
  display: inline-block;
  width: 16px;
  margin-left: 3px;
  background-image: url("http://www.cookingmode.net/icns/edit_p.png");
  background-repeat: no-repeat;
  background-position: top;
  height: 16px;
  vertical-align: middle;
}
div.recipe_header li.prep span.edit:active{
  background-image: url("http://www.cookingmode.net/icns/edit_h.png");
}
body.mouse div.recipe_header li.prep span.edit{
  display:none;  
}
div.recipe_header li.priv span{
  display: inline-block;
  width: 70px;
  padding-left: 4px;
  background-image: url("http://www.cookingmode.net/icns/ddw_i.png");
  background-repeat: no-repeat;
  background-position: right;
}
body.mouse div.recipe_header li.priv span{
  background-image: none;
}
div.recipe_header li.priv span.active{
  padding: 0 4px 0 0;
}
div.recipe_header li.prep span input{
  width: 60px;
  padding: 0;
  background: RGBA(255,220,218, 0.9);
  border: none;
  line-height: 12px;
  font-size: inherit;
  font-family: inherit;
}
div.recipe_header li.priv span select{
  padding: 0;
  background: RGBA(255,220,218, 0.9);
  border: none;
  line-height: 12px;
  font-size: inherit;
  font-family: inherit;
}

@media (max-width: 550px){
  div.recipe_header ul li{
    padding: 0;
    border-left: none;
    float: none;
  }
}

/* recipe header menu */
#recipe_action_menu{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: RGBA(255,220,218, 0.6);
}
#recipe_action_menu li{
  padding: 0 5px;
  cursor: pointer;
  line-height: 18px;
  width: 20px;
  text-align: center;
}
#recipe_action_menu li.first{
  border-left: none;
}
#recipe_action_menu li:hover{
  background: RGBA(218,150,148, 0.6);
}
#recipe_action_menu li a{
  color: RGB(40,40,40);
}
#recipe_action_menu li span.letter{
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
}
#recipe_action_menu li.help{
  float: right;
  width: 20px;
  font-weight: bold;
}
#recipe_action_menu li.help_active{
  background: RGBA(218,150,148, 0.6);
}
#recipe_action_menu li.delete{
  float: right;
  background: RGBA(255,0,0,0.5);
  width: 20px;
  font-weight: bold;
}
#recipe_action_menu li.delete:hover{
  background: RGBA(255,0,0,0.9);
}
#recipe_action_menu li.delete span{
  margin: 1px 2px;
  font-size: 16px;
  float: left;
  color: RGBA(255,0,0,0.5);
  background: RGB(255,255,255);
  border-radius: 8px;
  display: block;
  width: 16px;
  height: 16px;
  text-align: center;
  padding-left: 1px;
}
#recipe_action_menu li.delete:hover span{
  color: RGB(255,0,0);
}

/* recipe tags */
ul.recipe_tags{
  padding-top: 5px;
}
ul.recipe_tags li{
  display: block;
  float: left;
  border: none;
  padding: 5px 15px 5px 10px;  
  line-height: 16px;
  height: 16px;
  background: RGBA(218,150,148,0.4);
  box-shadow: 1px 1px 1px RGB(180,180,180);
  margin-right: 4px;
  position: relative;
}
ul.recipe_tags li input{
  border: none;
  height: 16px;
  padding: 0px;
  margin: 0px;
  font-family: Calibri, Arial, Verdana, sans-serif;
  font-size: 14px;
  background: none;
  width: 60px;
}
ul.recipe_tags li span{
  position: absolute;
  right: 2px;
  top: 0px;
  font-size: 22px;
  display:none
}
ul.recipe_tags li:hover{
  background: RGBA(218,150,148,0.8);
}
ul.recipe_tags li:hover span{
  color: RGB(255,255,255);
  display: block;  
}
ul.recipe_tags li span:hover{
  cursor: pointer;
}

/* recipe owner */
.recipe_owner{
  clear: both;
  position: relative;
  margin: 7px 0;
  padding-left: 45px;
  padding-top: 15px;
  line-height: 20px;
}
.recipe_owner img{
  position: absolute;
  left: 0px;
  top: 15px;
}

/* recipe description */
p.recipe_desc{
  clear: both;
  padding-top: 15px;  
  line-height: 21px;
  font-size: 16px;
}
p.recipe_desc span.edit{
  display: inline-block;
  width: 16px;
  margin-right: 3px;
  background-image: url("http://www.cookingmode.net/icns/edit_p.png");
  background-repeat: no-repeat;
  background-position: top;
  height: 16px;
  vertical-align: middle;
}
p.recipe_desc span.edit:active{
  background-image: url("http://www.cookingmode.net/icns/edit_h.png");
}
body.mouse p.recipe_desc span.edit{
  display:none;
}

/* -- recipe body ----------------------------------------------------------- */
div#recipe_body{
  position: relative;
  /*max-width: 600px;*/
  padding-top: 15px;
}
div#recipe_body h2{
  margin: 0 0 7px 0;
}

/* ingredients and steps */
@media (max-width: 400px) {
  #recipe_ingredients{
    width: 100%;
    float: none;
  }
  #new_ingredient div.buttons, #new_step div.buttons{
    padding-bottom: 15px;
  }
  div#recipe_steps{
    margin-left: 0;
    clear: both;
  }
}
@media (min-width: 401px) {
  #recipe_ingredients{
    width: 200px;
    float: left;
  }
  div#recipe_steps{
    margin-left: 200px;
  }
}
#ingredients_list li.group, #steps_list li.group, #ingredients_list form h3{
  font-weight: bold;
  font-size: 16px;
  color: RGB(218,150,148);
  padding-top: 7px;
  padding-bottom: 5px;
}
#ingredients_list li li, #steps_list li li{
  font-size: 14px;
  font-weight: normal;
  color: RGB(0,0,0);
  padding: 3px;
}
div#recipe_steps h2{
  clear: none;
}
#steps_list li ol{
  list-style: decimal;
  padding-left: 20px;
}
#steps_list li ol li, #steps_list li ol li span.step_edit{
  line-height: 19px;
}

/* steps comments */
#steps_list ol ul.comments{
  font-size: 12px;
  font-style: italic;
  color: RGB(80,80,80);
  position: relative;
}
#steps_list ol ul.comments li{
  font-size: 12px;
  padding-bottom: 0px;
  line-height: 12px;
}
#steps_list ol ul.comments a{
  color: RGB(140,140,255);
}
body.mouse #steps_list ol ul.comments a{
  color: RGB(255,255,255);
}
body.mouse #steps_list ol ul.comments span.no_mouse{
  display: none;
}
#steps_list ol li:hover ul.comments a{
  color: RGB(80,80,255);
}
#steps_list ol ul.comments li.comment_form textarea{
  width: 98%;
}
#steps_list span.edit{
  display: inline-block;
  width: 16px;
  margin-right: 3px;
  background-image: url("http://www.cookingmode.net/icns/edit_p.png");
  background-repeat: no-repeat;
  background-position: top;
  height: 16px;
  vertical-align: middle;
}
#steps_list span.edit:active{
  background-image: url("http://www.cookingmode.net/icns/edit_h.png");
}
body.mouse #steps_list span.edit{
  display: none;
}

/* steps and description edit mode */
span.buttons{
  /*position: relative;*/
  margin: 0px;
  text-align: right;
  display: inline-block;
  width: 100%;
}
span.buttons span{
  padding: 0 3px;
  border-left: 1px solid RGB(220,210,210); 
  border-bottom: 1px solid RGB(220,210,210); 
  color: RGB(80,80,80);
}
span.buttons span:last-child{
  border-right: 1px solid RGB(220,210,210);
}
span.buttons span:hover{
  cursor: pointer;
}
span.buttons span.step_remove:hover{
  color: RGB(255,0,0);
}
span.buttons span.step_save:hover, span.buttons span.desc_save:hover{
  color: RGB(0,255,0);
}
span.buttons span.step_cancel:hover, span.buttons span.desc_cancel:hover{
  color: RGB(0,0,0);
}
textarea#step_edit, textarea#desc_edit{
  width: 100%;
  vertical-align: text-top;
  resize: vertical;
  font-family: inherit;
  font-size: inherit;
  margin-top: -4px;
}

/* -- recipe comments ------------------------------------------------------- */
#recipe_comments h2{
  clear: both;
  font-weight: bold;
  font-size: 18px;
  color: RGB(218,150,148);
  padding-top: 7px;
  padding-bottom: 5px;
  border: none;
}
#recipe_comments ul li{
  margin-bottom: 10px;
  min-height: 60px;
}
#recipe_comments ul li img{
  float: left;
  margin-right: 5px;
}
#recipe_comments ul li span{
  font-size: 11px;
  font-style: italic;
  padding: 0 5px 0 0;
  color: RGB(80,80,80);
}
#recipe_comments ul li span.date{
  border-left: 1px solid RGB(80,80,80);
  padding-left: 5px;
}

/* -- recipe modal forms ---------------------------------------------------- */
#group_container{
  float: left;
  /*width: 507px;*/
  min-height: 80px;
  max-height: 300px;
  margin-right: 3px;
  border: 1px solid RGB(180,180,180);
  box-shadow: inset 1px 1px 1px RGB(200,200,200), inset -1px -1px 1px RGB(200,200,200);
  padding: 4px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#group_container input{
  width: 100%;
  border: 3px solid RGB(255,255,255);
  padding: 5px;
  background: RGB(255,255,255);
  color: RGB(0,0,0);
  margin: 0px;
}
#group_container input.selected{
  border: 3px solid RGB(80,80,255);
  background: RGB(80,80,255);
  color: RGB(255,255,255);
}
#group_container input.selected:focus{
  background: RGB(230,230,245);
  color: RGB(0,0,0);
}
#updown_container{
  display: table-cell;
  vertical-align: middle;
}
#updown_container input{
  width: 21px;
  height: 20px;
  padding: 0;
  background-color: RGB(218,150,148);
}
#updown_container input.up{
  background-image:url("http://www.cookingmode.net/icns/nav_up.png");
}
#updown_container input.down{
  background-image:url("http://www.cookingmode.net/icns/nav_down.png");
}

/* -- recipe alphabet link list --------------------------------------------- */
#recipe_alpha{
  color: RGB(180,180,180);
}
#recipe_alpha span.current{
  color: RGB(0,0,0);
  font-weight: bold;
}
#recipe_alpha a{
  font-weight: bold;
}

/* -- recipe of a friend -- */
div.recipe_friends_header{
  position: relative;
  margin: 10px;
  /*width: 550px;*/
}
div.recipe_friends_header img.profile{
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid RGB(220,220,220);
  box-shadow: 1px 1px 1px RGBA(255,255,255,0.5);
}
div.recipe_friends_header span.title{
  margin-left: 45px;
  line-height: 15px;
}
div.recipe_friends_header span.title span{
  font-weight: bold;
}
div.recipe_friends_header div.recipe_header{
  margin-left: 20px;
  margin-top: 5px;
  margin-right: 0px;
  max-width: 580px;
}

@media (max-width: 600px){  
  div.recipe_header_activity{
    max-width: 550px;
    margin: 10px 0;
  }
}
/* -- misc elements --------------------------------------------------------- */

/* delete button for multiple elements, now split due to browser and device 
differences */
ul span.delete{
  position: absolute;
  left: -8px;  
  font-style: normal;
  font-weight: bold;
  color: RGB(255,255,255);
}
ul li ul li:hover span.delete{
  color: RGB(80,80,80);
}
ul li ul li:hover span.delete:hover{
  color: RGB(255,0,0);
  cursor: pointer;
}

@media (max-width: 600px){  
  #ingredients_list{
    margin-left: 10px;
  }
  #ingredients_list span.delete{
    left: 0px;
  }
}

#ingredients_list span.delete{
  color: RGB(180,180,180);
}
body.mouse #ingredients_list span.delete{
  color: RGB(255,255,255);
}
body.mouse #ingredients_list li ul li:hover span.delete{
  color: RGB(80,80,80);
}
body.mouse #ingredients_list li ul li:hover span.delete:hover{
  color: RGB(255,0,0);
  cursor: pointer;
}
#ingredients_list span.delete:active{
  color: RGB(255,0,0);
}

ul.comments span.delete{
  color: RGB(180,180,180);
}
body.mouse ul.comments span.delete{
  color: RGB(255,255,255);
}
body.mouse ul.comments li:hover span.delete{
  color: RGB(80,80,80);
}
body.mouse ul.comments li:hover span.delete:hover{
  color: RGB(255,0,0);
  cursor: pointer;
}
body.mouse ul.comments span.delete:active{
  color: RGB(255,0,0);
}

/* help hints specific to device */
div.help_hint span.mouse{
  display: none;
}
div.help_hint span.no_mouse{
  display: inline;
}
body.mouse div.help_hint span.mouse{
  display: inline;
}
body.mouse div.help_hint span.no_mouse{
  display: none;
}

.hidden img.preload{
  display: none;
}

/* special displays */
div.recipe_header_promo{
  min-width: 200px;
  width: 23%;
  max-width: 400px;
  height: 100px;
  float: left;
  margin: 5px 10px 0 0;
}
div.recipe_header_promo div.recipe_info{
  width: 100%;
  padding: 0;
}
div.recipe_header_promo div.recipe_info h2{
  font-size: 18px;
  margin: 5px 5px 3px 5px;
}
div.recipe_header_promo div.recipe_owner{
  clear: both;
  line-height: 12px;
  margin: 0 5px 3px;
  padding: 0px;
}

@media (max-width: 950px){  
  div.recipe_header_promo{
    min-width: 175px;
    width: 22%;
  }
}
@media (max-width: 820px){  
  div.recipe_header_promo{
    min-width: 200px;
    width: 48%;
  }
}
@media (max-width: 550px){  
  div.recipe_header_promo{
    min-width: 175px;
    width: 45%;
  }
}
@media (max-width: 440px){  
  div.recipe_header_promo{
    min-width: 1px;
    width: 98%;
  }
}/* -- main list styling -- */
#activity_list{
  position: relative;
}

#activity_list div.activity_intro{
  padding: 10px;  
}
#activity_list div.activity_intro p{
  text-align: center;
  line-height: 22px;
  color: RGB(120,120,120);
  font-size: 16px;
}

#activity_list div.divider{
  clear: both;
  border-bottom: 1px solid RGB(100,100,100);
  margin-top: 10px;
}
#activity_list div.divider:first-child{
  border: none;
}

div.date_header{
  clear: both;
  float: left;
  width: 50px;
  text-align: center;
}
div.date_header span:nth-child(1){
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  width: 40px;
  padding: 5px;
  text-align: center;
}
div.date_header span:nth-child(2){
  width: 50px;
  font-size: 14px;
  font-weight: bold;
}


/* -- user actions as activity -- */
div.comment_activity, div.registration_activity, div.friend_activity{
  max-width: 550px;
  margin: 10px 10px 10px 50px;
}
div.registration_activity{
  line-height: 40px;
}
div.comment_activity img, div.registration_activity img, div.friend_activity img{
  float: left;
  margin-right: 5px;
}
div.comment_activity span:first-of-type, div.registration_activity span, div.friend_activity span{
  font-weight: bold;
}
div.comment_activity p{
  font-style: italic;
}
div.friend_activity{
  line-height: 19px;
  min-height: 40px;
}
div.friend_activity a{
  padding: 2px 5px;
  font-weight: bold;
  color: RGB(0,0,0);
  box-shadow: inset -1px -1px RGB(255,255,255), inset 1px 1px RGB(255,255,255);
}
div.friend_activity a.accept{
  background: RGBA(80,255,80,0.3);
  border: 1px solid RGBA(80,255,80,0.3);
}
div.friend_activity a.accept:hover{
  background: RGBA(80,255,80,0.6);
  border: 1px solid RGBA(80,255,80,0.6);
}
div.friend_activity a.decline{
  background: RGBA(255,80,80,0.3);
  border: 1px solid RGBA(255,80,80,0.3);
}
div.friend_activity a.decline:hover{
  background: RGBA(255,80,80,0.6);
  border: 1px solid RGBA(255,80,80,0.6);
}

div.recipe_friends_header_activity{
  margin: 10px 10px 10px 50px;
  max-width: 550px;
}
div.recipe_friends_header_activity div.recipe_header{
  max-width: 530px;
}

/* -- ad links in activity lists -- */
#activity_list ins.adsbygoogle{
  margin: 10px 10px 10px 50px;
}

@media (max-width: 600px){
  div.date_header{
    float: none;
    width: 100%;
    text-align: left;
  }
  div.date_header span:nth-child(1), div.date_header span:nth-child(2){
    font-size: 18px;
    width: auto;
    display: inline;
    padding: 2px;
    text-align: left;
  }  
  div.comment_activity, div.registration_activity, div.friend_activity, div.recipe_friends_header_activity{
    max-width: 550px;
    margin: 10px 0;
  }
}

#activity_list div.recipe_header div.recipe_info h2{
  max-width: 540px;
}
#activity_list div.recipe_friends_header div.recipe_info h2{
  max-width: 520px;
}#picture{
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
}
#picture img{
  float: left;
}
#picture .statusbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
}
#picture .statusbar .progressBar{
  width: 100px;
  height: 100px;
}
#picture .statusbar .progressBar div{
  line-height: 100px;
  background: RGBA(0,0,0,0.5);
  color: RGBA(255,255,255, 0.8);
  text-align: center;
}
#picture .filename, #picture .filesize, #picture div.abort{
  display: none;
}

/* profile header */
.profile_header{
  padding-left: 105px;
  position: relative;
  min-height: 100px;
}
.profile_header img{
  position: absolute;
  left: 0px;
  top: 0px;
}
.profile_header h2 span{
  color: RGB(0,0,0);
}

.profile_header_friend{
  text-align: center;
  float: left;
  margin: 5px;
}
.profile_header_friend h2{
  text-align: center;
  margin-top: 3px;
  font-weight: bold;
  font-size: 20px;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile_header_friend h2 a{
  color: RGB(218,150,148);
}
.profile_header_friend a{
  padding: 2px 5px;
  font-weight: bold;
  color: RGB(0,0,0);
  box-shadow: inset -1px -1px RGB(255,255,255), inset 1px 1px RGB(255,255,255);
}
.profile_header_friend a.accept{
  background: RGBA(80,255,80,0.3);
  border: 1px solid RGBA(80,255,80,0.3);
}
.profile_header_friend a.accept:hover{
  background: RGBA(80,255,80,0.6);
  border: 1px solid RGBA(80,255,80,0.6);
}
.profile_header_friend a.decline{
  background: RGBA(255,80,80,0.3);
  border: 1px solid RGBA(255,80,80,0.3);
}
.profile_header_friend a.decline:hover{
  background: RGBA(255,80,80,0.6);
  border: 1px solid RGBA(255,80,80,0.6);
}

.profile_header .friend_button{
  padding: 10px 0;
  line-height: 25px;
}
.hidden > div, .hidden > form, .hidden > input, hidden > span{
  display: none;
}
.modal{
  width: 100%;
  max-width:550px;
  padding:0;
  position:absolute;
  display:none;
  z-index:9500;
  text-align:center;
  -moz-box-shadow:0 0 5px 5px #888;-webkit-box-shadow:0 0 5px 5px #888;box-shadow:0 0 5px 5px #888;
  font-size:12px;
  margin: 0px;
  background: RGB(218,150,148);
}
.modal span.title{
  color:#fff;
  font-weight:bold;
  text-align:left;
  padding: 3px 4px;
  font-size: 15px;
  display:block;
  height:15px;
  margin:0px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 542px;
  white-space: nowrap;
}
.modal div.text_box{
  background:RGB(255,255,255);
  margin:0px;
  padding:4px;
  text-align:left
}
.modal div.buttons{
  margin-top:15px;
  text-align:center
}
.modal div.buttons input[type=submit]{
  min-width: 80px;
  margin: 0px;
}
div.modal_close{
  position:absolute;
  top:2px;
  right:3px;
}
div.modal_close img{
  border-style:none
}
div.modal_close a{
  display:block;
  width:18px;
  height:18px;
  background:url("http://www.cookingmode.net/icns/cross.png");
}
div.modal_close a:hover{
  background:url("http://www.cookingmode.net/icns/cross_h.png")
}
.modal_footer{
  clear:both
}
#white_mask{
  display:none;
  background:#fff;
  z-index:9000;
  opacity:0;
  position:absolute;
  top:0;
  left:0
}
#mask{
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none
}
#spinner{
  position:absolute;
  z-index:9998;
  display:none;
  text-align:center;
  background:RGB(255,255,255);
  -moz-border-radius:3px;
  padding:10px
}
.message_window{
  position:absolute;
  z-index:9999;
  display:none;
  text-align:center;
  padding:0;
  font-size:12px;
  -moz-box-shadow:0 0 5px 5px #888;-webkit-box-shadow:0 0 5px 5px #888;box-shadow:0 0 5px 5px #888;
  max-width:450px;
  width: 100%;
  margin: 0px;
  background: RGB(218,150,148);
}
.message_window span.title{
  color:RGB(255,255,255);
  font-weight:bold;
  text-align:left;
  padding: 3px 4px;
  line-height: 15px;
  font-size: 15px;
  display:block;
  height:15px;
  margin:0px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*width: 442px;*/
  white-space: nowrap;
}
.message_window div.text_box{
  background:RGB(255,255,255);
  margin:0px;
  padding: 4px 2px 2px 2px;
  text-align:center
}
.message_window span.message{
  color:#000
}
.message_window div.buttons{
  margin-top:15px
}
.message_window div.buttons input[type=submit]{
  min-width: 80px;
  margin: 0px;
}
.message_window label{
  text-align:left
}
#error{
  background: RGB(255,0,0);
  border:0px solid RGB(255,0,0)
}
#error div.buttons input{
  color: RGB(255,255,255);
  font-weight: bold;
  background: RGB(255,0,0);
  background: -moz-linear-gradient(top,RGB(244,120,120), RGB(255,50,50)); 
  background: -webkit-gradient(linear,RGB(244,120,120), RGB(255,50,50)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,RGB(244,120,120), RGB(255,50,50)); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,RGB(244,120,120), RGB(255,50,50)); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,RGB(244,120,120), RGB(255,50,50)); /* IE10+ */
  background: linear-gradient(to bottom,RGB(244,120,120), RGB(255,50,50)); /* W3C */
}
div.help_hint{
  max-width: 275px;
  border: 1px solid RGB(11, 98, 8);
  background: url("http://www.cookingmode.net/icns/questionmark.png") RGBA(255,255,255,0.9) 2px 4px no-repeat;
  display: none;
  font-size: 13px;
  padding: 4px 5px 4px 15px;
  box-shadow: 1px 1px 2px 1px RGB(80,80,80);
  position: absolute;
  z-index: 9999;
}

/* -- special modal forms -- */
#title_edit_window form img{
  float: left;
  margin-top: 14px;
  margin-right: 5px;
}.clear_div{clear:both}