Wild City Css Tasarım Ayırdım Buyrun Bakın

<div id="container">

  <div id="header">
    <h1><a href="#">wild city</a></h1>
    <h2>insert your witty slogan here</h2>
   
    <ul id="mainMenu">
       <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">links</a></li>
        <li><a href="#">stuff</a></li>
        <li><a href="#">activism</a></li>
        <li><a href="#">contact</a></li>
        <li><span>search:</span></li>
        <li class="formList"><form action="cgi-bin/void.cgi">
        <div class="c1"><div class="c2"><div class="c3"><div class="c4">
        <input type="text" name="search" size="10" class="searchBox" />
        <button type="submit" class="goButton"><span>go</span></button>
        </div></div></div></div>
        </form></li>
    </ul>
  </div><!-- end #header -->
 
  <div id="mainContent">
 
    <div class="blog">
   
      <h2 class="blogTitle"><a href="single.html">Click here to view an article page with comments</a></h2>
      <h3 class="meta">posted by <a href="#">johnnyboy</a> on monday, june 1, 2008 <img src="http://www.opendesigns.org/designs/1657/images/bullet_w.gif" alt="" class="bullet" /> <a href="#">26 comments</a> <img src="http://www.opendesigns.org/designs/1657/images/bullet_w.gif" alt="" class="bullet" /> tagged in <a href="#">Funny</a>, <a href="#">City Life</a>, <a href="#">Technology</a> <img src="http://www.opendesigns.org/designs/1657/images/bullet_w.gif" alt="" class="bullet" /> <a href="#">full article</a></h3>

 </div><!-- end .blog -->

      <h2 class="boxDesc">archives:</h2>
     
      <div class="c1"><div class="c2"><div class="c3"><div class="c4">
      <ul>
         <li><a href="#">Jun 2008</a></li>
        <li><a href="#">May 2008</a></li>
        <li><a href="#">Apr 2008</a></li>
        <li><a href="#">Mar 2008</a></li>
        <li><a href="#">Feb 2008</a></li>
        <li><a href="#">Jan 2008</a></li>
         <li><a href="#">Dec 2007</a></li>
        <li><a href="#">Nov 2007</a></li>
        <li><a href="#">Oct 2007</a></li>
        <li><a href="#">Sep 2007</a></li>
        <li><a href="#">Aug 2007</a></li>
        <li><a href="#">Jul 2007</a></li>
        <li><a href="#">Jun 2007</a></li>
        <li><a href="#">May 2007</a></li>
        <li><a href="#">Apr 2007</a></li>
        <li><a href="#">Mar 2007</a></li>
        <li><a href="#">Feb 2007</a></li>
        <li><a href="#">Jan 2007</a></li>
      </ul>
      </div></div></div></div>
     
      <h2 class="boxDesc">categories:</h2>
     
      <div class="c1"><div class="c2"><div class="c3"><div class="c4">
      <ul><!-- If the background overlaps over the text in these list items, you may have to add a space after the name. -->
         <!-- This typically hapens at the end of lines. -->
         <li><a href="#">Vestibulum</a></li>
        <li><a href="#">Urna velit</a></li>
        <li><a href="#">Lobortis eget</a></li>
        <li><a href="#">Pellentesque eget</a></li>
        <li><a href="#">Donec pellentesque</a></li>
        <li><a href="#">Nunc risus</a></li>
         <li><a href="#">Integer auctor</a></li>
        <li><a href="#">Justo lectus</a></li>
        <li><a href="#">Tincidunt </a></li>
        <li><a href="#">Magna sed</a></li>
        <li><a href="#">Scelerisque</a></li>
        <li><a href="#">Dignissim</a></li>
        <li><a href="#">Pellentesque</a></li>
        <li><a href="#">Aliquam</a></li>
        <li><a href="#">Pharetra</a></li>
        <li><a href="#">Praesent</a></li>
        <li><a href="#">Vestibulum</a></li>
        <li><a href="#">Urna velit</a></li>
        <li><a href="#">Lobortis eget </a></li>
        <li><a href="#">Pellentesque eget</a></li>
        <li><a href="#">Donec pellentesque</a></li>
        <li><a href="#">Nunc risus</a></li>
         <li><a href="#">Integer auctor</a></li>
        <li><a href="#">Justo lectus</a></li>
        <li><a href="#">Integer tincidunt</a></li>
        <li><a href="#">Magna sed</a></li>
        <li><a href="#">Scelerisque</a></li>
        <li><a href="#">Dignissim </a></li>
        <li><a href="#">Pellentesque</a></li>
        <li><a href="#">Aliquam</a></li>
        <li><a href="#">Pharetra</a></li>
        <li><a href="#">Praesent</a></li>
      </ul>
      </div></div></div></div>
     
      <br class="clear" />
         
   </div><!-- end #mainContent -->
   
  <div id="footer">
    <p>Copyright &copy; 2008, your.site.com <img src="http://www.opendesigns.org/designs/1657/images/bullet_w.gif" alt="" class="bullet" /> Design by <a href="http://20pirates.com">Tony Pires</a> <img src="http://www.opendesigns.org/designs/1657/images/bullet_w.gif" alt="" class="bullet" /> <a href="#">Terms &amp; Conditions</a></p>
  </div><!-- end #footer -->
 
</div>

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

* {
   margin: 0;
   padding: 0;
}

body {
   font: 13px Georgia, "Times New Roman", Times, serif;
   background: url(http://www.opendesigns.org/designs/1657/images/header.jpg) top center no-repeat #870010;
   text-align: center;
   color: #FFF;
}

/**** GENERAL STYLES ****/

a {
   color: #F47D1F;
   text-decoration: none;
}

a:hover {
   color: #FFCFB3;
}

p {
   line-height: 1.4em;
   text-align: justify;
   padding: 10px 0 0 0;
}

#mainContent ul,
#mainContent ol {
   margin-left: 40px;
   line-height: 1.8em;
   padding: 10px 0 0 0;
}

#mainContent ul {
   list-style: url(http://www.opendesigns.org/designs/1657/images/bullet_o.gif);
}

blockquote {
   border-left: 4px solid #B21;
   color: #FFCFB3;
   margin: 10px 40px 0 40px;
   line-height: 1.8em;
   padding: 0 10px 10px 10px;
}

blockquote:first-line {