arthemia : Design 4 « Templates « HTML / CSS






arthemia

     

<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Arthemia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*  

Theme Name: Arthemia

Theme URI: http://www.michaeljubel.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/

Description: <a href="http://www.michaeljubel.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/">Arthemia</a> theme is combining a magazine and a weblog into one; it is not too magazine-ish nor too blog-ish. Designed for Wordpress. Gravatar support included along with automatic thumbnail resizer.

Version: 1.0

Author: Michael Jubel

Author URI: http://www.michaeljubel.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/



The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/





/* HTML Elements */

* {

  margin:0;

  padding:0;

  }



body {

  font: 100% Arial, Helvetica;

  background: #FFF;

  color: #333;

  }



p {  

  margin: 15px 0;

  }



a:link, a:visited {

  color: #3c57a7;

  text-decoration:none

  }



a:hover, a:active {

  color: #3c57a7;

  text-decoration:underline;

  }



a img {

  border:0;

  }



code {

  font: 1.0em 'Courier New', Courier, Fixed;
  background:#ececec;

  }  



acronym, abbr, span.caps {  

  font-size: 0.9em;

  letter-spacing: .07em;

  cursor: help;

  }      



acronym, abbr {

  border-bottom: 1px dashed #999;

  }



blockquote {

  padding: 10px 10px 0 10px;

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  background: #eee;

  font:1.0em Arial;

  line-height:1.5em;

  margin:10px 0px;

  }



select {

  width: 130px;

  }  







/* Structure */




#head {

  width:960px;

  margin:0px auto;
  margin-top:15px;

  padding:0px;

  font-size:0.7em;

  }




#page {

  width:940px;

  margin:0px auto;

  padding:10px;
  background:#ececec;
  font-size:0.7em;

  }



.left {

  float:left;

  }



.right {

  float:right;

  }





/* Navigation Bar*/

#navbar {

  margin:0 auto;
  margin-top:15px;

  padding:0px 10px;
  text-transform:uppercase;
  background:#2c2c2c url(arthemia-images/navbar.png);

  }

#page-bar {
  width:722px;
  }

#page-bar ul {
  list-style: none;
  }

#page-bar li {
  float:left;
  list-style:none;
  cursor: pointer;
  display:block;
  border-right:1px solid #333;
  }

#page-bar li:hover {
  background: #3c57a7;
  }


#page-bar a, #page-bar a:visited {
  margin: 0px;
  padding:10px 16px;
  font-weight:bold;
  color:#FFF;
  display:block;
  }

#page-bar a:hover {
  text-decoration:none;
  display:block;
  }

#searchform {
  width:194px;
  float:right;
  text-align:right;
  padding-top:8px;
  margin-right:10px;
  }

/* Dropdown Menus */    
#page-bar li {
  float: left;
  margin: 0px;
  padding: 0px;
  }
  
#page-bar li li {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 122px;
  text-transform:none;
  }
  
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
  background: #2B2B2B;
  width: 122px;
  float: none;
  margin: 0px;
  padding: 5px 10px 5px 18px;
  border-top: 1px solid #C0C0C0;
  }
  
#page-bar li li a:hover, #page-bar li li a:active {
  background: #666666;
  padding: 5px 10px 5px 18px;
  }

#page-bar li ul {
  position: absolute;
  width: 10em;
  left: -999em;
  }

#page-bar li:hover ul {
  left: auto;
  display: block;
  }
  
#page-bar li:hover ul, #page-bar li.sfhover ul {
  left: auto;
  }




/* Text*/



h1 {

  font:3.5em Arial;

  font-weight:bold;
  letter-spacing:-0.08em;

  }



h2 {

  font:2.3em Georgia, "Times New Roman";

  }



h3 {

  font:1.3em Arial;

  margin-bottom:3px;

  color:#3c57a7;
  font-weight:bold;

  }



h4 {

  font:1.0em Arial;

  }


h3.cat_title, h3.cat_title a {
  color:#333;
  letter-spacing:-0.05em;
  }


h3#respond {

  margin-top:0px;

  padding-top:20px;

  }



h3#comments {

  margin-top:32px;

  padding-left:0px;

  }

h3.authors {
  margin-top:15px;
  }



/* Index Page*/



#logo {

  width:350px;

  }


#tagline {
  margin-top:5px;

  font-size:1em;

  color:#333;
  }


#top {
  padding:0;

  }



