mork-horisont : Design 4 « Templates « HTML / CSS

mork-horisont
   

<!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>Mork Horisont - About &amp; Contact</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
Theme Name: MorkHorisont
Theme URI: http://www.toptut.com/
Description: 2-column Mork Horisont (dark horizon) WordPress theme. Download this theme for only $10 at www.toptut.com. Based on small potato.
Version: 1.00
Author: Lorelei
Author: http://www.loreleiwebdesign.com/
*/

#container {
float:left;
width:920px;
background:#293641;
display:inline;
margin:0 20px;
}

#content {
float:left;
width:620px;
display:inline;
margin:0 20px;
}

.post {
width:620px;
overflow:hidden;
font-family:"Lucida Sans", Tahoma;
font-size:12px;
}

.post h2 {
font:25px georgia, serif;
background:url(mork-horisont-images/bg-post-title.gif) no-repeat 5px 18px;
padding:20px 20px 11px;
}

.entry-meta {
font-size:12px;
border-top:1px solid #181818;
background:#0f0f0f;
color:#666;
padding:17px 20px;
}

.entry-meta a {
color:#142634;
}


.entry-content {
border:1px solid #364351;
line-height:22px;
background:#19232e url(mork-horisont-images/bg-entry.gif) repeat-x;
padding:3px 20px;
}

.entry-content h2 {
font-size:24px;
font-weight:700;
line-height:28px;
font-family:arial, helvetica, sans-serif;
background-image:none;
padding:0;
}

.entry-content h3 {
font-size:18px;
font-weight:700;
line-height:24px;
}

.entry-content h4 {
font-size:14px;
font-weight:700;
line-height:20px;
}

.entry-content h5 {
font-size:11px;
line-height:16px;
}

.entry-content h6 {
font-size:10px;
line-height:14px;
}

.ads-468x60 img {
margin:0 0 0 20px;
}

.navigation {
float:left;
width:620px;
line-height:24px;
margin:13px 0 0;
}

.navigation span.nav-previous {
background:url(mork-horisont-images/bg-older-posts.gif) no-repeat 0 5px;
margin:0 0 0 20px;
padding:0 0 0 24px;
}

.navigation span.nav-next {
background:url(mork-horisont-images/bg-newer-posts.gif) no-repeat right 5px;
margin:0 20px;
padding:0 24px;
}

#header-img {
float:left;
width:920px;
background:#222c36 url(mork-horisont-images/bg-1.gif) no-repeat;
display:inline;
margin:0;
}

#header-img .gallery {
float:left;
width:880px;
border-bottom:1px solid #181818;
display:inline;
margin:0 20px;
padding:0 0 20px;
}

.headimg {
float:left;
width:840px;
height:205px;
display:inline;
position:relative;
margin:10px 0 0 20px;
}

.band .ads {
position:absolute;
top:156px;
left:20px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
background:#000;
padding:7px 10px;
}

.band .ads a {
color:#ccc;
}

#footer {
float:left;
width:880px;
color:#bccd10;
border-top:1px solid #181818;
font-size:11px;
font-weight:700;
line-height:24px;
display:inline;
margin:12px 20px 0;
}

#footer p {
padding:13px 20px;
}

/* links at the post */
.links {
font-family:Verdana, sans-serif, Arial;
display:block;
width:100%;
height:45px;
line-height:160%;
background:#b4bcc7;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-bottom:#7e8da2 1px solid;
border-right:#7e8da2 1px solid;
color:#000;
font-size:11px;
padding:5px 10px;
}

.links a {
text-decoration:none;
color:#666;
}

.links a:hover {
color:#666;
text-decoration:none;
}

