[Css-Design] TechWood | PwgPro Theme

    <link rel="stylesheet" href="http://www.shaterboy.hol.es/sub/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.shaterboy.hol.es/sub/bar.css" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=Unica+One|Duru+Sans|Montez' rel='stylesheet' type='text/css'>

<div id="logo">TechWood</div>

<div id="nav_content">
         <h2 id="nav_heading"><span></span></h2>
            <ul id="nav">
    <li class="nav_elemento"><a href="URL" class="menu">Inicio</a></li>
    <li class="nav_elemento"><a href="URL" class="menu">Contacto</a></li>
    <li class="nav_elemento"><a href="URL" class="menu">Noticias</a></li>
    <li class="nav_elemento"><a href="URL" class="menu">Terminos</a></li>
</ul>
            </ul>
         </div>


<div id="navi_links">
 <ul>
 <li class="links"><a class="links" href="#">Inicio</a></li>
 <li class="links"><a class="links" href="#">Facebook</a></li>
 <li class="links"><a class="links" href="#">Twitter</a></li>
 <li class="links"><a class="links" href="#">RSS</a></li>
 <li class="links"><a class="links" href="#">Youtube</a></li>
 </ul>
</div>

<div id="slider_back">

<div class="slider-wrapper theme-bar">
 <div id="slider" class="nivoSlider">
                <a href="http://www.flickr.com/photos/98863219@N02/12947751745/lightbox/"><img src="http://oi60.tinypic.com/ou4lfk.jpg" data-thumb="http://oi60.tinypic.com/ou4lfk.jpg" alt="" title="Descripción breve de la imagen." /></a>

                <a href="http://www.flickr.com/photos/98863219@N02/12925421694/lightbox/"><img src="http://oi61.tinypic.com/2njvgpj.jpg" data-thumb="http://oi61.tinypic.com/2njvgpj.jpg" alt="" title="Descripción breve de la imagen" data-transition="slideInLeft" /></a>

                 <a href="http://www.flickr.com/photos/98863219@N02/12925175945/lightbox/"><img src="http://oi57.tinypic.com/smrtxw.jpg" data-thumb="http://oi57.tinypic.com/smrtxw.jpg" alt="" title="Descripción breve de la imagenn" /></a>
            </div>
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.shaterboy.hol.es/sub/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

<div id="werbung">
<div id="inhalt">
<div id="inhalt_werbung">
<div id="text_werbung"><h1><a href="http://www.pwgpro.es.tl/">Consigue esté diseño grátis en PWGPRO</a></h1></div>
</div>
</div>
</div>

<div id="pre_footer">
<div id="pre_footer_content">

<div class="pre1">
<h3>Afiliados</h3>
<ul>
<li class="pre_list">
<a href="http://pwgpro.es.tl">PwgPro</a>
</li>
<li class="pre_list">
<a href="http://dangrecks.es.tl">DanGrecks</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
</ul>
</div>

<div class="pre2">
<h3>Artículos</h3>
<ul>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
</ul>
</div>

<div class="pre3">
<h3>Informacion</h3>
<ul>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
</ul>
</div>

<div class="pre4">
<h3>Lo Mejor</h3>
<ul>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
<li class="pre_list">
<a href="#">Nombre</a>
</li>
</ul>
</div>

<div class="pre5">
<h3>Síguenos</h3>
<ul>
<li class="pre_list">
<a href="#">Facebook</a>
</li>
<li class="pre_list">
<a href="#">Twitter</a>
</li>
<li class="pre_list">
<a href="#">Google+</a>
</li>
<li class="pre_list">
<a href="#">Flickr</a>
</li>
</ul>
</div>

<div class="pre6">
<h3>Contácto</h3>
<ul>
<li class="pre_list">
<a href="#">Ejemplo@página.es</a>
</li>
<li class="pre_list">
<a href="#">49-800-000-000</a>
</li>
</ul>
</div>

</div>
</div>