#headline {

  width:590px;

  float:left;

  background:#fff;

  padding:10px;
  font-size:1.05em;
  line-height:1.5em;
  margin:0;

  }



#headline  div.title {

  font-weight:bold;

  font:2.4em Georgia;

  letter-spacing:-0.05em;
  display:block;
  padding-bottom:5px;

  }


#headline div.meta {
  display:block;
  padding-bottom:2px;
  }

#headline p {
  padding-bottom:15px;
  }


#featured {

  width:300px;
  background:#fff;

  float:right;

  padding:10px 10px 6px 10px;

  }



#featured .clearfloat {

  margin-top:7px;

  margin-bottom:9px;

  }



#featured .info {

  margin-top:5px;

  padding-top:5px;

  float:right;

  width:185px;

  }

#featured .title {
  font-weight:bold;
  }



#featured .divider {

  margin-left:85px;

  }



#headline a img, #featured a img {
  border:1px solid #bbb;
  margin-top:5px;
  margin-right:10px;
  }



#middle {

  width: 920px;
  background:#fff;
  float:right;
  padding:10px;
  margin:10px 0;

  }



.category {

  width:164px;

  float:left;

  border-top:8px solid #333;

  margin:0px;

  padding:5px 10px 10px 10px;
  background:#fff;

  }

.category p {
  margin:0;
  }



#cat-1, #cat-3, #cat-5  {border-top:8px solid #333333;}

#cat-2, #cat-4 {border-top:8px solid #3c57a7;}



.category span.cat_title, #front-popular h3, #front-list .cat_title {

  text-transform:lowercase;

  margin:0;

  font-weight:bold;

  font-size:1.5em;

  letter-spacing:-0.05em;

  }

#front-popular h3 {
  color:#fff;
  }


.category a {

  color:#333;
  display:block;
  background:none;

  }



.category a:hover {

  background:none;
  color:#fff;
  text-decoration:none;

  }



#cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }

#cat-2:hover, #cat-4:hover {background:#3c57a7; color:#fff; }

#cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }

#cat-2:hover a, #cat-4:hover a {background:#3c57a7; color:#fff; }


#bottom {

  width: 940px;

  }


#front-list {

  width:590px;
  background:#fff;

  padding:10px;
  font-size:1.05em;

  line-height:1.75em;
  float:left;

  }



#front-list blockquote {

  padding: 0px 10px 0 10px;

  }



#front-list .title {

  font-weight:bold;

  font:2.0em Georgia;

  letter-spacing:-0.05em;

  }



#front-list .divider {

  margin-left:216px;

  margin-top:15px;

  margin-bottom:15px;

  }



.author {

  font-size:0.8em;

  font-weight:bold;

  }



.meta {

  margin-top:-5px;

  font-size:0.8em;

  color:#333;

  }



.meta a {

  color:#333;

  }



#headline p, #featured p {

  margin:0;

  }





/* Content Page*/



#content {

  width:590px;
  background:#fff;

  padding:10px;
  font-size:1.05em;

  line-height:1.75em;
  float:left;

  min-height:400px;

  }

.post {
  font-size:1.05em;

  line-height:1.75em;
  }



.post p {

  margin-top:0px;

  }



.post .clearfloat {

  border-bottom:1px dotted #333;

  margin:10px 0px;

  }



.post ul, .post ol {

  margin-bottom:15px;

  }



#content h2.title {

  font-weight:bold;

  font:2.2em Georgia;

  letter-spacing:-0.05em;
  border-bottom:1px solid #eae9e4;
  border-top:3px solid #eae9e4;
  margin-bottom:15px;
  padding:5px 0px;

  }

#content .title {
  font:1.5em Georgia;
  }



.post ul li {  

  list-style:square;

  margin-left:30px;

  }



.post ol li {  

  list-style:decimal;

  margin-left:30px;

  }



.post ol li ul li {  

  list-style:square;

  margin-left:20px;

  }



.post img, .post a img, #front-list img {

  border:0px;

  margin:0 10px 5px 0;

  }



.post .ads {

  margin-top:10px;

  }



#stats {
  margin-top:-10px;

         margin-bottom:10px;

  padding:4px;

  text-transform:uppercase;

  font:0.8em Arial;
  display:block;

  }



#stats span {

  border-right:1px dotted #333;

  padding: 0px 5px 0px 5px;

  }



#stats span a:hover {

  background:none;

  }



#stats span a {

  color:#333;

  }



