dark-effect-v2
<!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>Dark Effect Volume 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* {
padding: 0;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
}
p {
margin: 0.7em 0;
line-height:1.8em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
img
{
padding:5px;
background-color:#3f3f3f;
margin:5px;
border:#000 1px solid;
}
img:hover
{
padding:5px;
background-color:#3f3f3f;
margin:5px;
border:#fff 1px solid;
}
img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}
a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(dark-effect-v2-img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
img.wp-smiley, .wpstats, img.noborder, a img.noborder {
background: none;
border: 0;
padding: 0;
}
.clear {
clear:both;
height:20px;
}
blockquote
{
color:#666;
margin: 1em;
padding: 0 0 10px 50px;
background: url(dark-effect-v2-img/blockquote.gif) no-repeat left top;
}
fieldset
{
border:0;
}
body
{
background: #171717 url(dark-effect-v2-img/bg.gif);
margin: 10px;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
color: #fff;
text-align: center;
}
a
{
text-decoration:none;
}
a:link, a:visited {
color: #51a2d6;
text-decoration:none;
}
a:hover, a:active {
text-decoration:underline;
color:#fff;
}
h1, h2, h3, h4, h5, h6
{
font-family:Georgia, Verdana, Arial, Serif;
color:#51a2d6;
}
#container {
margin: 0 auto;
padding:0;
width:990px;
position: relative;
text-align: left;
border:1px solid #000;
background:#313131;
}
#navigation {
background-image:url(dark-effect-v2-img/blue/blue-li.gif);
background-repeat:repeat-x;
background-position:center;
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin: 0 auto;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0px;
list-style-type: none;
}
#navigation ul li a {
border-right:1px solid #1e1e1e;
border-bottom:none;
padding: 9px 15px 9px 15px;
display: block;
font-weight:bold;
color:#fff;
text-decoration: none;
background:#eeeeee;
font-size:12px;
letter-spacing:0px;
background-image:url(dark-effect-v2-img/blue/blue-li.gif);
background-repeat:repeat-x;
background-position:center;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li.current_page_item a
{
background-image:url(dark-effect-v2-img/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
color: #fff;
border-right:1px solid #1e1e1e;
border-bottom:none;
font-size:12px;
text-decoration:underline;
}
#drop-shadow{
background-image:url(dark-effect-v2-img/drop-shadow.gif);
background-repeat:repeat-x;
background-position:center;
margin: 0px;
width:202px;
padding-top:2px;
padding-bottom:3px;
}
#header {
clear: both;
margin: 0 auto;
width:990px;
position: relative;
text-align:left;
padding:15px 0px 15px 0px;
color:#FFFFFF;
}
#header h1
{
font-size:1.8em;
margin:10px 0 0 0px;
font-variant:small-caps;
letter-spacing:0px;
color:#FFFFFF;
}
#header h1 a {
text-decoration:none;
border:0;
color:#FFFFFF;
}
#header h2
{
margin:5px 0 0 0px;
font-size:1em;
font-weight:normal;
font-family:Tahoma, Verdana, Arial, Serif;
letter-spacing:0px;
}
#feedarea {
height:30px;
text-align: left;
width:100%;
}
#feedarea a:link,feedarea a:active,feedarea a:visited,feedarea a:hover {
color:#FFFFFF;
text-decoration:none;
}
html #feedarea {
border-bottom:1px dashed #151515;
}
#feedarea dl dt {
display: inline;
margin-right: 5px;
}
#feedarea dl dd {
display: inline;
margin-right: 5px;
background:url(dark-effect-v2-img/icon_feed.gif) no-repeat left center;
padding-left:16px;
}
#content {
width:980px;
margin:0 auto;
position:relative;
}
html #content {
}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:0 1em;
padding:0 1em;
list-style-image:url(dark-effect-v2-img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#000 1px solid;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding-left:2em;
}
#content-main {
float: left;
width: 547px;
}
html #section-index #content-main {
margin-right: 0px;
}
#content .post
{
padding-left:10px;
}
#content h2,
#content h3
{
font-size: 1.5em;
margin: 1em 0 0;
font-weight:normal;
line-height:1.4em;
letter-spacing:0px;
color: #51a2d6;
}
#content .entry
{
}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#51a2d6 1px dashed;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#333333 1px solid;
}
#content .entry li
{
margin:0 0 0.3em 0;
padding:0;
line-height:1.6em;
}
#content .postmetadata
{
clear:both;
font-size:0.9em;
text-align:right; color:#fff;
margin:0;
padding:0;
}
#content .post-info
{
clear:both;
font-size:0.9em; color:#fff;
margin:0;
padding:0;
}
#content .post-info,
#content h2.pagetitle
{
background:url(dark-effect-v2-img/underline-repeat1.gif) repeat-x left bottom;
padding-bottom:15px;
}
#comments, #respond{
margin: 0;
padding:1em 0 0 0;
margin: 50px;
color:#333333;
}
#commentform
{
margin: 5px;
padding:10px;
background:#292929;
border: #000 1px solid;
}
.commentnum
{
font-size:1.5em;
font-weight:bold;
margin:0 5px 0 0;
}
#container .commentlist {
margin: 1em 0;
padding: 0;
margin: 5px;
}
#container .commentlist li
{
list-style:none;
margin: 0;
padding: 5px;
}
#container .commentlist li.alt
{
background:#313131;
}
#container .commentlist li.authorcomment
{
border:#000 1px solid;
margin:20px;
background-image:url(dark-effect-v2-img/cat-box-rep.png);
background-repeat:repeat-x;
background-position:top;
}
#container .commentlist li .cmtinfo
{
font-size:1em;
}
#container .commentlist li cite
{
font-style:normal;
font-weight:bold;
}
#container .commentlist li .cmtinfo em
{
float:right;
margin:0;
padding:0;
font-style:normal;
font-size:0.9em; color:#fff;
}
#content .commentsfeed
{
background:url(dark-effect-v2-img/icon_feed.gif) no-repeat left center;
padding-left:16px;
}
#content .trackback
{
background:url(dark-effect-v2-img/link.gif) no-repeat left center;
padding-left:20px;
}
input.textbox, textarea
{
background:#333;
border:#000 1px solid;
font:1em Verdana, Arial, Serif;
padding:2px;
color:#FFFFFF;
width:150px;
}
textarea{
width: 90%;
padding:10px;
line-height:2em;
height: 20em;
}
input.textbox:focus, textarea:focus
{
border:#fff 1px solid;
}
#submit
{
background-image:url(dark-effect-v2-img/blue/blue-li.gif);
background-repeat:repeat-x;
background-position:center;
padding:3px;
color:#FFFFFF;
font-weight:bold;
border: 1px solid #000000;
}
#submit hover{
background-image:url(dark-effect-v2-img/top-nav-hover.gif);
background-repeat:repeat-x;
background-position:center;
color: #fff;
}
.post h4
{
font-size:1em;
font-weight:normal;
font-family:Verdana, Tahoma, Arial, Serif;
}
.post h4 em
{
font-style:normal;
float:right;
font-weight:normal;
}
#header, #content, #sidebar, #footer, .widget {
overflow: hidden;
}
.did-you-know{
background-color:#1e1e1e;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
padding-top:3px;
padding-bottom:3px;
font-size:11px;
width:990px;
margin: 0px auto;
color:#fff;
}
.footer-area{
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;
margin: 0 auto;
padding:0px 0 9px 0;
font-size:12px;
font-weight:bold;
color:#51a2d6;
text-decoration:none;
}
.footer-area a{
font-size:12px;
font-weight:bold;
border:0px;
color:#51a2d6;
text-decoration:none;
}
.footer-area a:hover{
font-size:12px;
font-weight:bold;
border:0px;
color:#51a2d6;
text-decoration:none;
}
.footer-area a:visited{
font-size:12px;
font-weight:bold;
border:0px;
color:#51a2d6;
text-decoration:none;
}
.footer-area a:hover{
font-size:12px;
font-weight:bold;
border:0px;
color:#51a2d6;
text-decoration:none;
}
.Theme-Sponsors{
padding-top:3px;
padding-bottom:3px;
width:990px;
font-size:11px;
margin: 0px auto;
text-align:left;
color:#fff;
}
.Theme-Sponsors a:hover{
font-size:11px;
color:#fff;
border:0px;
}
.Theme-Sponsors a:visited{
font-size:11px;
color:#fff;
border:0px;
}
.Theme-Sponsors a:active{
font-size:11px;
color:#fff;
border:0px;
}
.Theme-Sponsors a{
font-size:11px;
color:#fff;
border:0px;
}
.Theme-Sponsors a:hover{
font-size:11px;
color:#fff;
border:0px;
}
#search-tool-div{
position:absolute;
visibility:visible;
z-index:100;
right:20px;
top:30px;
}
.search-top{
border:#51a2d6 1px solid;
padding:4px;
background:#333 url(dark-effect-v2-img/form-bg.gif) repeat-x top;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
.search-top:focus{
padding:4px;
background:#333 url(dark-effect-v2-img/form-bg.gif) repeat-x top;
border:#fff 1px solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#51a2d6;
}
.submit-search{
padding:2px;
margin:0px;
font-size:11px;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.submit-search:hover{
padding:2px;
font-size:11px;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.no-image{
border:0px;
background-image:none;
padding:0px;
margin-right:5px;
}
.wp-calendar {
empty-cells: show;
width: 180px;
font-size: 12px;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0px;
color:#666666;
font-weight: normal;
list-style-type:none;
}
.wp-calendar LI {
list-style-type:none;
padding:0px;
background-image:none;
width:15px;
border:0px;
}
.wp-calendar LI A {
list-style-type:none;
padding:0px;
background-image:none;
width:15px;
border:0px;
}
.wp-calendar caption {
text-align: left;
color:#FFFFFF;
width: 180px;
margin: 0px;
padding-left:5px;
font-size: 14px;
font-weight:bold;
height: 36px;
line-height: 36px;
}
.wp-calendar th {
margin: 0px;
padding: 0px;
text-align: center;
}
.wp-calendar td {
margin: 0px;
padding: 0px;
text-align: center;
}
.wp-calendar tf {
margin: 0px;
padding: 0px;
}
.pad {
text-align: left;
}
#nav{
width: 200px;
margin-top:15px;
margin-left:2px;
margin-right:5px;
margin-bottom:10px;
overflow:hidden;
float:left;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#292929;
}
#nav LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(dark-effect-v2-img/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
#nav-right{
width: 200px;
margin-top:15px;
margin-left:5px;
margin-right:2px;
margin-bottom:10px;
overflow:hidden;
float:right;
position:relative;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav-right img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav-right UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav-right LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav-right LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#292929;
}
#nav-right LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(dark-effect-v2-img/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
.cat{
width:200px;
margin: 0px;
padding:4px;
overflow:hidden;
border-bottom: 1px solid #000000;
text-align: left;
color:#fff;
font-weight:bold;
background-image:url(dark-effect-v2-img/cat-box-rep.png);
background-position:top;
background-repeat:repeat-x;
}
#style-switch-theme{
position:absolute;
visibility:visible;
z-index:95;
top:30px;
right:5px;
}
#style-switch{
position:absolute;
visibility:visible;
z-index:99;
top:30px;
right:0px;
display:inline;
}
#style-switch img{
border: 1px solid #000;
padding:1px;
background-color:#ffffff;
background-image:none;
}
#style-switch img:hover{
border: 1px solid #ffffff;
padding:1px;
background-color:#000;
background-image:none;
}
#style-switch a,
style-switch a:active,
style-switch a:visited,
style-switch a:link
style-switch a:hover,{
border-bottom:0px;
margin-right: 0px;
background-image:none;
}
#back-to-top{
position:absolute;
visibility:visible;
z-index:82;
right:15px;
top:7px;
}
#main-image{
width:990px;
height:120px;
background:url(dark-effect-v2-img/blue/blue-banner.jpg) no-repeat center;
border: 1px solid #000;
padding:0px;
margin:0 auto;
position:relative;
}
#main-image IMG{
border: 0px;
padding:0px;
margin:0 auto;
}
</style>
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="css/style2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/style3.css" />
</head>
<body id="section-index">
<div id="header">
<h1>Your Website Name</h1>
<h2>Your site slogan goes here</h2>
</div>
<div id="navigation" style="margin-bottom:5px;">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Page 1</a></li>
<li><a href="http://www.free-css.com/">Page 2</a></li>
</ul>
</div>
<div id="main-image" style="margin-bottom:5px;"></div>
<div id="container">
<div id="content">
<div id="nav">
<ul>
<li class="cat" style="border-top: 1px solid #000;">Pages</li>
<li><a href="http://www.free-css.com/">Page 1</a></li>
<li><a href="http://www.free-css.com/">Page 2</a></li>
<li class="cat">Categories</li>
<li><a href="http://www.free-css.com/">Cat 1</a></li>
<li><a href="http://www.free-css.com/">Cat 2</a></li>
<li><a href="http://www.free-css.com/">Cat 3</a></li>
<li><a href="http://www.free-css.com/">Cat 4</a></li>
<li><a href="http://www.free-css.com/">Cat 5</a></li>
</ul>
</div>
<div id="content-main">
<div class="post">
<div class="posttitle">
<h2>Welcome to Your Website</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit.</p>
<br />
<br />
<span style="text-align:right;"><a href="http://www.free-css.com/">Read More »</a></span> </div>
</div>
<div class="post">
<div class="posttitle">
<h2>Second Homepage Article</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit.</p>
</div>
</div>
</div>
<div id="nav-right" style="margin-bottom:5px;">
<ul>
<li class="cat" style="border-top: 1px solid #000;">About this site</li>
<li style="text-align:center"><img src="dark-effect-v2-img/profile.jpg" alt="" /> <br />
Here you can describe what your website is about</li>
<li class="cat" style="border-top: 1px solid #333;">Helpful Links</li>
<li><a href="http://www.free-css.com/">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-area" style="margin-top:5px;"><b>Theme by <a href="http://www.itsnature.org">Nature Pictures</a></b>
<div id="back-to-top"><a href="#header">Back to Top</a></div>
</div>
</body>
</html>
Related examples in the same category