<div id="footer">
<div id="footer_content">Copyright by <a id="navs_footer" href="URL">Mi Página</a> // Design by <a id="navs_footer" href="http://pegpro.es.tl">PwgPro</a></div>
</div>

* { padding: 0px; margin: 0px; }

table[height="102"] {
    left: 50%;
    margin-left: -335px;
    position: absolute;
    top: 71px;
}

body {
    background-color: #fbfdff;
    background-image: url("http://img.webme.com/pic/d/dangrecks/back.png");
    color: rgb(111, 111, 111);
font-family: 'Duru Sans', sans-serif;
    font-size: 14px;
background-repeat: repeat-x;
}


a img {
        border: none;
}

a {
        color:#9f9f9f;
}

a:hover {
        color:#4b4b4b;
}

h1 {
    color: #FFFFFF;
    font-size: 260%;
font-family: 'Unica One', cursive;
text-transform: uppercase;
}

h2 {
    color: #FFFFFF;
    font-size: 200%
font-family: 'Unica One', cursive;
text-transform: uppercase;
}

h3 {
    color: #1f72d0;
   font-size: 140%;
font-family: 'Unica One', cursive;
text-transform: uppercase;
margin-bottom: 0.5em;
}

h4, h5, h6 {
        color:#fff;
        font-weight:normal;
font-family: 'Unica One', cursive;
}
#container {
    background: none;
    height: auto;
    margin: 25px auto auto;
    overflow: hidden;
    width: 1102px;
}
#nav_content {
    background: none repeat scroll 0 0 #428BCA;
    border-top: 0 solid #FFFFFF;
    height: 92px;
    left: 50%;
    margin-left: -546px;
    position: absolute;
    text-align: left;
    top: 268px;
    width: 1096px;
}

table {margin-left:auto;margin-right:auto;}   lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}

li.nav_elemento {
    background: none repeat scroll 0 0 #428BCA;
    display: inline-block;
    height: 18px;
    margin-left: -4px;
    padding: 37px;
    text-align: center;
    width: auto;
    border-right: 1px solid #63a7e1;
}
li.nav_elemento a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}
li.nav_elemento:hover a {
   color:#0CF;
   transition-duration:1s;
   text-decoration:none;
   font-size:15px;
}

#navs_footer
{
   color:#FFF;
   margin:10px;
   text-decoration:none;
   font-size:15px;
}
#navs_footer:hover
{
   color:#0CF;
   margin:10px;
   transition-duration:1s;
   text-decoration:none;
   font-size:15px;
}

#navi_links ul {
    height: 45px;
    left: 50%;
    list-style-type: none;
    margin-left: -550px;
    overflow: hidden;
    position: absolute;
    top: 8px;
    width: 1100px;
}
#navi_links ul li.links {
    display: inline-block;
    height: 32px;
    overflow: hidden;
    padding: 14px;
    width: auto;
}
a.links {
    color: #FFFFFF;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px;
}
#navi_links ul li.links:hover {
    background: none repeat scroll 0 0 #163357;
    border-bottom: 1px solid #052A58;
    height: 31px;
}
a.links:hover {
    color: #FFFFFF;
}

#slider_back {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DFE1E3;
    height: 550px;
    margin: 385px auto auto;
    padding: 25px;
    width: 1050px;
}

#content {
    border-bottom: 1px solid #DFE1E3;
    float: left;
    margin-bottom: 2px;
    margin-left: 6px;
    margin-top: 2px;
    padding-bottom: 50px;
    width: 100%;
}

#strich {
height: 1px;
width: 1100px;
background-color: #DFE1E3;
margin-top: 25px;
margin-bottom: 25px;
}

#title {
    background: none repeat scroll 0 0 #234B7A;
    border-top: 1px solid #234B7A;
    margin-bottom: 25px;
    padding: 25px 25px 25px 50px;
    width: 100%;
    margin-left: -4px;
}