#stats img, #nav img {

  border:0px;

  margin:0px;

  }


#tools {
  width:590px;
  height:25px;
  font-size:0.95em;
  }

#tools a:hover {
  background:none;
  }



/* Sidebar*/
#sidebar {
  width:320px;
  float:right;
  margin:0px 0px 0px 0px;
  }

#sidebar h3 {
  font:1.1em Arial;
  font-weight:bold;
  background:#333;
  color:#fff;
  margin:10px 0px 5px 0px;
  padding:3px 10px;
  }

#sidebar-top, #sidebar-bottom {
  width:300px;
  float:right;
  padding:0px 10px 10px 10px;
  background:#fff;
  }

#sidebar-bottom, #sidebar-middle {
  margin-top:10px;
  }

#sidebar-middle {
  width:320px;
  float:right;
  }

#sidebar-left {
  width:135px;
  padding:0px 10px 10px 10px;
  float:left;
  background:#fff;
  }

#sidebar-right {
  width:135px;
  padding:0px 10px 10px 10px;
  float:right;
  background:#fff;
  }


#sidebar li {
  list-style:none;
  border-bottom:1px dotted #bbb;
  display:block;
  padding:2px 0px 2px 13px;
  background:url(arthemia-images/sub.png) no-repeat 0 0px;
  }

#sidebar-ads {
  width:300px;
  float:right;
  margin-bottom:10px;
  padding:10px;
  background:#fff;
  }




/* Form Elements */



select {

  border:1px solid #333;

  width:100%

  }

  

.button {

  padding: 1px;

  border:1px solid #333;

  background:#fff;

  font-size:1.0em;

  }

.field {

  padding: 2px;

  border:1px solid #333;

  background:#fff;

  font-size:1.0em;

  }



#search .button {

  padding: 1px;

  border:1px solid #333;

  background:#fff;

  font-size:1.0em;

  }



#commentform input {

  width: 140px;

  margin: 5px 5px 1px 0;

  }



#commentform textarea {

  width: 99%;

  margin-top:5px;

  }







/* Comments*/

.commentlist cite {
  font-style:normal;
  margin-bottom:4px;
  display:block
  }  

.commentlist blockquote {
  background:#ededed;
  }
      
.commentlist li {
  color:#4d4d4d;
  padding: 10px 14px 10px 14px;
  background:#f2f2f2;
  border-bottom: 1px solid #dcdbd7;
  list-style:none;
  margin-bottom:3px;
  }

.commentlist li li {
  background:none;
  border:none;
  list-style:square;
  margin:3px 0 3px 20px;
  padding:3px 0;
  }

.commenttext {
  width:502px;
  float:right
  }
    
.commentlist cite strong {
  font-size:1.1em;
  }
  
li.my_comment {
  background: #FFF;
  border:none
  }

li.my_comment cite strong {
  font-size: 1.3em;
  color:#313228;
  }
  
#commentform small {
  background:#FFF;
  font-weight:bold;
  padding:0;
  }
  
.commentmetadata {
  color:#4d4d4d;
  display: block;
  margin-top:3px;
  text-align:right
  }

.commentmetadata a, .commentmetadata a:visited {
  color:#959382;
  }
  
.commentlist small {
  background:#e9e9e9
  }

.avatar {
  border:1px solid #56562c;
  margin:15px 8px 6px 0;
  float:left;
  padding:1px;
  width:45px;
  height:45px;
  }  

#comment {
  width:590px;
  background:#fff;
  }



/* Footer*/



#front-popular {

  font-size:0.7em;

  color:#fff;

  width: 940px;

  background:#2c2c2c url(arthemia-images/bottombar.png) bottom no-repeat;

  margin: 0 auto;
  padding:10px;

  }



#recentpost, #mostcommented {

  width:280px;

  float:left;

  padding:10px;

  border:1px solid #fff;

  }


#mostcommented {
  margin-left:17px;
  }


#recent_comments {

  width:280px;

  float:right;

  padding:10px;

  border:1px solid #fff;

  }



#recentpost a, #mostcommented a, #recent_comments a {

  color:#fff;

  }



#recentpost ul, #mostcommented ul, #recent_comments ul {

  margin-top:5px;

  }



#recentpost ul li, #mostcommented ul li, #recent_comments ul li {

  list-style:none;

  border-top:1px dotted #fff;

  padding:5px;

  display:block;

  }



