body {
  background-color: lightgrey;
}

h1,h2,h3,h4 {
  font-family: Georgia
}

#yui-main h2 {
  font-size: x-large;
}

/* @group Common */

#hd {
    height: 100px;
  background: #000 url(images/sage_logo.png) no-repeat 15px 1px;
}

#hd #login_block {
  float: right;
  margin-right: -108px;
  width: 150pt;
  margin-top: 10px;
  color:  white;
  top: 10px;
  right: -360px;
  display: inline-block;
  clear: none;
  position: relative;
}

#hd #join_now {
  color: yellow;
}

#hd #sign_in {
  color: green;
}

#nav {
  color:  whitesmoke;
  float: right;
  margin-top: 76px;
  font: medium Verdana;
  margin-right: 11px;
}

#nav span {
  margin: auto .5em;
  text-decoration: none;
}

#nav .current-page {
  color:  green;
}

#bd {
  border-style: none;
}

#ft
{
  display: block;
  width: 300px;
  margin: 5em auto auto;
  text-align: center;
}

.left_block {
  padding: .5em;
}

.left_block h2 {
	font-size:  large;
	margin: 2px auto auto;
	width: 8em;
	text-align:  center;
	border-bottom: solid;
	margin-bottom: 1em;
}

.left_block h3 {
  font-weight: bold;
  color:  black;
  margin-top:  1em;
}



/* @end */

/* @group Guide */

#guide h3
{
  font-size: large;
}

#guide h2
{
  font-size: x-large;
}

#guide ol li {
  list-style:  decimal;
  margin-left:  2em;
  margin-top: 2pt;
}

.active-tab {
	background-color:  white;
	border-top: solid;
	border-right: solid;
	border-left: solid;
	margin-top:  8pt;;
}

.inactive-tab {
	margin-left: -4px;
}

.tab {
	padding:  5pt 1em;
	font-size:  x-large;
	margin-right: 0px;
	margin-left: 0px;
	cursor: pointer;
}

#tabs {
  	margin-top:  12pt;;
}

.tabarea {
  background-color: white;
  padding-top:  10pt;;
}

#guide .section {
  margin: 1em auto;
  border-bottom: 1px solid gray;
  padding: .3em 1.5em 1.5em 1em;
}

#guide p {
  margin-top:  1em;
}


#guide h3 {
  margin-bottom: 4pt;
}

#guide .gist {
  background-color: #aad2a8;
  margin: 8pt;
}


#search_block .search_entry {
  font-size:  large;
  width:  150px;
  margin: 10px auto auto 10px;
  text-align:  center;
}

#search_block .search_button {
  margin: 1em 1em 1em 20px;
}

#link_back_to_recipe {
  text-align: center;
  font-size:  large;
}

/* @end */

/* @group Home */

.home_inner_block {
    background-color: white;
    margin: 10px;
    padding:  10px;
}

.home_block h2 {
  font-size:  medium;
  font-family: Verdana;
}

.home_block h3 {
  font-size:  large;
}

#home_left {
  font-family: Verdana;
}

#home_left div {
  margin:  2em auto;
}

#home_left img {
  margin: 2em 1em 1em;
}

#find_recipes_btn button {
  font-size:  xx-large;
  margin: 1em auto 1em 3.5em;
  width:  9em;
}

/* @end */

/* @group Results */

.skill-handle {
  cursor: pointer;
}

.recipe {
  background-color: white;
  margin: 10px;
  padding:  10px;
}

.recipe h3 {
  font-size: 16pt;
}

.recipe h3 a {
  text-decoration: none;
}

.recipe .dish {
	height:  90px;
	float: right;
	position: relative;
	top: -32px;
}

.recipe .ingredients {
  font: 12pt Georgia;
}

.required_skills {
  border-top: solid black 1px;
  padding:  4px;
  margin: 10px
}

#include {
  color:  green;
}

#exclude {
  color:  red;
}

#search_block {
  height:  300pt;
  width:  160px;
  background-color: white;
  font-size: medium;
}

#search_block img {
  vertical-align: center;
  top: 2px;
  position: relative;
  left: 4px;
  opacity: 0.5;
}

#search_block img:hover {
  opacity: 0.95;
  cursor: pointer;
}



#search_block input {
	width:  100pt;
	margin-top: 4pt;
	margin-bottom:  8pt;
}

#recipe_results {
	overflow: auto;
}

#start_search p {
  font-size:  large;
  font-weight:  bold;
  width:  20em;
  font-family: Verdana;
  margin-top: .5em;
  margin-right: 1em;
  margin-left: 2.6em;
}

#start_search #skill_pointer {
  top: 13px;
  position: relative;
}

#start_search #include_pointer {
  top: 31px;
  position: relative;
}

#start_search #exclude_pointer {
  top: 48px;
  position: relative;
}


/* @end */

/* @group Full recipe */


#full_recipe > div {
  margin: 2em auto;
  border-top:  solid black 1px;
  padding-top:  4px;
}

#full_recipe h3 {
  font-size: xx-large;
}

#full_recipe  h4 {
  font-size: medium;
  font-family: Verdana;
  margin:  1em auto;
  font-weight:  bold;
  text-align: center;
}

#full_recipe #rating_widget {
}

#ingredients .col1 {margin-left: 3em;}

#ingredients .col2 {margin-left: 26em; margin-top: -6.5em;}

#ingredients li {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
  list-style-type: circle;
}

#ingredients #shop_ingredients {
  margin: 1em auto 0 16em;
  width:  10em;
  font-size:  small;
  text-align: center;
  padding:  1pt;
}

#preparation {
	font-size: medium;
}

.prep-step {
    border: solid black 1px;
}

.step-title {
  background-color: black;
  color:  white;
  padding: 3pt;
  padding-left:  6pt;
}

.step-body {
  background-color: #a9d576;
  padding: 4px;
}

.step-comments {
	margin:  .5em;
  padding: .5em;
  background-color: #d5ffa7;
  font-size:  small;
}

.comment-toggle {
  cursor: pointer;
  font-weight:  bolder;
}

.comment-count {
  font-size: small;
  color:  gray;
}

.step-comment {
    padding: 6pt;
  border: 1px dashed #fffeff;
  margin-bottom:  -1px;
}


#preparation ol li {
    margin-left:  2em;
	list-style: decimal;
    margin-top:  4pt;
    font-size:  medium;
}

#preparation ol ol li {
	margin-left:  2em;
    list-style-type: lower-alpha;
    margin-top:  2pt;
}

#full_recipe .dish {
	height:  160px;
	position: absolute;
	right: 61px;
	top: 116px;
}

.recipe-comments {
	background-color: #d5ffa7;
	margin: 1em;
}

.recipe-comment {
  padding: .5em;
  background-color: #d5ffa7;
  font-size:  small;	
  border: 1px dashed #fffeff;
  margin-bottom:  -1px;
}

.add-comment {
	background-color: yellowgreen;
	padding: 10pt;
	color:  gray;
	font-size:  small;
}

.add-comment textarea {
	width:  30em;
	margin: 6pt;
}

/* @end */