@charset "utf-8";

/* 実験用スタイルシート */

*{
  padding: 0px;
  margin: 0px;
}

/* General Elements */

a,
a:link{
  text-decoration: none;
  color: #0066cc;
}

a:hover{
  text-decoration: underline;
}

a img{
  border: none;
}

em{
  font-style: normal;
  font-weight: bold;
  padding: 0px 2px;
}

strong{
  color: red;
  font-style: normal;
  font-weight: bold;
  padding: 0px 2px;
}

br{
  padding-bottom: 10px;
}

input,select{
  font-size: 100%;
  font-family: "Courier New";
}

select{
  text-align: center;
}

cite{
  font-style: normal;
}

.weaken{
  font-size: 80%;
  margin: 0px 2px;
  color: #666;
}

strong{
  font-size: 170%;
}

dl{
  background-color: white;
}

p{
  background-color: white;
  padding: 20px 0px;
}

ul, ol{
  background-color: white;
  padding: 10px 20px 10px 30px;
  margin: 0px;
  font-size: 90%;
  list-style-type: inside;
}

input{
  padding: 6px 4px 2px 4px;
}

label{
  padding-left: 4px;
}

optgroup{
  font-style: normal;
  color: black;
  padding-left: 4px;
}

option{
  padding: 2px;
}

optgroup option{
  font-size: 90%;
  padding-left: 1.1em;
}

/* special Elements */

.hidden{
  display: none;
}

.inline{
  display: inline;
}

.block{
  display: block;
}

/* 本文の要素 */

body{
  width: 100%;
  padding: 0px;
  background: white url(images/bg.png);
  border-top: 1px solid black;
  line-height: 170%;
  font-family: sans-serif;
}

body.vertical{
  width: 320px;
}

body.horizontal{
  width: 480px;
}

div.container{
  padding: 0px;
  overflow: hidden;
}

div.credit{
  border-top: 1px solid black;
  color: #89909F;
  font-size: 80%;
  padding: 20px;
  text-shadow: 2px 2px white;
  line-height: 155%;
}

div.credit a,
div.credit a:link{
  padding: 0px 3px;
  color: inherit;
  text-decoration: underline;
}

form{
  background-color: white;
  padding: 10px;
}

h1{
  font-size: 100%;
  background: #777 url(images/h1.png) repeat-x;
  color: white;
  height: 31px;
  overflow: hidden;
  padding: 7px 0px;
  margin: 0px;
  text-align: center;
}

h2{
  font-size: 100%;
  background: #8AA5AE url(images/item.png) repeat-x;
  height: 32px;
  padding: 4px 0px 0px 0px;
  overflow: hidden;
  color: white;
  text-align: center;
}

h3{
  font-size: 85%;
  background: #A4A4A4 url(images/group.png) repeat-x;
  height: 25px;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  color: white;
  text-align: center;
}

h3 a,
h3 a:link {
  color: white;
}

form h2{
  background: transparent;
  height: auto;
  color: #818795;
  font-size: 130%;
  font-weight: bold;
  text-shadow: 2px 2px 2px white;
}

div.dish{
  padding: 15px;
  background-color: white;
}

div.dish p.photo{
  padding: 0px 15px 0px 0px;
  float: left;
}

div.dish p.photo img{
  width: 120px;
  border: 1px solid #ccc;
  padding: 3px;
}

div.dish dl{
  padding: 0px;
  margin: 0px;
}

div.dish dt{
  font-size: 90%;
  font-weight: bold;
  float: left;
  width: 4em;
  margin-right: 0.5em;
}

div.dish dt.material{
  float: none;
  clear: left;
  width: auto;
  border-bottom: 1px solid #AAACAF;
}

div.dish ul{
  line-height: 100%;
}

div.dish dd{
  font-size: 90%;
}

dl#recipe{
  padding: 15px;
  font-size: 90%;
}

dl#recipe dt{
  width: 60%;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  float: left;
}

dl#recipe dd{
  width: 100%;
  border-bottom: 1px solid #ccc;
}

dl#recipe dt.group{
  width: 100%;
}

dl#recipe .group{
  border-bottom: 0px;
}

dl#recipe dl{
  padding-left: 15px;
  clear: left;
}

ol#process{
  padding: 0px;
  counter-reset: counter;
  list-style: decimal none inside;
}

ol#process li {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

p.comment{
  font-size: 95%;
  padding: 15px;
}

p.large-photo{
  text-align: center;
  padding: 20px;
}

p.large-photo img{
  border: 1px solid #ccc;
  padding: 5px;
}