#header-container {
    display: none;
}
#nav_heading {
    display: none;
}
#sidebar_heading {
    display: none;
}
#pre_content {
    display: none;
}
#pre_header {
    display: none;
}
#post_header {
    display: none;
}
#post_content {
    display: none;
}
#extraDiv2 {
    display: none;
}
#extraDiv3 {
    display: none;
}
#extraDiv4 {
    display: none;
}
#extraDiv5 {
    display: none;
}
#extraDiv6 {
    display: none;
}
#counter {
    display: none;
}
.header {
    display: none;
}

#werbung {
width: 1025px;
height: 125px;
margin: auto;
margin-top: 50px;
margin-bottom: 25px;
background: #fff;
padding:15px;
overflow:hidden;
border: 1px solid #DFE1E3;
}

#inhalt {
width: 1025px;
height: 125px;
overflow:hidden;
}

#inhalt_werbung {
width: 1025px;
height: 125px;
background-image:url(http://img.webme.com/pic/d/dangrecks/dgwerbung.png);
-webkit-transition: all 1.0s ease;
          -moz-transition: all 1.0s ease;
          -o-transition: all 1.0s ease;
          transition: all 1.0s ease;
text-shadow: 0 0.1em 0 rgb(73, 73, 73);
}

#inhalt_werbung:hover {
  -moz-transform:scale(1.1,1.1);
  -webkit-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);
  transform:scale(1.1,1.1);
-webkit-transition: all 0.6s ease;
          -moz-transition: all 0.6s ease;
          -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}

#text_werbung {
    height: 50px;
    margin-left: 30px;
    margin-top: 44px;
    position: absolute;
    width: 965px;
z-index: 10000;
text-align: center;
}

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

#pre_footer {
    background-color: #EAEAEA;
  height: 180px;
    margin-top: 60px;
    width: 100%;
    padding-top: 41px;
}

#pre_footer_content {
width: 1100px;
height: auto;
background: #fff;
margin:auto;
}

.pre1 {
width: 170px;
height: 135px;
postion:relative;
float:left;
}

.pre2 {
width: 170px;
height: 135px;
postion:relative;
float:left;
margin-left: 16px;
}

.pre3 {
width: 170px;
height: 135px;
postion:relative;
float:left;
margin-left: 16px;
}

.pre4 {
width: 170px;
height: 135px;
postion:relative;
float:left;
margin-left: 16px;
}

.pre5 {
width: 170px;
height: 135px;
postion:relative;
float:left;
margin-left: 16px;
}

.pre6 {
width: 170px;
height: 135px;
postion:relative;
float:left;
margin-left: 16px;
background-image:url(http://img.webme.com/pic/d/dangrecks/sobre.png);
}

.pre_list {
    line-height: 1.5em;
    list-style-type: none;
margin-left: 5px;
}
#footer {
background:#234B7A;
width: 100%;
height: 50px;
padding-top: 15px;
color: #71a0d5;
}
#footer_content {
width: 1100px;
height: auto;
text-align: left;
margin: auto;
}

#footer_content a {
color: #4a7db7;
}

#webme_footer_textlink_dont_hide {
    background-color: #234B7A;
    color: #4073AB;
    left: 50%;
    margin-left: -549px;
    margin-top: -26px;
    position: absolute;
}
#webme_footer_textlink_dont_hide:hover {
    background-color: #234B7A;
    color: #0CF;
    left: 50%;
    margin-left: -549px;
    margin-top: -26px;
    transition-duration:1s;
    position: absolute;
}


div#webme_sky_ad {
    left: 50%;
    margin-left: 579px;
    position: absolute;
    right: 0;
    top: 268px;
    width: 200px;
}

#logo {
    color: #FFFFFF;
    font-family: 'Montez',cursive;
    font-size: 58px;
    height: 80px;
    left: 50%;
    margin-left: -525px;
    position: absolute;
    top: 179px;
    width: 507px;
}