.links .comment {
display:block;
float:left;
background:url(mork-horisont-images/comment.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .feed {
display:block;
float:left;
background:url(mork-horisont-images/feed.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .cat {
display:block;
float:left;
background:url(mork-horisont-images/categories.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .clock {
display:block;
float:left;
background:url(mork-horisont-images/clock.png) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

/*** basics and body styles ***/
blockquote,body,caption,dd,dl,form,h1,h2,h3,h4,h5,h6,input,p,pre,textarea,table,td,th {
margin:0;
padding:0;
}

body,form,h1,h2,h3,h4,h5,h6,input,textarea,table {
font:14px "Lucida Sans", Tahoma;
color:#aaa;
}

body {
text-align:center;
background:#0f1e27 url(mork-horisont-images/bg-body.gif) repeat-x;
}

input,textarea {
color:#000;
}

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

a:hover {
text-decoration:underline;
}

a img {
border:0;
}

blockquote {
background:#111;
margin:10px 0 0;
}

blockquote p {
padding:20px;
}

blockquote blockquote {
background:#000;
margin:0 20px;
}

img.alignleft {
margin:5px 10px 2px 0;
}

img.alignright {
margin:5px 0 2px 10px;
}

img.alignleft,img.alignright {
border:1px solid #222;
display:inline;
padding:4px;
}

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

p img {
max-width:100%;
}

small {
font-size:12px;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.clear {
clear:both;
margin:0;
padding:0;
}

#wrapper {
width:960px;
text-align:left;
margin:0 auto;
}

/*** Header, menu, search styles ***/
#header {
float:left;
width:960px;
height:183px;
background:#fff url(mork-horisont-images/bg-header.jpg) no-repeat;
margin:10px 0 0;
}

h1#headimg {
float:left;
width:250px;
height:67px;
display:inline;
overflow:hidden;
background:url(mork-horisont-images/logo.gif) no-repeat;
margin:23px 0 0 57px;
}

h1#headimg a {
display:block;
width:250px;
height:67px;
overflow:hidden;
text-indent:-10000px;
}

.feed {
float:left;
width:617px;
font-weight:700;
text-transform:uppercase;
display:inline;
margin:36px 0 0 15px;
}

.feed a {
background:url(mork-horisont-images/feed.gif) no-repeat 5px 2px;
padding:0 0 0 22px;
}

.kit {
float:left;
width:617px;
font-weight:700;
text-transform:uppercase;
display:inline;
margin:36px 0 0 1px;
}

.kit a {
text-decoration:none;
padding:0 0 0 22px;
}

#search {
float:left;
width:617px;
height:24px;
background:url(mork-horisont-images/bg-search.gif) no-repeat;
display:inline;
margin:8px 0 0 15px;
}

#search form#searchform {
margin:5px 0 0 23px;
}

#search form#searchform input {
border:0;
font-size:11px;
background:transparent;
color:#fff;
}

#menu {
float:left;
width:880px;
height:58px;
background:url(mork-horisont-images/bg-menu.gif) no-repeat;
display:inline;
margin:15px 0 0 40px;
}

#menu ul {
list-style-type:none;
margin:0;
padding:0 10px;
}

#menu ul li {
float:left;
font:bold 15px "Lucida Sans", Tahoma;
display:inline;
margin:20px 10px 0;
}

/*** sidebar styles ***/
.sidebar {
float:left;
width:240px;

}

.sidebar ul {
list-style-type:none;
margin:0;
padding:0;
}

.sidebar ul li {
margin:20px 0 0;
}

.sidebar ul li h3 {
font:bold 18px georgia, serif;
text-transform:uppercase;
background:url(mork-horisont-images/bg-sidebar-title.gif) no-repeat 9px -1px;
color:#ccc;
padding:6px 20px 16px;
}

.sidebar ul ul {
line-height:10px;
background:#222c36;
border:1px solid #1b2631;
padding:0 20px 16px;
}

.sidebar ul ul li {
background:url(mork-horisont-images/bg-sidebar-item.gif) no-repeat 0 18px;
margin:0;
padding:19px 10px 10px 18px;
font-size:12px;
}
.sidebar ul ul li:hover{
background:url(mork-horisont-images/bg-sidebar-item.gif) no-repeat 0 18px;
margin:0;
padding:19px 10px 10px 22px;
font-size:12px;


}

.sidebar ul ul ul {
padding:0;
}

.sidebar ul ul ul li {
border:0;
background-image:none;
padding:0 0 0 10px;
}

/*** comments ***/
#comments,#respond {
margin:17px 0 0;
}

#comments h3 {
border-bottom:1px solid #181818;
font:18px georgia, "trebuchet ms", serif;
text-transform:uppercase;
color:#d0dc14;
padding:13px 10px 17px;
}

#comments ol.commentlist {
list-style-type:none;
margin:0;
padding:0;
}

