body { margin: 0; padding: 0; line-height: 1.5em; font-family: Verdana, Arial, san-serif; font-size: 11px; color: #ffffff; background: #ffffff; } a:link, a:visited { color: #e6e154; text-decoration: none; font-weight: bold;} a:active, a:hover { color: #e6e154; text-decoration: underline;} p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 1px; font-size: 1px; } .cleaner_with_height { clear: both; width: 100%; height: 30px; font-size: 1px; } .cleaner_with_width { float: left; width: 20px; height: 30px; font-size: 1px; } .buy_now_button a{ clear: both; text-align: center; display: block; width: 100px; padding: 4px 0 5px 0; margin-bottom: 10px; background: url(images/templatemo_btn_02.jpg) no-repeat; color: #FFFFFF; font-weight: bold; text-decoration: none; } .detail_button a{ clear: both; text-align: center; display: block; width: 100px; padding: 4px 0 5px 0; margin-bottom: 10px; background: url(images/templatemo_btn_01.jpg) no-repeat; color: #ffffff; font-weight: bold; text-decoration: none; } #templatemo_container{ width: 960px; margin: 0 auto; padding: 0 10px; background: #1c1c1b url(images/templatemo_bg.jpg) repeat-y; } /* menu */ #templatemo_menu { clear: both; width: 960px; height: 45px; background: url(images/templatemo_menu_bg.jpg) no-repeat; } #templatemo_menu ul { padding: 13px 0 0 0; margin: 0; list-style: none; } #templatemo_menu li a:hover, #templatemo_menu li .current{ color: #FE2E2E; } /* end of menu*/ /* header */ #templatemo_header { clear: both; width: 960px; height: 285px; padding: 0; margin: 0; background: url(images/templatemo_header_bg.jpg) no-repeat; } #templatemo_header a,a:hover { color: #ffffff; } #templatemo_header #templatemo_special_offers { float: left; font-size: 14px; margin-top: 95px; margin-left: 490px; width: 180px; } #templatemo_special_offers a { font-size: 12px; } #templatemo_special_offers p { margin: 0 0 20px 0; } #templatemo_special_offers p span { font-size: 18px; } #templatemo_header #templatemo_new_books { float: left; margin-top: 90px; margin-left: 55px; width: 180px; } #templatemo_new_books ul { margin: 0 0 10px 0; padding: 0 0 0 20px; } #templatemo_new_books li { margin: 0; padding: 0; } /* end of header */ /* content */ #templatemo_content { clear: both; width: 920px; padding: 0 20px; } #templatemo_content #templatemo_content_left { float: left; width: 188px; padding: 10px; background-color: #FE2E2E; border: 1px solid #212120; } #templatemo_content #templatemo_content_right { float: right; width: 670px; } #templatemo_content_left .templatemo_content_left_section{ clear: both; padding-bottom: 10px; border-bottom: 1px solid #2b2b2a; margin-bottom: 20px; } .templatemo_content_left_section h1 { font-size: 14px; color: #FE2E2E; padding: 0 0 5px 0; margin: 0 0 10px 0; border-bottom: 1px dotted #cbc750; } .templatemo_content_left_section ul { padding: 0; margin: 0; } .templatemo_content_left_section ul li{ padding: 0 0 3px 10px; list-style: none; } .templatemo_content_left_section ul li a{ font-weight: normal; text-decoration: none; color: ##FE2E2E; } .templatemo_content_left_section li a:hover, .templatemo_content_left_section li .current{ color: ##FE2E2E; } #templatemo_content_right .templatemo_product_box { float: left; width: 303px; height: 210px; padding: 10px; border: 1px solid #333; } #templatemo_content_right h1 { padding: 10px; margin: 0 0 20px 0; font-size: 15px; color: ##FE2E2E; background: url(images/templatemo_h1_bg.jpg); } #templatemo_content_right h2 { padding: 0 0 0 0; margin: 0 0 20px 0; font-size: 12px; color: ##FE2E2E; } #templatemo_content_right h3 { padding: 0; margin: 0 0 20px 0; font-size: 18px; color: ##FE2E2E; } #templatemo_content_right ul { margin: 0 0 20px 0; padding: 0 0 0 20px; list-style: none; } #templatemo_content_right li { padding: 0 0 3px 0; } #templatemo_content_right .image_panel { float: left; width: 100px; margin-right: 20px; } #templatemo_content_right p { text-align: justify; padding: 0 0 8px 0; } .templatemo_product_box h1 span { font-weight: normal; } .templatemo_product_box img { float: left; margin-right: 20px; } .templatemo_product_box .product_info { float: left; width: 180px; } .product_info p { margin-bottom: 15px; } /* end of content */ <div id="templatemo_container"> <div id="templatemo_header"> <div id="templatemo_special_offers"> <p> 25% discounts for purchase over $80 </p> <a href="subpage.html" style="margin-left: 50px;">Read more...</a> </div> <div id="templatemo_new_books"> <ul> <li>Suspen disse</li> <li>Maece nas metus</li> <li>In sed risus ac feli</li> </ul> <a href="subpage.html" style="margin-left: 50px;">Read more...</a> </div> </div> <!-- end of header --> <div id="templatemo_content"> <div id="templatemo_content_left"> <div class="templatemo_content_left_section"> <h1>Categories</h1> <ul> <li><a href="subpage.html">Donec accumsan urna</a></li> <li><a href="subpage.html">Proin vulputate justo</a></li> <li><a href="#">In sed risus ac feli</a></li> <li><a href="#">Aliquam tristique dolor</a></li> <li><a href="#">Maece nas metus</a></li> <li><a href="#">Sed pellentesque placerat</a></li> <li><a href="#">Suspen disse</a></li> <li><a href="#">Maece nas metus</a></li> <li><a href="#">In sed risus ac feli</a></li> </ul> </div> <div class="templatemo_content_left_section"> <h1>Bestsellers</h1> <ul> <li><a href="#">Vestibulum ullamcorper</a></li> <li><a href="#">Maece nas metus</a></li> <li><a href="#">In sed risus ac feli</a></li> <li><a href="#">Praesent mattis varius</a></li> <li><a href="#">Maece nas metus</a></li> <li><a href="#">In sed risus ac feli</a></li> <li><a href="http://www.flashmo.com" target="_parent">Flash Templates</a></li> <li><a href="http://www.templatemo.com" target="_parent">CSS Templates</a></li> <li><a href="http://www.webdesignmo.com" target="_parent">Web Design</a></li> <li><a href="http://www.photovaco.com" target="_parent">Free Photos</a></li> </ul> </div> <div class="templatemo_content_left_section"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0"></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0"></a> </div> </div> <!-- end of content left --> <div id="templatemo_content_right"> <div class="templatemo_product_box"> <h1>Photography (by Best Author)</h1> <img src="images/templatemo_image_01.jpg" alt="image"> <div class="product_info"> <p> Etiam luctus. Quisque facilisis suscipit elit. Curabitur... </p> <h3>$55</h3> <div class="buy_now_button"> <a href="subpage.html">Buy Now</a> </div> <div class="detail_button"> <a href="subpage.html">Detail</a> </div> </div> <div class="cleaner"> </div> </div> <div class="cleaner_with_width"> </div> <div class="templatemo_product_box"> <h1>Cooking (by New Author)</h1> <img src="images/templatemo_image_02.jpg" alt="image"> <div class="product_info"> <p> Aliquam a dui, ac magna quis est eleifend dictum. </p> <h3>$35</h3> <div class="buy_now_button"> <a href="subpage.html">Buy Now</a> </div> <div class="detail_button"> <a href="subpage.html">Detail</a> </div> </div> <div class="cleaner"> </div> </div> <div class="cleaner_with_height"> </div> <div class="templatemo_product_box"> <h1>Gardening (by Famous Author)</h1> <img src="images/templatemo_image_03.jpg" alt="image"> <div class="product_info"> <p> Ut fringilla enim sed turpis. Sed justo dolor, convallis at. </p> <h3>$65</h3> <div class="buy_now_button"> <a href="subpage.html">Buy Now</a> </div> <div class="detail_button"> <a href="subpage.html">Detail</a> </div> </div> <div class="cleaner"> </div> </div> <div class="cleaner_with_width"> </div> <div class="templatemo_product_box"> <h1>Sushi Book (by Japanese Name)</h1> <img src="images/templatemo_image_04.jpg" alt="image"> <div class="product_info"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h3>$45</h3> <div class="buy_now_button"> <a href="subpage.html">Buy Now</a> </div> <div class="detail_button"> <a href="subpage.html">Detail</a> </div> </div> <div class="cleaner"> </div> </div> <div class="cleaner_with_height"> </div> <a href="subpage.html"><img src="images/templatemo_ads.jpg" alt="ads"></a> </div> <!-- end of content right --> <div class="cleaner_with_height"> </div> </div> <!-- end of content --> </div>