#post
{
   background:-webkit-linear-gradient(#F3F3F3,#E9E9E9);
   width:800px;
   height:250px;
   margin-bottom:20px;
   
}
#imgpost
{
   background:#000;
        box-shadow: 0 2px 20px #000000;
   width:150px;
   height:150px;
   float:left;
   margin-right:5px;
   margin-top:20px;
   margin-left:5px;
}

.lateral {
margin-top: 10px;
width:250px;
background-color:#FFF;
float:right;
border: 1px solid #d5d4d0;
}

.contenido {
margin:0;
padding:5px 20px 10px 10px;
}

.cuerpo {
margin-top: 10px;
width:820px;
background-color:#FFF;
float:left;
border: 1px solid #d5d4d0;
}

#Postext
{
   text-align:height;
   width:550px;
   float:left;
   margin:10px;
   margin-top:20px;
}

.Titulo {
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #DCD9D9;
    border-radius: 2px 2px 0px 0px;
    display: block;
    margin-top: 5px;
    overflow: hidden;
    padding: 4px;
    width: 790px;
}

#menuUl {
list-style:none;
margin:0;
padding:10px 20px 10px 10px;
}

#menuUl li a {
background-image:url(http://img.webme.com/pic/d/dangrecks/arrow.png);
background-repeat:no-repeat;
padding-left:15px;
}

<div class="cuerpo">
<div class="contenido"><!-- Inicio del Primer Post-->    <article id="post">
<header>
<div class="Titulo">
<h2 style="text-align: left;"><span style="color:#A1A1A1;">Titulo de la Nueva Entrada</span></h2>
<h5 style="text-align: right;"><span style="color:#A1A1A1;">Publicado por AnGrecK | 23 de Mayo | By PwgPro</span></h5>
</div>
</header>
<div id="imgpost"><img src="http://colorlib.com/dazzling/wp-content/uploads/2013/03/image-alignment-150x150.jpg" width="150" height="150" alt="" /></div>
<p id="Postext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus urna. In tristique orci porttitor ipsum.</p>
</article>     <!-- Fin del Primer Post-->      <!-- Inicio del Segundo Post-->    <article id="post">
<header>
<div class="Titulo">
<h2 style="text-align: left;"><span style="color:#A1A1A1;">Titulo de la Nueva Entrada</span></h2>
<h5 style="text-align: right;"><span style="color:#A1A1A1;">Publicado por AnGrecK | 23 de Mayo | By PwgPro</span></h5>
</div>
</header>
<div id="imgpost"><img src="http://colorlib.com/dazzling/wp-content/uploads/2013/03/image-alignment-150x150.jpg" width="150" height="150" alt="" /></div>
<p id="Postext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus urna. In tristique orci porttitor ipsum.</p>
</article>                                  <!-- Fin del Segundo Post-->    <!-- Inicio del Tercer Post-->   <article id="post">
<header>
<div class="Titulo">
<h2 style="text-align: left;"><span style="color:#A1A1A1;">Titulo de la Nueva Entrada</span></h2>
<h5 style="text-align: right;"><span style="color:#A1A1A1;">Publicado por AnGrecK | 23 de Mayo | By PwgPro</span></h5>
</div>
</header>
<div id="imgpost"><img src="http://colorlib.com/dazzling/wp-content/uploads/2013/03/image-alignment-150x150.jpg" width="150" height="150" alt="" /></div>
<p id="Postext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus urna. In tristique orci porttitor ipsum.</p>
</article>  <!-- Fin del Tercer Post-->
<p>&nbsp;</p>
</div>
</div>
<div class="lateral">
<div class="contenido">
<ul id="menuUl">
    <li><a href="#">Inicio</a></li>
    <hr />
    <li><a href="#">Foro</a></li>
    <hr />
    <li><a href="#">Libro de visitas</a></li>
    <hr />
    <li><a href="#">Contacto</a></li>
    <hr />
    <li><a href="#">Recursos</a></li>
    <hr />
    <li><a href="#">Tutoriales</a></li>
    <hr />
    <li><a href="#">Dise&ntilde;os</a></li>
    <hr />
</ul>
</div>
</div>
<div class="lateral">
<div class="contenido">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus urna. In tristique orci porttitor ipsum.</div>
</div>