#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {

  background:#3c57a7;

  color:#fff;

  }



#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {

  border-top:0px dotted #fff;

  }





#footer {

  margin: 0 auto;

  width: 960px;

  font-size:0.6em;

  padding-top:10px;

  padding-bottom:10px;

  }





/* Float Properties*/



.clearfloat:after {

  content:".";

  display:block;

  height:0;

  clear:both;

  visibility:hidden;

  }



.clearfloat {

  display: inline-block;

  }





/* Hides from IE-mac \*/

* html .clearfloat {

  height:1%;

  }



*+html .clearfloat {

  height:1%;

  }



.clearfloat {

  display:block;

  }

</style>


<link rel="icon" href="arthemia-images/favicon.ico" />
<link rel="shortcut icon" href="arthemia-images/favicon.ico" />
</head>
<body>
<div id="head" class="clearfloat">
  <div class="clearfloat">
    <div id="logo" class="left"> <a href="http://www.free-css.com/"><img src="arthemia-images/logo.png" width="177" height="39" alt="" /></a>
      <div id="tagline">trend, lifestyle, technology, and gadget magazine</div>
    </div>
    <div class="right"> <img src="arthemia-images/ads/468x60.gif" alt="" width="468" height="60" /> </div>
  </div>
  <div id="navbar" class="clearfloat">
    <ul id="page-bar" class="left clearfloat">
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a>
        <ul class="children">
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 1</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 2</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 3</a></li>
        </ul>
      </li>
      <li><a href="http://www.free-css.com/">Page 2</a></li>
      <li><a href="http://www.free-css.com/">Page 3</a>
        <ul class="children">
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 1</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 2</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 3</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 4</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 5</a></li>
        </ul>
      </li>
      <li><a href="http://www.free-css.com/">Page 4</a>
        <ul class="children">
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 1</a></li>
          <li class="cat-item"><a href="http://www.free-css.com/">Sub Page 2</a></li>
        </ul>
      </li>
      <li><a href="http://www.free-css.com/">Page 5</a></li>
      <li><a href="http://www.free-css.com/">Page 6</a></li>
      <li><a href="http://www.free-css.com/">Page 7</a></li>
      <li><a href="http://www.free-css.com/">Page 8</a></li>
    </ul>
    <form method="get" id="searchform" action="http://www.free-css.com/">
      <div id="search">
        <input type="text" value="" name="s" id="s" class="field" />
        <input type="submit" id="searchsubmit" value="Search" class="button" />
      </div>
    </form>
  </div>
