@import url('https://fonts.googleapis.com/css?family=Oxygen:400,700');

body {
  background: #f9f9f9;
}

#card-container {
  background: #ededed;
  box-shadow: 0px 0px 50px #999;
  font-family: 'Oxygen', sans-serif;
  width: 85%;

  margin: 5% auto;
}

#card-title {
  font-family: 'Oxygen', sans-serif;
  font-weight: 700;
  font-size: 25px;
  background: #455560;
  padding: 15px 20px;
  color: #fff;
  border-radius: 2px 2px 0 0;
}

#details {
  background: #fff;
  border-left: solid 1px #ededed;
  border-right: solid 1px #ededed;
  font-size: 16px;
  font-family: 'Oxygen', sans-serif;
  padding: 15px 20px;
}

.detail-value {
  color: #455560;
}

#card-items {
  background: #ededed;
  font-family: 'Oxygen', sans-serif;
  padding: 20px
}

.card-item-title {
  font-size: 18px;
  font-weight: 700;
}

ul.checkmark li:before {
    color: #455560;
    content:"\2713\0020";
    font-weight: 600;
    margin-left: -38px;
    margin-right: 10px;
	padding-left: 25px;
}

.checkmark li {
  list-style-type: none;
  padding-left: 25px;
}

.checkmark li {
  margin-bottom: 3px;
}

#method {
  background: #fff;
  border-left: solid 1px #ededed;
  border-right: solid 1px #ededed;
  border-bottom: solid 1px #ededed;
  padding: 20px;
}

#method li {
  list-style-position: inside;
  margin-bottom: 10px;
  margin-left: -38px;
  list-style-type: none;
  padding-left: 25px;
}

#recipe-image {

  overflow: hidden;
  height: 300px;
  background-size: cover;
}

ol {
  counter-reset: item;
}

ol > li {
  counter-increment: item;
}

ol > li::before {
  font-weight: bold;
  content: counter(item) ".";
  margin-right: 8px;
}