#comments ol.commentlist li {
border-bottom:1px solid #181818;
line-height:22px;
padding:4px 10px 3px;
}

#comments ol.commentlist li.highlighted {
background:#111;
}

#comments .required {
color:#a00;
}

#comments input {
border:1px solid #181818;
background:#111;
color:#fff;
padding:3px;
}

#comments textarea {
border:1px solid #181818;
width:75%;
background:#111;
color:#fff;
padding:3px;
}

#respond p {
padding:20px 0 0;
}

#comments p.nocomments,#respond form {
padding:0 10px;
}

#comments p#login-req {
padding:20px 10px 10px;
}

p.comment_license {
line-height:22px;
}

/*** paragraphs ***/
p.alert,p.download,p.info,p.note {
margin:10px 0 0;
padding:10px 10px 10px 36px;
}

p.alert {
border-top:2px solid #440b02;
border-bottom:2px solid #440b02;
background:#260601 url(mork-horisont-images/alert.png) no-repeat 12px 16px;
padding:10px 10px 10px 36px;
}

p.download {
border-top:2px solid #234a01;
border-bottom:2px solid #234a01;
background:#142b00 url(mork-horisont-images/download.png) no-repeat 10px 16px;
}

p.info {
border-top:2px solid #01254b;
border-bottom:2px solid #01254b;
background:#01162d url(mork-horisont-images/info.png) no-repeat 12px 16px;
}

p.note {
border-top:2px solid #7a4706;
border-bottom:2px solid #7a4706;
background:#5b3403 url(mork-horisont-images/note.png) no-repeat 14px 16px;
}

/*** widgets ***/
.sidebar ul li#search {
float:none;
width:auto;
background-image:none;
margin:12px 0 0;
padding:0;
}

.sidebar ul li#search form#searchform input {
border:1px solid #181818;
background:#181818;
margin:8px 0 0;
padding:3px;
}

.sidebar ul li.widget_rss h3 img {
width:9px;
height:9px;
}

.sidebar ul li.widget_tag_cloud h3 {
margin:0 0 10px;
}

.sidebar ul li.widget_tag_cloud a {
padding:0 0 0 10px;
}

#wp-calendar {
width:100%;
border-bottom:1px solid #181818;
padding:0 0 20px;
}

#wp-calendar caption {
padding:20px 20px 10px;
}

#wp-calendar th,#wp-calendar td {
text-align:center;
background:#181818;
padding:5px;
}

#wp-calendar td,table#wp-calendar th {
padding:3px 0;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,p {
padding:10px 0;
}

.sidebar ul li#search form#searchform input#s,#wp-calendar td {
background:transparent;
}

</style>


