Screenshots
XHTML Markup
CSS Markup

<body>
<div id=\"wrapper\">
  <div class=\"bg_shadow\">
    <div class=\"frame\">
      <div class=\"header\">
        <div class=\"btn_kegel\"><a href=\"http://www.kegel.net\" target=\"_blank\"></a> </div>
      </div>
      <div class=\"title\">
        <div class=\"bg_right\">
          <div class=\"links\">
            <ul>
              <li><a href=\"contentpage-01.html\">< HOME</a></li>
            </ul>
          </div>
          <div class=\"heading\">
            <h2>Kegel Navigation Sport Series</h2>
          </div>
        </div>
      </div>
      <div class=\"content\">
        <div class=\"left_s\"> <img src=\"images/categories.png\" alt=\" \" />
          <div class=\"cont\">
          <div class=\"nav\">
            <div class=\"left_nav\">
              <h2>NAVIGATION PATTERNS</h2>
              <ul>
                <li><a href=\"#\">Sports Patterns</a></li>
                <li><a href=\"#\">Challenge Patterns</a></li>
                <li><a href=\"#\">Recreational Patterns</a></li>
              </ul>
            </div>
           
            <div class=\"left_nav\">
              <h2>PATTERN CATEGORIES</h2>
              <ul>
                <li><a href=\"#\">WTBA Patterns</a></li>
                <li><a href=\"#\">USBC Patterns</a></li>
                <li><a href=\"#\">ETBF Patterns</a></li>
                <li><a href=\"#\">EBT Patterns</a></li>
                <li><a href=\"#\">ABF Patterns</a></li>
                <li><a href=\"#\">WBT Patterns</a></li>
                <li><a href=\"#\">House Patterns</a></li>
                <li><a href=\"#\">Special Patterns</a></li>
                <li><a href=\"#\">sports patterns</a></li>
              </ul>
            </div>
           
            <div class=\"left_nav\">
              <h2>PATTERN CATEGORIES</h2>
              <ul>
                <li><a href=\"#\">WTBA Patterns</a></li>
                <li><a href=\"#\">USBC Patterns</a></li>
                <li><a href=\"#\">ETBF Patterns</a></li>
                <li><a href=\"#\">EBT Patterns</a></li>
                <li><a href=\"#\">ABF Patterns</a></li>
                <li><a href=\"#\">WBT Patterns</a></li>
                <li><a href=\"#\">House Patterns</a></li>
                <li><a href=\"#\">Special Patterns</a></li>
                <li><a href=\"#\">sports patterns</a></li>
              </ul>
            </div>
            </div>
            <div class=\"bot_cont\">
            <img src=\"images/any_question.png\"  alt=\" \" />
            <p>READ OUR FAQ<br />
or SEND US AN E-MAIL</p>
            <img src=\"images/kegel.png\" alt=\" \" />
            <p>Download KOSI<br />
for designing patterns and <br />
installing patterns</p>
            </div>
          </div>
        </div>
        <div class=\"right_s\">
          <div class=\"bg_top\">
            <p>A DIV for necessary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget volutpat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
          </div>
          <div class=\"tab_stuf\">
          
          	<table id=\"flex1\"></table>
          
            <!--<table class=\"table\" >
              <tr class=\"top\">
                <th width=\"10%\"></th>
                <th width=\"30%\">Pattern Name</th>
                <th width=\"20%\">Category</th>
                <th width=\"10%\">Length</th>
                <th width=\"10%\">Ratio</th>
                <th width=\"10%\">Volume</th>
                <th width=\"10%\">DB</th>
                <th width=\"10%\">Pump</th>
                <th width=\"10%\">Date</th>
              </tr>
              <tr>
                <td><img src=\"images/img.png\" alt=\"\" /></td>
                <td>HIGHWAY TO HELL - 2340</td>
                <td>KEGEL SPORTS</td>
                <td>40</td>
                <td>1:2.3</td>
                <td>25.3</td>
                <td>N</td>
                <td>50</td>
                <td>2009</td>
              </tr>
              <tr class=\"gray\">
                <td><img src=\"images/img.png\" alt=\"\" /></td>
                <td>AUTOBAHN - 2542</td>
                <td>KEGEL SPORTS</td>
                <td>42</td>
                <td>1:2.5</td>
                <td>25.85</td>
                <td>Y</td>
                <td>50</td>
                <td>2010</td>
              </tr>
            </table>-->
          </div>
        </div>
      </div>
      <div class=\"footer\">
      <ul>
      <li><a href=\"contentpage-01.html\">Kegel Pattern Library Home</a></li>
      <li><a href=\"#\">Contact</a></li>
      <li><a href=\"http://www.kegel.net\" target=\"_blank\">Kegel.net</a></li>
      </ul>
      </div>
    </div>
  </div><div class=\"bot_crv\"></div>
