~D13 - css-dimlight

css-dimlight

Vista Previa:Link

Texto por encima de la pagina

<div id="mainwrap">
<div id="wrapper">
<div id="header">
<div id="hgroup">
<h1>Titulo de la pagina</h1>
<h3>Subtitulo de la pagina</h3>
</div>
</div>
<div id="aside">
<form method="get" class="search" action="http://www.google.com/search">
  <input name="q" placeholder="Buscar en el sitio..." type="text"><input style="display: none;" name="sitesearch" value="darknet13.es.tl" checked="checked" type="radio"></form>
<hr class="separator" />
<h2 class="menu">Menu</h2>
<ul class="menu">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
</ul>
<hr class="separator" />
<h2 class="menu">Menu2</h2>
<ul class="menu">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
</ul>
<hr class="separator" />
<div id="info">
<h2>Informacion</h2>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="#">consequat</a>.</div>
</div>

Texto por debajo de la pagina

<hr class="clear" />
</div>
</div>
<hr class="end" />
<div id="last">
<hr class="separator" />
<div class="links">
<a href="#">Link1</a> | 
<a href="#">Link2</a> | 
<a href="#">Link3</a> | 
<a href="#">Link4</a> | 
<a href="#">Link5</a>
</div>
<hr class="separator" />
<div class="advert">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="#">consequat</a>.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. 
</div>
<hr class="separator" />
<div class="footer">20xx-2012 TuWeb<div class="legal">Diseño por <a href="http:darknet13.es.tl" target="_blank">~D13</a></div></div>
</div>

CSS Code sin Style Tags

a img {border: 0px;}
#header_container {display: none;}
#nav_container {display: none;}
#sidebar_container{display:none;}
h2#title {display: none;}
table[height ="102"] {margin-right:auto;margin-left:auto;}
#counter {display:none;}
* {
  margin: 0px;
}
html, body {
  margin: 0px;
  padding: 0px;
  background-color: black;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(https://img.webme.com/pic/d/darknet13/dimlightbackbg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}
a {
  color: #66ffff;
  text-decoration: underline;
}
#content a, #aside a {
  color: #990000;
}
#wrapper {
  border: 1px solid white;
  background-color: white;
  width: 850px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  background-color: black;
  background-image: url(https://img.webme.com/pic/d/darknet13/dimlightheader.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  min-height: 91px;
  padding-top: 9px;
}
#hgroup {
  color: white;
  text-align: center;
}
#aside {
  float: left;
  width: 200px;
}
form.search {
  margin: 5px 0px 6px;
  padding: 0px;
  width: 100%;
  text-align: center;
}
form.search input {
  border: 2px groove black;
  width: 180px;
  color: #990000;
  text-align: center;
  border-radius:10px;
}
#aside hr.separator {
  border-style: none;
  height:10px;
}
#aside h2.menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/dimlighth2.png);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  color: white;
  width: 186px;
  height: 41px;
  margin-right: auto;
  margin-left: auto;
}
#aside ul.menu {
  padding: 0px;
  list-style-type: none;
}
#aside ul.menu li a {
  text-decoration: none;
  color: black;
  display: list-item;
  list-style-position: inside;
  list-style-image: url(https://img.webme.com/pic/d/darknet13/dimlighta.png);
  background-repeat: no-repeat;
  margin-left: 9px;
  margin-right: 9px;
}
#aside ul.menu li a:hover {
  list-style-image: url(https://img.webme.com/pic/d/darknet13/dimlightahov.png);
}
#aside #info {
  margin-left: 9px;
  margin-right: 9px;
  text-align: justify;
}
#aside #info h2 {
  background-image: url(https://img.webme.com/pic/d/darknet13/dimlighth2.png);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  color: white;
  width: 186px;
  height: 41px;
  margin-right: auto;
  margin-left: auto;
}
#aside marquee ul.menu li a {
  list-style-image: url(https://img.webme.com/pic/d/darknet13/none);
  text-align: center;
  margin-right: 0px;
  margin-left: 0px;
}
#aside marquee ul.menu li a:hover {
  list-style-image: url(https://img.webme.com/pic/d/darknet13/none);
  list-style-type: none;
  color: #990000;
}
#content {
  margin-top: 5px;
  float: left;
  width: 644px;
  padding-right: 3px;
  padding-left: 3px;
}
hr.clear {
  clear:both;
  border-style: none;
}
#footer {
  clear: left;
}
hr.end {
  border-style: none;
  background-image: url(https://img.webme.com/pic/d/darknet13/dimlightbtm.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  width: 852px;
  height: 20px;
  margin-right: auto;
  margin-left: auto;
}
#last {
  color: white;
  text-align: center;
}
#last hr {
  border-style: none;
  margin-top: 30px;
}
#last .links, #last .links a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: bold;
}
#last .links a:hover {
  text-decoration: underline;
}
#last .advert {
  width: 850px;
  margin-right: auto;
  margin-left: auto;
}
#last .footer {
}
#last .footer .legal {
  font-size: 8px;
  text-align: right;
}