</head>
<body class="music">
<div id="wrapper">
  <div id="header">
    <h1 id="headimg"><a href="http://www.free-css.com/">Mork Horisont</a></h1>
    <div class="kit"><a href="http://www.free-css.com/">Free CSS Template</a></div>
    <div id="search">
      <form method="get" id="searchform" action="http://www.free-css.com/">
        <div class="keyword">
          <input type="text" value="Search..." name="s" id="s" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" size="18" />
        </div>
      </form>
    </div>
    <div id="menu">
      <ul id="nav">
        <li class="current_page_item"><a href="http://www.free-css.com/">About</a></li>
      </ul>
    </div>
  </div>
  <div id="container">
    <div id="header-img">
      <div class="gallery">
        <div class="headimg"> <img src="mork-horisont-images/head-img.jpg" alt="" /> </div>
        <div class="ads"><a href="http://www.free-css.com/">Adsense go here</a></div>
      </div>
    </div>
    <div id="content">
      <div id="post-2" class="post">
        <h2 class="entry-title">About</h2>
        <div class="entry-content">
          <p>Pedepretium wisi leo congue sed pellus sed volutpat sapientum consectetus quis. Nuncvivamus odio sit pretium dignisl a dui quis sed amet eu. Consectetuersemper donec arcu liberos nulla risquet convallis gravida urna tellus justo. Nisut in at nulla ullam et cras ligula quisquet parturpis leo. Intesquetvivamus pretra estiquam leo pharetium lacing estibus sempus met eget met.</p>
          <p>Urnanulla et sapient tellentesque fauctor a antesque torta nam ullam quis. Ligulacurabitur vitae urnare phasellus dui pretium dui feugiat quis nibh tur. Idvestas maecenatibus faucibulum iacus id nullamcorper semper id eros tellus vivamus. Morbiorci senenas id velit malestibulum quis lor curabitur quis quisque egestibus. Vestet feugiat eget quis orci purus phasellentesque nibh laoreet adipiscinia vitae.</p>
        </div>
      </div>
      <div id="comments">
        <div id="respond">
          <h3>Leave a Reply</h3>
          <form action="http://www.free-css.com/" method="post" id="commentform">
            <p><small>
              <label for="author">Name <span class="required">(required)</span></label>
              </small><br />
              <input type="text" name="author" id="author" value="" size="25" tabindex="1" />
            </p>
            <p><small>
              <label for="email">Mail (will not be published) <span class="required">(required)</span></label>
              </small><br />
              <input type="text" name="email" id="email" value="" size="25" tabindex="2" />
            </p>
            <p><small>
              <label for="url">Website</label>
              </small><br />
              <input type="text" name="url" id="url" value="" size="25" tabindex="3" />
            </p>
            <p>
              <textarea name="comment" id="comment" cols="50" rows="15" tabindex="4"></textarea>
            </p>
            <p>
              <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
              <input type="hidden" name="comment_post_ID" value="2" />
            </p>
          </form>
        </div>
      </div>
      <div class="navigation"> </div>
    </div>
    <div class="sidebar">
      <ul>
        <li id="categories">
          <h3>Categories</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Content</a> </li>
            <li><a href="http://www.free-css.com/">Uncategorized</a> </li>
            <li><a href="http://www.free-css.com/">Web Design</a> </li>
            <li><a href="http://www.free-css.com/">wordpress</a> </li>
          </ul>
        </li>
        <li id="archives">
          <h3>Archives</h3>
          <ul>
            <li><a href="http://www.free-css.com/">June 2008</a></li>
          </ul>
        </li>
        <li id="linkcat-2" class="linkcat">
          <h3>Blogroll</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Development Blog</a></li>
            <li><a href="http://www.free-css.com/">Documentation</a></li>
            <li><a href="http://www.free-css.com/">Plugins</a></li>
            <li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
            <li><a href="http://www.free-css.com/">Support Forum</a></li>
            <li><a href="http://www.free-css.com/">Themes</a></li>
            <li><a href="http://www.free-css.com/">WordPress Planet</a></li>
          </ul>
        </li>
        <li id="meta">
          <h3>Meta</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Log in</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="footer">
      <p>&#169; WordPress Site | Designed by: <a href="http://www.loreleiwebdesign.com/">Lorelei Web design</a></p>
    </div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	arrangement
2.	arthemia
3.	artica
4.	aspherical
5.	assiduous
6.	asterisk
7.	astounded
8.	astroturfd
9.	atomohost
10.	atrandafir582
11.	AttainDigital
12.	audi-template
13.	aurelius
14.	authenticity
15.	autoportal
16.	axian
17.	azulmedia2-1
18.	azure
19.	bagatelle
20.	balanced
21.	bananaleaf
22.	barricade
23.	begrimed
24.	belowthehorizon
25.	bennevis
26.	bermuda01
27.	besmart
28.	bestwebdesign
29.	beta
30.	beyond
31.	bigdeal
32.	BigSpaceLove
33.	bioessence
34.	Biru_Manteb
35.	bittersweet
36.	Black
37.	chamberlandsrestaurant
38.	chara
39.	characterized
40.	charcoal
41.	charitable-organization
42.	chary
43.	chasmogamous
44.	chesspiece
45.	chic
46.	chicanery
47.	chromz
48.	churchsitev.2
49.	citrus-island1-1
50.	clementine
51.	clicker
52.	modernclassic
53.	modernmagic
54.	modernworld
55.	A_Simple_Theme
56.	minimalistica
57.	miniseries
58.	mint-idea
59.	minty
60.	mirax
61.	miscellaneous
62.	mistybud
63.	mlpdesign02
64.	mlpdesign03
65.	mlpdesign04
66.	mlpdesign08
67.	model-4-me
68.	model-portfolio
69.	modelagency
70.	modelportfolio
71.	model_2
72.	moderna
73.	Modified
74.	modulation
75.	module-mag
76.	mokofactory
77.	monster
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