rainbow : Sun « Templates « HTML / CSS

rainbow
  

<!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" >
<head>
<title>Rainbow</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*  
Author: Sarkis Arutjunjan
Author URL: http://www.sarkis-design.com

  This theme was designed and built by Sarkis Arutjunjan,
  whose website you will find at http://www.sarkis-design.com

*/



/* Begin Typography and Colors */
body {
  font-size: 9px;
  font-family: Verdana, Arial, Sans-Serif;
  background: #3f433b;
  color: #777;
  text-align: center;
  }

#page {
  background-color: white;
  border: 1px solid #959596;
  text-align: left;
  background: url("http://themes.sarkis-design.com/wp-content/themes/web126/rainbow-images/kubrickbg.jpg") repeat-y top; border: none;
  }

#header {
  background: #3f433b url('rainbow-images/kubrickheader.jpg') no-repeat bottom center;
  }

#headerimg   { 
  margin: 7px 9px 0; 
  height: 222px; 
  width: 760px; 
  } 

#content {
  font-size: 1.2em;
  }

.widecolumn .entry p {
  font-size: 1.05em;
  }

.narrowcolumn .entry, .widecolumn .entry {
  line-height: 1.4em;
  }

.widecolumn {
  line-height: 1.6em;
  }

.narrowcolumn .postmetadata {
  text-align: center;
  }

.alt {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  }

#footer {
  background: #3f433b url('rainbow-images/kubrickfooter.jpg') no-repeat top; 
  border: none;
  }

small {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 0.9em;
  line-height: 1.5em;
  }

h1, h2, h3 {
  font-family: Arial, Sans-Serif ;
  font-weight: bold;
  }

h1 {
  font-size: 26px;
  text-align: center;
  }

#headerimg .description {
  font-size: 1.2em;
  text-align: left;
  padding: 0 0 0 30px;
  }

h2 {
  font-size: 1.6em;
  }

h2.pagetitle {
  font-size: 1.6em;
  }

#sidebar h2 {
  font-family: Verdana, Sans-Serif;
  font-size: 1.2em;
  }

h3 {
  font-size: 1.3em;
  }

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
  text-decoration: none;
  color: #FFFFFF;
  }

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
  color: #3f433b;
  }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
  text-decoration: none;
  }

.entry p a:visited {
  color: #FFCC66;
  }

.commentlist li, #commentform input, #commentform textarea {
  font: 0.9em Verdana, Arial, Sans-Serif;
  }

.commentlist li {
  font-weight: bold;
  }

.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  }

.commentlist p {
  font-weight: normal;
  line-height: 1.5em;
  text-transform: none;
  }

#commentform p {
  font-family: Verdana, Arial, Sans-Serif;
  }

.commentmetadata {
  font-weight: normal;
  }

#sidebar {
  font: 1em Verdana, Arial, Sans-Serif;
  }
ul
{
  list-style:none;
  margin: 0;
  padding: 5px 0 5px 10px;
}
li
{
  padding: 0;
  font-size: 11px;
  color:#CCC;
}
ol
{
  padding: 0;
  font-size: 11px;
  color:#CCC;
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
  color: #b7b7b7;
  }

code {
  font: 1.1em Courier, Fixed;
  }

acronym, abbr, span.caps
{
  font-size: 0.9em;
  letter-spacing: .07em;
  }

a, h2 a:hover, h3 a:hover {
  color: #8f651f;
  text-decoration: none;
  }

a:hover {
  text-decoration: underline;
  }

#wp-calendar #prev a, #wp-calendar #next a {
  font-size: 9pt;
  }

#wp-calendar a {
  text-decoration: none;
  }

#wp-calendar caption {
  font: bold 1.3em Verdana, Arial, Sans-Serif;
  text-align: center;
  }

#wp-calendar th {
  font-style: normal;
  text-transform: capitalize;
  }
/* End Typography and Colors */



/* Begin Structure */
body {
  margin: 20px 0 15px 0;
  padding: 0; 
  }

#page {
  margin: 0 auto;
  padding: 0;
  width: 760px;
  }

#header {
  background-color: #3f433b;
  margin: 0; 
  padding: 0; 
  height: 222px; 
  width: 760px;
  }

#headerimg {
  margin: 0;
  height: 222px;
  width: 100%;
  }

