CSS10 - はれあめはれ

【CSS10】

以下の画像と同じように表示させるCSSを記述しなさい
リセットは、全称セレクタで
記述場所はエンベッド
XHTML 1.0 Transitional
背景画像は作成する（アプリケーションは自由選択）
メニューは擬似クラスで指定
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>卵料理レストラン Cockyolly</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1em;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro W3", Osaka, sans-serif;
  line-height: 1.7;  
  margin: 0 auto;
  width: 630px;
}
#container {
  overflow: auto;
  background-image: url(../10_img/bg.gif);
  background-repeat: repeat-y;
  background-postion: 50% 10%;
}
#header {
  width: 200px;
  float: left;
  padding: 20px 0 0 30px;
}
#wrapper {
 float: right;
 border-bottom: solid 2px #ccc;
}
h2 {
  text-align: center;
  margin: -55px 0 80px 0;
}
.content {
  overflow: auto;
  width: 445px;
  text-align: left;
  padding: 0 0 50px 0;
}
h3 {
  color: #815a5b;
  border-left: solid 10px #f99000;
  padding-left: 10px;
  margin-bottom: 15px;
}
h3 + p {
  width: 250px;
  float: left;
  padding-right: 10px;
  margin-bottom: 0;
}
h3 + p + .photo {
  width: 185px;
  float: right; 
}
#wrapper p:last-child {
  color: #f99000;
  font-size: 1.2em;
  font-weight: bold;
  clear: both; 
}
#sidebar {
  width: 160px;
  float: left;
  padding: 50px 0 0 20px; 
}
ul {
  list-style-type: none;
  font-size: 1em;
  font-weight: bold;
}
li {
  padding: 5px 0;
}
li a:link, li a:visited {
  color: #fff;
  text-decoration: none;
}
li a:hover {
  color: #ffef66;
}  
address {
  color: #ccc;
  font-size: 0.875em;
  font-style: normal;
  clear: both;
  text-align: right;
  padding: 15px 110px 0 0px;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1><a href="#"><img src="../10_img/logo.gif" alt="おいしい卵料理レストラン Cockyolly" width="82" height="78" /></a></h1>
</div>
<div id="wrapper">
<h2><img src="../10_img/title.gif" alt="今月のおすすめ" width="231" height="49" /></h2>
<div class="content">
<h3>きのこのオムライス</h3>
<p>ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。</p>
<p class="photo"><img src="../10_img/01.jpg" alt="きのこのオムライスの写真" width="185" height="129" /></p>
<p>800円</p>
</div>
<div class="content">
<h3>シーフードスパゲッティシーフードスパゲッティ<br />バルサミコ風味</h3>
<p>エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。</p>
<p class="photo"><img src="../10_img/02.jpg" alt="シーフードスパゲッティの写真" width="184" height="130" /></p>
<p>900円</p>
</div>
</div>
<ul id="sidebar">
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
<address>Copyright(c)2012 Cafe Cockeyolly</address>
</div>
</body>
</html>
ずいぶん時間がかかってしまった。