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;
  }
}ol{
  list-style: decimal;
  padding-left: 25px;
}