</div>
<div id="page" class="clearfloat">
  <div id="top" class="clearfloat">
    <div id="headline"> <img src="arthemia-images/headline.png" width="75" height="21" class="clearfloat" alt="" />
      <div class="title"><a href="http://www.free-css.com/">Free CSS Template &amp; Wordpress Theme</a></div>
      <div class="meta">[27 Dec 2007 | <a href="http://www.free-css.com/">One Comment</a> | 481 views]</div>
      <a href="http://www.free-css.com/"> <img src="arthemia-images/thumbs/relationship.jpg" alt="" class="left" width="300" height="300" /></a>
      <p>Semscelerit id habitur orci aenean quis vestas at pede ac orci. Eufamet in aenean sed eu nam morbi dui velis sus phasellus. Insapien condimentum eget habitur orci nullamcorper lacus purus nam eu dapientum. Orcivel tempus quam nam id nullam proin vestique fauctor fuscing quis..</p>
      <p>Nibhsed dui curabitur mauris tincidunt nam aenean inte ris vel lobortor. Aeneanconsectetus orci auctor ante dui fauctor intesque magna platea dolorem volutpat. Quisquequis ligula elis sed at lor orna nibh velit metuer nisl. Seddis nullamcorper accum alique nullam sce ut tor et condisse senean</p>
      <a href="http://www.free-css.com/">Read the full story &raquo;</a> </div>
    <div id="featured"> <img src="arthemia-images/featured.png" width="72" height="17" alt="" />
      <div class="clearfloat"> <a href="http://www.free-css.com/"> <img src="arthemia-images/thumbs/fashion.jpg" alt="" class="left" width="100" height="65" /></a>
        <div class="info"><a href="http://www.free-css.com/" class="title">Mollisfeugiat nunc.</a>
          <p>Vestibulumsemper augue arcu gravida cursus magna ristique cum auctor libero condimentum.</p>
        </div>
      </div>
      <div class="divider"><img src="arthemia-images/divider.png" width="128" height="5" alt="" /></div>
      <div class="clearfloat"> <a href="http://www.free-css.com/"> <img src="arthemia-images/thumbs/wine.jpg" alt="" class="left" width="100" height="65" /></a>
        <div class="info"><a href="http://www.free-css.com/" class="title">Acsentesque ipsum ut et.</a>
          <p>Urnanulla semper ut neque tincidunt pretium id sus trices nulla orci. Nonummyvel estibulus elit loreet</p>
        </div>
      </div>
      <div class="divider"><img src="arthemia-images/divider.png" width="128" height="5" alt="" /></div>
      <div class="clearfloat"> <a href="http://www.free-css.com/"> <img src="arthemia-images/thumbs/ericsson.jpg" alt="" class="left" width="100" height="65" /></a>
        <div class="info"><a href="http://www.free-css.com/" class="title">Idtincidunt condisse.</a>
          <p> Idid in vel aenean non euisque amet hendrerit lacilis nibh condisse. Nonummyvel estibulus elit loreet</p>
        </div>
      </div>
      <div class="divider"><img src="arthemia-images/divider.png" width="128" height="5" alt="" /></div>
      <div class="clearfloat"> <a href="http://www.free-css.com/"> <img src="arthemia-images/thumbs/food.jpg" alt="" class="left" width="100" height="65" /></a>
        <div class="info"><a href="http://www.free-css.com/" class="title">Morbiid in males</a>
          <p>Vestiequisque ristibulum cumsan id maurientumst felis enim nonummy non ut et.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="middle" class="clearfloat"> <img src="arthemia-images/category.png" class="clearfloat" alt="" />
    <div id="cat-1" class="category"> <span class="cat_title"><a href="http://www.free-css.com/">Health and Hygiene</a></span>
      <p><a href="http://www.free-css.com/">Health and hygiene for your body, from tips and tricks to medical reviews. This is the category description.</a></p>
    </div>
    <div id="cat-2" class="category"> <span class="cat_title"><a href="http://www.free-css.com/">Fashion</a></span>
      <p><a href="http://www.free-css.com/">You love fashion, huh? Great articles about international fashion brand here. This is the category description.</a></p>
    </div>
    <div id="cat-3" class="category"> <span class="cat_title"><a href="http://www.free-css.com/">Food and Drinks</a></span>
      <p><a href="http://www.free-css.com/">Anything related to foods and drinks. Restaurant and bistros, recipes, wines, and everything. This is a category description.</a></p>
    </div>
    <div id="cat-4" class="category"> <span class="cat_title"><a href="http://www.free-css.com/">Movie and Music</a></span>
      <p><a href="http://www.free-css.com/">Cool movie and music review at your desk! Never miss any article from Arthemia Demo! This is the category description.</a></p>
    </div>
    <div id="cat-5" class="category"> <span class="cat_title"><a href="http://www.free-css.com/">Travel</a></span>
      <p><a href="http://www.free-css.com/">Travel spots? Flight tips? All magnificent places from all over the world here. This is the category description.</a></p>
    </div>
  </div>
  <div id="bottom" class="clearfloat">
    <div id="front-list">
      <div class="clearfloat">
        <h3 class="cat_title"><a href="http://www.free-css.com/">Health and Hygiene</a> &raquo;</h3>
        <span class="title"><a href="http://www.free-css.com/">Elittemper mollisis ut maecenas</a></span> <br/>
        <span class="meta">[2 May 2008 | <a href="http://www.free-css.com/">No Comment</a> | 153 views]</span>
        <p><img class="alignleft size-full wp-image-41" style="float: left;" src="arthemia-images/thumbs/hygene.jpg" alt="" width="180" height="197" />Gravidaestibulus purus ac justo condimentesque vel vitae condimentumsan vivamus non arcu. Habitudinat ut dapibulum semper laculis dui ac vel consectetuer ames elit. Fringdonec consequam ac faucibus felit nibh cras condimentum metuer quisque quismodo. Acsemper alique ut convallis quat facilis lor hendimentesque sus trisus eu. Gravidavitae amet dolor estas phasellus dolor eleris.</p>
        <p>Dignisleu ut velit sce nam nequat ac temper por urnare nunc. Etsociis ac sed eget eget enim et eu nunc ac vest. Temperat nonummy maecenatoque fermentum tellus magnissim velit torta curabitae nequat dolorem. Tellentvenenas pellus sed consectetus conseque gravida est cras ut elit nibh. Elitpede fring pulvinare adipiscipiscipis tincidunt odio dui elit eleifendis sed sem.</p>
        <p> <a href="http://www.free-css.com/" class="more-link">Read the full story &raquo;</a></p>
      </div>
      <div class="divider"><img src="arthemia-images/divider.png" alt="" /></div>
      <div class="clearfloat">
        <h3 class="cat_title"><a href="http://www.free-css.com/">Travel</a> &raquo;</h3>
        <span class="title"><a href="http://www.free-css.com/">Morbicurabitur condisse.</a></span> <br/>
        <span class="meta">[3 Apr 2008 | <a href="http://www.free-css.com/">No Comment</a> | 116 views]</span>
        <p><img class="alignleft size-full wp-image-41" style="float: left;" src="arthemia-images/thumbs/nightlife.jpg" alt="" width="180" height="197" />Elittemper mollisis ut maecenas vestibulum phasellus condissim vestas conseque aenec feugiat. Eueget ut vestiquet ac eu mauris dolor vel estibulum pulvinaretium in. Urnaaliquam habitae sit alique nibh nulla donec mus dui augue quis.</p>
        <p>Felitgravida lor elit congue rutrum nibh maurisus netus wisi felis sus. Sedlaculis pede dapienterdum quisque netus monteget mi vitae pellent ligula sempus.</p>
        <p><a href="http://www.free-css.com/" class="more-link">Read the full story &raquo;</a></p>
      </div>
      <div class="divider"><img src="arthemia-images/divider.png" alt="" /></div>
      <div class="navigation">
        <div class="left"><a href="http://www.free-css.com/">&laquo; Older Entries</a></div>
        <div class="right"></div>
      </div>
    </div>
    <div id="sidebar">
      <div id="sidebar-ads"> <img src="arthemia-images/ads/300x250.gif" width="300" height="250" alt="" /></div>
      <div id="sidebar-top">
        <h3>About Arthemia</h3>
        <div class="textwidget"> Arthemia is a free CSS template that complies to W3C standards. Arthemia is a magazine-style theme. Arthemia is also a Wordpress Theme, download the ported <a href="http://www.michaeljubel.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/">Wordpress Themes</a>.</div>
      </div>
      <div id="sidebar-middle" class="clearfloat">
        <div id="sidebar-left">
          <h3>Pages</h3>
          <ul>
            <li class="page_item page-item-2"><a href="http://www.free-css.com/">About</a></li>
            <li class="page_item page-item-29"><a href="http://www.free-css.com/">Advertise with Us</a></li>
            <li class="page_item page-item-30"><a href="http://www.free-css.com/">Jobs at Arthemia</a></li>
            <li class="page_item page-item-39"><a href="http://www.free-css.com/">This is a page example</a></li>
            <li class="page_item page-item-38"><a href="http://www.free-css.com/">Welcome to Arthemia</a></li>
          </ul>
          <h3>Archives</h3>
          <ul>
            <li><a href="http://www.free-css.com/">May 2008</a>&nbsp;(1)</li>
            <li><a href="http://www.free-css.com/">April 2008</a>&nbsp;(5)</li>
            <li><a href="http://www.free-css.com/">January 2008</a>&nbsp;(2)</li>
            <li><a href="http://www.free-css.com/">December 2007</a>&nbsp;(5)</li>
            <li><a href="http://www.free-css.com/">November 2007</a>&nbsp;(2)</li>
            <li><a href="http://www.free-css.com/">September 2007</a>&nbsp;(1)</li>
          </ul>
        </div>
        <div id="sidebar-right">
          <h3>Admin Panel</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Log in</a></li>
            <li><a href="http://www.free-css.com/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="http://www.free-css.com/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="http://www.free-css.com/">WordPress.org</a></li>
          </ul>
          <h3>Blogroll</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Colorlabs Project</a></li>
            <li><a href="http://www.free-css.com/">Michael Jubel</a></li>
            <li><a href="http://www.free-css.com/">Hanna Siahaan</a></li>
            <li><a href="http://www.free-css.com/">Majari Magazine</a></li>
            <li><a href="http://www.free-css.com/">The Bloggerzine</a></li>
            <li><a href="http://www.free-css.com/">Majari Kanayakan</a></li>
          </ul>
        </div>
      </div>
      <div id="sidebar-bottom">
        <h3>Popular Tags</h3>
        <a href="http://www.free-css.com/" class="tag-link-18" style="font-size:10.8pt;">apparels</a> <a href="http://www.free-css.com/" class="tag-link-17" style="font-size:13.6pt;">arthemia</a> <a href="http://www.free-css.com/" class="tag-link-23" style="font-size:8pt;">beach</a> <a href="http://www.free-css.com/" class="tag-link-19" style="font-size:22pt;">dining</a> <a href="http://www.free-css.com/" class="tag-link-27" style="font-size:10.8pt;">food</a> <a href="http://www.free-css.com/" class="tag-link-22" style="font-size:10.8pt;">health</a> <a href="http://www.free-css.com/" class="tag-link-21" style="font-size:10.8pt;">romance</a> <a href="http://www.free-css.com/" class="tag-link-20" style="font-size:8pt;">sony&nbsp;ericsson</a> <a href="http://www.free-css.com/" class="tag-link-26" style="font-size:8pt;">stuffs</a> <a href="http://www.free-css.com/" class="tag-link-25" style="font-size:10.8pt;">tourism</a> <a href="http://www.free-css.com/" class="tag-link-11" style="font-size:10.8pt;">Travel</a> <a href="http://www.free-css.com/" class="tag-link-24" style="font-size:8pt;">vacation</a> <a href="http://www.free-css.com/" class="tag-link-16" style="font-size:16.4pt;">wordpress</a> </div>
    </div>
  </div>