.narrowcolumn {
  float: left;
  padding: 0 0 20px 30px;
  margin: 0 30px 0 0;
  width: 490px;
  }

.widecolumn {
  padding: 0 0 20px 0;
  margin: 5px 0 0 30px;
  width: 700px;
  }

.post {
  margin: 0;
  text-align: justify;
  }

.post hr {
  display: block;
  }

.widecolumn .post {
  margin: 0;
  }

.narrowcolumn .postmetadata {
  padding-top: 5px;
  }

.widecolumn .postmetadata {
  margin: 30px 0;
  }

.widecolumn .smallattachment {
  text-align: center;
  float: left;
  width: 128px;
  margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
  text-align: center;
  margin: 5px 0px;
}

.postmetadata {
  clear: left;
}

#footer {
  padding: 0;
  margin: 0 auto;
  width: 760px;
  clear: both;
  }

#footer p {
  margin: 0;
  padding: 3px 0 12px 0;
  text-align: center;
  }
/* End Structure */



/*  Begin Headers */
h1 {
  margin: 0;
  padding: 25px 0 0 30px;
  text-align: left;
  }

h2 {
  margin: 30px 0 0 0;
  }

h2.pagetitle {
  margin-top: 30px;
  text-align: center;
}

#sidebar h2 {
  margin: 5px 0 0;
  padding: 0;
  }

h3 {
  padding: 0;
  margin: 30px 0 0;
  }

h3.comments {
  padding: 0;
  margin: 40px auto 20px ;
  }
/* End Headers */



/* Begin Images */
p img {
  padding: 0;
  max-width: 100%;
  }

/*  Using 'class="alignright"' on an image will (who would've
  thought?!) align the image to the right. And using 'class="centered',
  will of course center the image. This is much better than using
  align="center", being much more futureproof (and valid) */

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline;
  }

img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline;
  }

.alignright {
  float: right;
  }

.alignleft {
  float: left
  }
/* End Images */

/* Begin Form Elements */
#searchform {
  margin: 10px auto;
  padding: 5px 3px; 
  text-align: center;
  }

#searchform #s {
  width: 72px;
  padding: 2px;
  }
  
#sidebar
{
  /* border-top: 1px solid #3f433b; */
  /* border-bottom: 1px solid #3f433b; */
  /* background: #3f433b; */
  margin: 15px 0 10px 0;
}

#searchsubmit {
  height: 21px;
  color: #FFF;
  background: #3f433b;
  font-size: 11px;
  padding: 1px 5px 1px 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  }

.entry form { /* This is mainly for password protected posts, makes them look better. */
  text-align:center;
  }

select {
  width: 130px;
  }

#commentform input {
  width: 170px;
  padding: 2px;
  margin: 5px 5px 1px 0;
  }

#commentform textarea {
  width: 100%;
  padding: 2px;
  }

#commentform #submit {
  margin: 0;
  float: right;
  }
/* End Form Elements */



/* Begin Comments*/
.alt {
  margin: 0;
  padding: 10px;
  background-color: #3f433b;
  }

.commentlist {
  padding: 0;
  text-align: justify;
  }

.commentlist li {
  margin: 15px 0 3px;
  padding: 5px 10px 3px;
  list-style: none;
  }

.commentlist p {
  margin: 10px 5px 10px 0;
  }

#commentform p {
  margin: 5px 0;
  }

.nocomments {
  text-align: center;
  margin: 0;
  padding: 0;
  }

.commentmetadata {
  margin: 0;
  display: block;
  }
/* End Comments */



/* Begin Sidebar */
#sidebar
{
  padding: 15px 0 10px 0;
  margin-left: 550px;
  width: 192px;
  }

#sidebar form {
  margin: 0;
  }
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
  empty-cells: show;
  margin: 10px auto 0;
  width: 155px;
  }

#wp-calendar #next a {
  padding-right: 10px;
  text-align: right;
  }

#wp-calendar #prev a {
  padding-left: 10px;
  text-align: left;
  }

#wp-calendar a {
  display: block;
  }

#wp-calendar caption {
  text-align: center;
  width: 100%;
  }

#wp-calendar td {
  padding: 3px 0;
  text-align: center;
  }

#wp-calendar td.pad:hover { /* Doesn't work in IE */
  background-color: #fff; }
/* End Calendar */

/* Begin Various Tags and Classes */
acronym, abbr, span.caps {
  cursor: help;
  }