</div>
</body>

*{ margin:0; padding:0;}
img{ border:none;}
a{ outline:none;}
.clear{ clear:both;}
body{ font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#fff; background:url(../images/bg_top.png) 0 0 repeat-x;}


#wrapper{ margin:0 auto; width:994px;}
.bg_shadow{ float:left; background:url(../images/bg_shadow.png) 0 8px repeat-y; width:964px; padding:0 15px; margin-top:8px;}
.bot_crv{ float:left; width:994px; background:url(../images/bot_crv.png) center 0 no-repeat; height:20px;}
.frame{ width:960px; float:left; border-bottom:1px solid #2a5462;}
.frame .header{ float:left; width:960px; background:url(../images/header.png) 0 0 no-repeat; height:134px; margin-top:-8px;}
.frame .header .btn_kegel{ float:right; width:170px; height:45px; margin-right:50px;}
.frame .header .btn_kegel a{width:170px; height:45px; float:left;}
.frame .title{ float:left; width:960px; background:url(../images/bg_tab.png) 0 0 repeat-x; height:56px; float:left;}
.frame .title .bg_right{ width:700px; float:right;}
.frame .title .bg_right .links{ float:left; width:250px; padding:38px 0 0 10px;}
.frame .title .bg_right .links ul{ float:left; list-style:none;}
.frame .title .bg_right .links ul li{ float:left;}
.frame .title .bg_right .links ul li a{ color:#fff; font-size:12px; text-decoration:none; padding:0 5px;}
.frame .title .bg_right .heading{width:440px; float:left; padding-top:17px;}
.frame .title .bg_right .heading h2{ font-size:24px;}
.frame .content{ float:left; width:960px;}
.frame .content .left_s{ float:left; width:259px;  border-right:1px solid #999999; margin-top:-47px;}
.frame .content .left_s img{ float:left; margin-left:5px;}
.frame .content .left_s .cont{ background:#e7e7e7; width:249px; float:left; padding:5px; min-height:675px;}
.frame .content .left_s .cont .nav{ width:248px; float:left; border:1px solid #cccccc; overflow:auto; height:460px;}
.frame .content .left_s .cont .nav .left_nav{ width:230px; float:left; }
.frame .content .left_s .cont .nav .left_nav h2{ background:url(../images/header_img.png) repeat-x; height:35px; line-height:35px; width:216px; float:left; color:#6e0f0f; font-size:14px; padding-left:15px; text-transform:uppercase; }
.frame .content .left_s .cont .nav .left_nav ul{ float:left; list-style-type:none; padding:16px 10px 16px 15px; background:#fff; }
.frame .content .left_s .cont .nav .left_nav ul li{ float:left; width:200px; border:1px solid #dadada;background:#fbfbfb; height:22px; line-height:22px; margin-bottom:1px;}
.frame .content .left_s .cont .nav .left_nav ul li a{ padding:10px 0px 10px 15px;  color:#003366; font-size:14px; text-decoration:none;}
.frame .content .left_s .cont .bot_cont{ float:left; width:248px;}
.frame .content .left_s .cont .bot_cont img{ float:left; margin:18px 0 10px 3px;}
.frame .content .left_s .cont .bot_cont p{ text-align:center; color:#000;}

.frame .content .right_s{ width:700px; float:left;}
.frame .content .right_s .bg_top{ float:left; background:url(../images/bg_gradient.png) 0 0 repeat-x; height:45px; width:700px;}
.frame .content .right_s .bg_top p{ color:#000; line-height:18px; padding:8px 0 0 10px;}
.frame .content .right_s .tab_stuf{ width:680px; float:left; margin:10px;}
.frame .content .right_s .tab_stuf .table{ width:100%; border-collapse:collapse; color:#000; font-family:Calibri; font-size:14px; text-align:center; }
.frame .content .right_s .tab_stuf tr.top{ background:url(images/tr_bg.png) repeat-x; font-size:16px; }
.frame .content .right_s .tab_stuf tr.gray{ background:#efefef; }
.frame .content .right_s .tab_stuf .table td, .table th{ border:1px solid #b5b5b5; padding:5px; }


.gray_bar{width:620px; float:left;}
.gray_bar .search_tab{float:left; list-style:none; border-left:1px solid #999999;}
.gray_bar .search_tab li{float:left; height:30px; line-height:30px; text-align:center;  font-size:14px; background:#efefef;border-right:1px solid #999999;border-top:1px solid #999999;}
.gray_bar .search_tab li a.one{ width:149px;}
.gray_bar .search_tab li a.two{ width:260px;}
.gray_bar .search_tab li a.three{ width:204px;}
.gray_bar .search_tab li.active { position:relative;}
.gray_bar .search_tab li.active a{ background:#fff; border-bottom:1px solid #fff; position:relative; left:0;}
.gray_bar .search_tab li a{color:#474747; text-decoration:none; display:block;font-weight:bold;}
.gray_bar .search_tab li a:hover{ background:#fff;}

.frame .content .right_s .tabs{ width:680px; float:left; padding:0 10px; margin-top:-32px;}
.frame .content .right_s .rightstuff{ float:left; width:666px; border:1px solid #a4a4a4; padding:7px;}
.frame .content .right_s .rightstuff .common{width:680px; float:left; color:#4c4c4c; font-weight:bold;}
.frame .content .right_s .basic{width:665px; float:left; min-height:445px;}
.frame .content .right_s #tcontent3, #tcontent2{ line-height:18px;}
.frame .content .right_s .basic .left_bar{ width:130px; float:left; }
.frame .content .right_s .basic .left_bar img{ float:left;}
.frame .content .right_s .basic .left_bar .dwnld{ width:123px; float:left; border:1px solid #cccccc; margin:15px 0 5px 0;}
.frame .content .right_s .basic .left_bar .dwnld h3{ background:#fff; margin:-10px 0 0 26px; font-weight:normal; font-size:11px; width:76px; text-align:center;}
.frame .content .right_s .basic .left_bar .dwnld ul{ list-style:none; float:left; margin:8px;}
.frame .content .right_s .basic .left_bar .dwnld ul li{ float:left; margin-bottom:5px;}
.frame .content .right_s .basic .left_bar .dwnld ul li a{ background:url(../images/bg_btn.png) 0 0 repeat-x; float:left; color:#003366; text-align:center; text-decoration:none; width:103px; height:25px; border:1px solid #cccccc; line-height:25px; font-size:11px;}
.frame .content .right_s .basic .left_bar p{ text-align:center; font-size:10px;}
.frame .content .right_s .basic .left_bar .btns{ float:left; width:123px;}
.frame .content .right_s .basic .left_bar .btns ul{ list-style:none; float:left; margin:8px;}
.frame .content .right_s .basic .left_bar .btns ul li{ float:left; margin-bottom:5px;}
.frame .content .right_s .basic .left_bar .btns ul li a{ background:url(../images/bg_li_big.png) 0 0 repeat-x; float:left; color:#003366; text-align:center; text-decoration:none; width:103px; height:32px; padding-top:6px; border:1px solid #cccccc; font-size:11px;}
.frame .content .right_s .basic .right_bar{ width:518px; float:right; border:1px solid #cccccc; height:440px; background:#f0f0f0;}
.frame .content .right_s .basic .right_bar h2{ color:#003366; font-size:24px; padding:5px 0 5px 10px;}
.frame .content .right_s .basic .right_bar .bg_line{ background:url(../images/bg_line.png) 0 0 repeat-x; height:2px; float:left; width:518px;}
.frame .content .right_s .basic .right_bar .cat{ float:left; width:518px;}
.frame .content .right_s .basic .right_bar .cat h2{ font-size:16px; color:#666666;}
.frame .content .right_s .basic .right_bar .cat h2 span{ font-weight:normal;}
.frame .content .right_s .basic .right_bar .info{ float:left; width:508px; padding-left:10px;}
.frame .content .right_s .basic .right_bar .info ul{ float:left; list-style:none; width:518px;}
.frame .content .right_s .basic .right_bar .info ul li{ width:120px; float:left; color:#40658b; font-size:11px; height:30px; line-height:30px;}
.frame .content .right_s .basic .right_bar .info ul li span{ color:#000;}
.frame .content .right_s .basic .right_bar .btn_blk{ float:left; width:518px; padding:6px 0;}
.frame .content .right_s .basic .right_bar .btn_blk img{ margin-left:12px;}
.frame .content .right_s .basic .right_bar .text{ float:left; width:518px;}
.frame .content .right_s .basic .right_bar .text p{ padding:10px;}

.frame .content .right_s .leftpanel{ width:470px; float:left; padding:0 10px; margin-top:-47px; font-family:\'Calibri\';}
.frame .content .right_s .leftpanel .ban{ width:470px; float:left; }
.frame .content .right_s .leftpanel .formbox{ width:468px; float:left; background:#e7e7e7; border:1px solid #999999; margin-top:5px;}
.frame .content .right_s .leftpanel .formbox h2{ width:468px; float:left; border-bottom:1px solid #999999; margin-bottom:5px;}
.frame .content .right_s .leftpanel .formbox p{ padding:8px 15px; font-size:14px; color:#000;}
.frame .content .right_s .leftpanel .formbox .formpanel{ width:440px; color:#000; background:#fff; margin:4px; float:left; padding:20px 10px;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea{ width:410px; float:left; border:1px solid #dddddd; position:relative; padding:14px; margin-bottom:16px;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea h3{ position:absolute; top:-12px; left:0; font-size:18px; color:#003366; padding-left:14px;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea .row{ width:410px; float:left;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea .row span{ float:left;border:1px solid #ddd; height:18px; padding:5px 3px; background:#f6f6f6 url(../images/select_bg.gif) 0 0 repeat-x; }
.frame .content .right_s .leftpanel .formbox .formpanel .formarea .row span select{ width:80px; background:none; border:0; outline:none;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea .row span.range{ margin:0 15px; background:#fff; text-align:center; float:left; width:196px;}
.frame .content .right_s .leftpanel .formbox .formpanel .formarea .row span input[type=text]{ background:#fff; outline:none; width:190px; text-align:center; font-size:14px; border:0;}
.frame .content .right_s .leftpanel .formbox .formpanel .smallform{ width:126px; float:left; border:1px solid #dddddd; position:relative; padding:20px 12px 15px; margin-right:14px;}
.frame .content .right_s .leftpanel .formbox .formpanel .smallform h3{ position:absolute; top:-12px; left:0; font-size:18px; color:#003366; padding-left:12px;}
.frame .content .right_s .leftpanel .formbox .formpanel .smallform span{ float:left;border:1px solid #ddd; height:18px; padding:5px 3px; background:#f6f6f6 url(../images/select_bg.gif) 0 0 repeat-x; }
.frame .content .right_s .leftpanel .formbox .formpanel .smallform span select{ width:120px; background:none; border:0; outline:none;}
.frame .content .right_s .leftpanel .formbox .formpanel .find{ float:right;}
.frame .content .right_s .leftpanel .formbox ul{ list-style:none; padding:14px 20px; color:#000; font-size:14px;}
.frame .content .right_s .leftpanel .formbox ul li{ line-height:14px; padding:5px 17px; background:url(../images/dot.png) 0 center no-repeat;}


.frame .content .right_s .side_bar{ float:left; width:200px; margin-top:-47px;}
.frame .content .right_s .side_bar .latest{ width:198px; float:left; border:1px solid #cccccc; background:#e7e7e7; position:relative; margin-bottom:6px;}
.frame .content .right_s .side_bar .latest img{ float:left; position:absolute; right:-5px; top:4px;}
.frame .content .right_s .side_bar .latest ul{ list-style:none; float:left; padding:55px 0 15px 20px;}
.frame .content .right_s .side_bar .latest ul li{ float:left; line-height:24px;}
.frame .content .right_s .side_bar .latest ul li a{ font-size:14px; text-decoration:none; color:#000;}

.frame .content .right_s .side_bar .ribbon_stuf{ float:left; width:200px; background:url(../images/bg_ribbon.png) 0 0 no-repeat; height:315px; margin-top:38px;}
.frame .content .right_s .side_bar .ribbon_stuf img.ribb{ float:left; margin-top:-35px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff{ float:left; width:144px; padding-left:20px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_easy{ float:left; background:url(../images/btn_easy.png) 0 0 no-repeat; width:164px; height:50px; margin-bottom:3px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_easy:hover{ background:url(../images/btn_easy_hover.png) 0 0 no-repeat; float:left; width:164px; height:50px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_easy a{ display:block; width:164px; height:50px; float:left;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_hard{ float:left; background:url(../images/btn_hard.png) 0 0 no-repeat; width:164px; height:46px; margin-bottom:3px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_hard:hover{ background:url(../images/btn_hard_hover.png) 0 0 no-repeat; float:left; width:164px; height:46px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_easy a{ display:block; width:164px; height:46px; float:left;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_med{ float:left; background:url(../images/btn_medium.png) 0 0 no-repeat; width:164px; height:46px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_med:hover{ background:url(../images/btn_med_hover.png) 0 0 no-repeat; float:left; width:164px; height:46px;}
.frame .content .right_s .side_bar .ribbon_stuf .btn_stuff .btn_med a{ display:block; width:164px; height:46px; float:left;}


.frame .footer{ float:left; width:960px; background:#d9d9d9; height:33px; border-top:1px solid #2a5462;}
.frame .footer ul{ list-style:none;}
.frame .footer ul li{ float:left; line-height:33px;}
.frame .footer ul li+li{ background:url(../images/dvdr.png) 0 center no-repeat;}
.frame .footer ul li a{ color:#003366; text-decoration:none; padding:0 8px;}

Demo : KEGEL PL