</div>
<div id="front-popular" class="clearfloat">
  <div id="recentpost" class="clearfloat">
    <h3>Recent Posts</h3>
    <ul>
      <li><a href="http://www.free-css.com/">Whirlpool Dishwasher </a></li>
      <li><a href="http://www.free-css.com/">Wordpress as CMS? </a></li>
      <li><a href="http://www.free-css.com/">Seems to be Another WordPress Weblog </a></li>
      <li><a href="http://www.free-css.com/">I am Happy. HELP! </a></li>
      <li><a href="http://www.free-css.com/">There is Something About Arthemia </a></li>
    </ul>
  </div>
  <div id="mostcommented" class="clearfloat">
    <h3>Most Commented</h3>
    <ul>
      <li><a href="http://www.free-css.com/">Sony Ericsson W910i Rocks</a></li>
      <li><a href="http://www.free-css.com/">Famous Italian Wines</a></li>
      <li><a href="http://www.free-css.com/">Sock Rules</a></li>
      <li><a href="http://www.free-css.com/">Welcome to Arthemia Demo!</a></li>
      <li><a href="http://www.free-css.com/">Get the Best Beach Vacation</a></li>
    </ul>
  </div>
  <div id="recent_comments" class="clearfloat">
    <h3>Most Viewed</h3>
    <ul>
      <li><a href="http://www.free-css.com/">If It&#8217;s not Broken, Don&#8217;t Try to Fix It</a> - 481 views</li>
      <li><a href="http://www.free-css.com/">Sock Rules</a> - 239 views</li>
      <li><a href="http://www.free-css.com/">Famous Italian Wines</a> - 202 views</li>
      <li><a href="http://www.free-css.com/">Sony Ericsson W910i Rocks</a> - 177 views</li>
      <li><a href="http://www.free-css.com/">Whirlpool Dishwasher</a> - 153 views</li>
    </ul>
  </div>
</div>
<div id="footer"><a href="http://www.free-css.com/">Log in</a> | <a href="http://www.free-css.com/">Entries (RSS)</a> | <a href="http://www.free-css.com/">Comments (RSS)</a> | Arthemia by <a href="http://www.michaeljubel.com">Michael Jubel</a> </div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.arrangement
2.artica
3.aspherical
4.assiduous
5.asterisk
6.astounded
7.astroturfd
8.atomohost
9.atrandafir582
10.AttainDigital
11.audi-template
12.aurelius
13.authenticity
14.autoportal
15.axian
16.azulmedia2-1
17.azure
18.bagatelle
19.balanced
20.bananaleaf
21.barricade
22.begrimed
23.belowthehorizon
24.bennevis
25.bermuda01
26.besmart
27.bestwebdesign
28.beta
29.beyond
30.bigdeal
31.BigSpaceLove
32.bioessence
33.Biru_Manteb
34.bittersweet
35.Black
36.chamberlandsrestaurant
37.chara
38.characterized
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year