acronym, abbr {
  border-bottom: 1px dashed #999;
  }

blockquote {
  margin: 15px 30px 0 10px;
  padding-left: 20px;
  border-left: 5px solid #ddd;
  }

blockquote cite {
  margin: 5px 0 0;
  display: block;
  }

.center {
  text-align: center;
  }

hr {
  display: none;
  }

a img {
  border: none;
  }

.navigation {
  display: block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 60px;
  }
/* End Various Tags and Classes*/

/* Begin Website Design Copyright */
.design_copyright
{
  display:none;
  text-align:center;
}
.outsourcing
{
  font-style: normal;
}
.web_design
{
  font-style: normal;
}
.website_designer
{
  font-style: normal;
}
/* End Design Copyright */

</style>


</head>
<body>
<div id="page">
  <div id="header">
    <div id="headerimg">
      <h1><a href="http://www.free-css.com/">Our Website</a></h1>
      <div class="description">Cras porta tortor ut quam.</div>
    </div>
  </div>
  <hr />
  <div id="content" class="narrowcolumn">
    <div class="post" id="post-1">
      <h2><a href="http://www.free-css.com/">Hello world!</a></h2>
      <small>May 7th, 20</small>
      <div class="entry">
        <p>Welcome to Website. This is your first post. Edit or delete it, then start blogging!</p>
        <p>Curabitur odio pede, accumsan vel, mollis quis, pulvinar vel, urna. Morbi ligula arcu, tempor non, blandit id, convallis vitae, neque. Vestibulum id mi. Nam vel dui. Cras porta tortor ut quam. Duis ante libero, dapibus ut, hendrerit id, facilisis et, neque. Curabitur odio pede, accumsan vel, mollis quis, pulvinar vel, urna. Morbi ligula arcu, tempor non, blandit id, convallis vitae, neque. Vestibulum id mi. Nam vel dui. Cras porta tortor ut quam. Duis ante libero, dapibus ut, hendrerit id, facilisis et, neque.</p>
        <p>Curabitur odio pede, accumsan vel, mollis quis, pulvinar vel, urna. Morbi ligula arcu, tempor non, blandit id, convallis vitae, neque. Vestibulum id mi. Nam vel dui. Cras porta tortor ut quam. Duis ante libero, dapibus ut, hendrerit id, facilisis et, neque. Curabitur odio pede, accumsan vel, mollis quis, pulvinar vel, urna. Morbi ligula arcu, tempor non, blandit id, convallis vitae, neque. Vestibulum id mi. Nam vel dui. Cras porta tortor ut quam. Duis ante libero, dapibus ut, hendrerit id, facilisis et, neque.</p>
      </div>
      <p class="postmetadata">Posted in <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">1 Comment &#187;</a></p>
    </div>
    <div class="navigation">
      <div class="alignleft"></div>
      <div class="alignright"></div>
    </div>
  </div>
  <div id="sidebar">
    <ul>
      <li>
        <form method="get" id="searchform" action="http://www.free-css.com/">
          <div>
            <input type="text" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
          </div>
        </form>
      </li>
      <li class="pagenav">
        <h2>Pages</h2>
        <ul>
          <li class="page_item"><a href="http://www.free-css.com/">About</a></li>
        </ul>
      </li>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">May 2007</a></li>
        </ul>
      </li>
      <li class="categories">
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Uncategorized</a> (1)</li>
        </ul>
      </li>
      <li id="linkcat-2" class="linkcat">
        <h2>Blogroll</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Links</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <hr />
  <div id="footer">
    <p><br />
       Your Website Name.</p>
  </div>
  <div class="design_copyright"> <a href="http://www.sarkis-webdesign.com/" class="web_design">Web design by Sarkis</a></div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_aliensun
2.	metamorph_sunandflower
3.	metamorph_sunnybeach
4.	metamorph_sunny_lt
5.	metamorph_sunparlor
6.	metamorph_sunrise
7.	metamorph_sunrising_lt
8.	metamorph_sunroad
9.	metamorph_sunset
10.	metamorph_sunshine
11.	metamorph_sunshore
12.	metamorph_beam
13.	beachsunset
14.	ftdsunset
15.	eclipse
16.	Oxford_Sunset
17.	Rising_Sun
18.	sunnysky
19.	sunrise2
20.	sunset-heaven
21.	sunset
22.	sunset2
23.	sunshine