[CSS] Love Minimal Tw*

<div id="poss">
<div id="wrap">
<header id="header">
<div class="inner-wrap clearfix">
<h1 id="logo">
<a href="/Home.htm">Tw</a>
</h1>
</header>      
         
<div id="featured">
<div class="inner-wrap">
            
<div class="breadcrumb">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/1.jpg" alt="" /></a>           
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/2.jpg" alt="" /></a>
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/3.jpg" alt="" /></a>
 <a href="#"><img src="http://img.webme.com/pic/p/pruebasx/4.jpg" alt="" /></a>
           
</div>
</div>
<div class="paging">
        <a href="#" rel="1">❤</a>
        <a href="#" rel="2">❤</a>
        <a href="#" rel="3">❤</a>
        <a href="#" rel="4">❤</a>
    </div>
</div>
</div>

</div>
</div>

<div id="main" class="blog">
<div class="inner-wrap clearfix">
            
<div class="content content-left">
               
<article class="post post-blog clearfix">

                  
</div>
<div class="sidebar">

<div class="widget widget-list">
<h6>Buscar tema</h6>
<div class="widget-content">
<ul>
<li><a href="/home.htm">Home</a></li>
<li><a href="/codigos.htm">Codigos</a></li>
<li><a href="/diseno.htm">Diseños</a></li>
<li><a href="/herramientas.htm">Herramientas</a></li>

</ul>
</div>
</div>

<div class="widget widget-list">
<h6> </h6>
<div class="widget-content">
<ul>
<li><a href="/Contacto.htm">Contacto</a></li>
<li><a href="/Tutoriales.htm">Tutoriales</a></li>
<li><a href="/Recursos.htm">Recursos</a></li>
<li><a href="/Galeria.htm">Galeria</a></li>
</ul></div>
</div>
                  
<div class="widget">
<h6>Sponsors</h6>
<div class="widget-content">
<a href="/home.htm" class="ad-link"><img src="http://img.webme.com/pic/p/pruebasx/banner125.jpg" width="125" height="125" alt="" class="ad" /></a>
<a href="/home.htm" class="ad-link"><img src="http://img.webme.com/pic/p/pruebasx/banner125.jpg" width="125" height="125" alt="" class="ad" /></a>
</div>
</div>
                  
<div class="widget">
<h6>Sobre nosotros</h6>
<div class="widget-content">
<p>
Somos un grupo dedicado a ayudar a las personas a iniciarse en la creación o elaboración de un website, nuestro principal objetivo es proporcionarles todo tipo de recursos para facilitar la creación de un website.
                        </p>
</div></div></div></div></div></div>

<footer id="footer">
<div class="inner-wrap">
</div>
</footer></div>         

<footer id="footer2">
<div class="inner-wrap">
         
<div class="breadcrumb">
<div class="main_view2">
<div class="window2">
<div class="image_reel">
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/lv1.png" alt="" /></a>           
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/lv2.png" alt="" /></a>
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/lv3.png" alt="" /></a>
<a href="#"><img src="http://img.webme.com/pic/p/pruebasx/lv4.png" alt="" /></a>
           
</div>
</div>
</div>

</div>
</footer></div>         

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

   //Set Default State of each portfolio piece
   $(".paging").show();
   $(".paging a:first").addClass("active");
      
   //Get size of images, how many there are, then determin the size of the image reel.
   var imageWidth = $(".window").width();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;
   
   //Adjust the image reel to its new size
   $(".image_reel").css({'width' : imageReelWidth});
   
   //Paging + Slider Function
   rotate = function(){   
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

      $(".paging a").removeClass('active'); //Remove all active class
      $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
      
      //Slider Animation
      $(".image_reel").animate({
         left: -image_reelPosition
      }, 500 );
      
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){      
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $('.paging a.active').next();
         if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
      }, 7000); //Timer speed in milliseconds (3 seconds)
   };
   
   rotateSwitch(); //Run function on launch
   
   //On Hover
   $(".image_reel a").hover(function() {
      clearInterval(play); //Stop the rotation
   }, function() {
      rotateSwitch(); //Resume rotation
   });   
   
   //On Click
   $(".paging a").click(function() {   
      $active = $(this); //Activate the clicked paging
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
   });   
   
});
</script>

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;}
tablle{display: none;}


table{
position:relative;
left:110px;
top:20px;
z-index: 1;
margin-left:auto;
margin-right:auto;

}

#poss{
position:relative;
top:-125px;
margin-left:auto;
margin-right:auto;

}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}



body {
   color: #565e66;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 12px;
   line-height: 18px;
   overflow-x: hidden;
   -moz-text-shadow: -1px 1px 0 #ffffff;
   -webkit-text-shadow:  -1px 1px 0 #ffffff;
   text-shadow:  -1px 1px 0 #ffffff;
}

h1 {
   color: #434e59;
   font-family: Georgia, serif;
   font-size: 28px;
   font-weight: normal;
   margin-bottom: 18px;
   line-height: 36px;
}

h2,
h3,
h4 {
   color: #434e59;
   font-family: Trebuchet MS, 'Trebuchet MS', Tahoma, Arial, sans-serif;
   font-weight: bold;
}

h2 {
   font-size: 24px;
   line-height: 36px;
   margin-bottom: 18px;
}

h3 {
   font-size: 20px;
   line-height: 36px;
}

h4 {
   font-size: 16px;
   line-height: 36px;
}

h5 {
   color: #434e59;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 13px;
   font-weight: bold;
   line-height: 36px;
   text-transform: uppercase;
}

h6 {
   color: #434e59;
   font-size: 11px;
   font-weight: bold;
   line-height: 18px;
   text-transform: uppercase;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
   color: #434e59;
}

h1 em,
h2 em,
h3 em,
h4 em {
   font-family: Georgia, serif;
   font-weight: normal;
}

h2 small {
   display: block;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 11px;   
   font-weight: normal;
   line-height: 12px;
   margin-bottom: -4px;
   text-transform: uppercase;
}

h3 small {
   display: block;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 11px;   
   font-weight: normal;
   line-height: 12px;
   margin-bottom: -4px;
   text-transform: uppercase;
}

h4 small {
   display: block;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 9px;   
   font-weight: normal;
   line-height: 12px;
   margin-bottom: -6px;
   text-transform: uppercase;
}

p {
   margin-bottom: 18px;
}

a {
   color: #000;
   cursor: pointer;
   text-decoration: none;
}

a:hover {
   color: #ff5757;
   text-decoration: underline;
}

a:active {
   color: #43688c;
}

a.no-border {
   border-bottom: 0;
}

a.more {
   font-weight: bold;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
   color: #566473;
}

h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
   color: #303840;
}


#footer a:hover {
   color: #566473;
}

#footer a:active {
   color: #303840;
}

#footer li a:hover {
   text-decoration: none;
}

ul {
   line-height: 15px;
   font-weight: normal;
   margin-bottom: 18px;
   text-transform: none;
}

ol {
   line-height: 15px;
   margin-bottom: 18px;
   list-style-type: decimal;
}

dl {
   line-height: 15px;
   margin-bottom: 18px;
}

dt {
   font-weight: bold;
}

li, dd {
   margin-bottom: 4px;
}

.post-content ul,
.post-content ol,
.post-content dl {
   margin-left: 18px;
   margin-right: 18px;
}

ul.links,
.sidebar ul,
.pagination {
   font-family: Georgia, serif;
   font-size: 12px;
   font-style: italic;   
}

ul.links li a:hover, .sidebar ul li a:hover {
   background-image: url(http://img.webme.com/pic/p/pruebasx/lov.png);
   background-repeat: no-repeat;
   background-position: right bottom;
   padding-right: 12px;
}

.sidebar ul li.current a {
   color: #434e59;
}

.sidebar ul li.current ul li a {
   color: #5684b2;
}

.sidebar ul li ul li a:hover {
   color: #6297cc;
}

.sidebar ul li ul li a:active {
   color: #43688c;
}


ul.info {
   font-style: normal;
   font-weight: bold;
}

ul.info li small {
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 10px;
   font-weight: normal;
   text-transform: uppercase;
}

em {
   font-style: italic;
}

strong {
   font-weight: bold;
}

small {
   color: #6c7680;
   font-size: 10px;
}

ins {
   background-color: #f4f7fa;
}

s,
del {
   text-decoration: line-through;
}

caption,
figcaption,
.caption {
   font-family: Georgia, serif;
   font-size: 12px;
   font-style: italic;
   margin-bottom: 18px;
   text-align: center;
}

figcaption {
   margin-bottom: 4px;
}

pre {
   font-family: "Courier New", monospace;
}

code,
samp {
   font-family: "Courier New", monospace;
}

label {
   color: #434e59;
   font-size: 11px;
   font-weight: bold;
   line-height: 14px;
   margin-top: -1px;
   text-transform: uppercase;
}

label small {
   color: #76818c;
   font-size: 10px;
   font-weight: normal;
   text-transform: none;
}

form, input, textarea {
   color: #434E59;
   font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
   font-size: 11px;
}


#footer a {
   color: #434e59;
}

#footer-nav {
   color: #434e59;
   font-size: 10px;
   font-style: normal;
   font-weight: bold;
   line-height: 18px;
   margin-bottom: 0;
   text-transform: uppercase;
}



html {
   height: 100%;
}

body {
   height: 100%;
   width: 100%;
   min-width: 1040px;
   background: #fff url(http://img.webme.com/pic/p/pruebasx/fondotex.png) repeat 0 0;
}

/* Sticky Footer Opera Fix*/
body:before {
   content:"";
   height:100%;
   float:left;
   width:0;
   margin-top:-32767px;
}

#wrap {
   min-height: 100%;
}

.inner-wrap {
   margin: 0 auto;
   padding: 0 40px;
   width: 960px;
   overflow: hidden;
}

#header {
   background: #fff url(http://img.webme.com/pic/p/pruebasx/fondod.png) repeat 0 0;
   border-bottom: 1px solid #000;
   
}

#action{
   background: #fafcff url(http://img.webme.com/pic/p/pruebasx/fondotex.png) repeat 0 0;
   border-top: 2px solid #eef1f3;
}

#action .inner-wrap {
   padding-top: 30px;
   padding-bottom: 30px;
}

#action .button {
   margin-top: 14px;
   width: 139px;
}

#featured {
   background: #4f4f4f url(http://img.webme.com/pic/p/pruebasx/fondotex.png) repeat 0 0;
}

.home #featured .inner-wrap {
   padding-top: 75px;
   padding-bottom: 75px;
   position: relative;
}

#featured .inner-wrap {
   padding-top: 23px;
   padding-bottom: 23px;
   position: relative;
}

#main {
   background: transparent url(http://img.webme.com/pic/p/pruebasx/maintop.jpg) repeat-x 0 0;
   border-top: 1px solid #fff;
   padding-bottom: 156px; /* Must be the same as footer height */
}

#main .inner-wrap {
   padding-top: 36px;
   padding-bottom: 36px;
}

.content {
   width: 627px;
}

.content-full {
   width: 100%;
}

.content-left {
   float: left;
   margin-right: 39px;
}

.content-right {
   float: right;
   margin-left: 39px;
}

.sidebar {
   width: 294px;
   float: left;
}

.sidebar .widget {
   clear: both;
}

.sidebar .widget-list {
   float: left;
   margin-right: 20px;
   width: 137px;
}

.sidebar .widget-list + .widget-list {
   clear: none;
   margin-right: 0;
}

.sidebar .widget-content {
   margin: 12px 0 54px;
}


a.post-image {
   line-height: 0;
}

.post-image img {
   display: block;
}

.post-image,
.ad,
.avatar,
iframe,
figure,
pre {
   background-color: #fff;
   border: 1px solid #d2d4d6;
   border-top-color: #e1e3e6;
   border-bottom-color: #c8cacc;
   display: block;
   margin-bottom: 18px;
   padding: 5px;
   
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   
   -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .08);
   -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .08);
   box-shadow: 0 2px 3px rgba(0, 0, 0, .08);
}

figure iframe,
figure video,
figure img {
   background-color: transparent;
   border-width: 0;
   margin-bottom: 0;
   padding: 0;
   display: block;
   
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
   
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}

figure iframe + figcaption,
figure video + figcaption,
figure img + figcaption {
   margin-top: 5px;
}

.post-blog figure,
.post-blog .post-content pre {
   margin-left: -167px;
}

pre.allowed-tags {
   background-color: transparent;
   border: 0;
   margin: 8px 0 0;
   padding: 0;
   
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
   
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.ad {
   display: inline;
   margin-bottom: 0;
}

.ad-link {
   line-height: 0;
   margin-right: 16px;
}

.ad-link + .ad-link {
   margin-right: 0;
}

#footer2 {
top:0px;
margin-left:auto;
margin-right:auto;

   background: #4f4f4f url(http://img.webme.com/pic/p/pruebasx/fondotex.png) repeat 0 0;
   
   clear: both;
   height: 200px; /* Set your footer height here */
   margin-top: -158px; /* Must be equal to negative footer height minus top and bottom borders/margins on #header, #main and #footer */
   position: relative;
   
}

#footer {

   background: #4f4f4f url(http://img.webme.com/pic/p/pruebasx/fondotex.png) repeat 0 0;
   border-top: 1px solid #f5f7fa;
   clear: both;
   height: 5px;
   margin-top: -158px;
   position: relative;
   -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, .15);


}

#footer:before {
   content: '';
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 50;
   left: 0;
}

#footer .inner-wrap {
   height: 36px;
   padding-top: 60px;
   padding-bottom: 60px;
   position: relative;
}

#footer-nav li {
   float: left;
   margin-bottom: 0;
   padding-right: 10px;
}


#footer-nav li:first-child:before {
   content: '';
}

.footer-logo {
   display: block;
   line-height: 0;
   position: absolute;
   top: 50%;
   margin-top: -20px; /* set it to negative half of logo image height */
   right: 40px;
}

#header .inner-wrap {
   padding-top: 35px;
   padding-bottom: 35px;
   position: relative;
}

#logo {
   float: left;
   margin-bottom: 0;
}

#logo a {
   background: transparent url(http://img.webme.com/pic/p/pruebasx/log2o.jpg) no-repeat 0 0;
   display: block;
   height: 77px; /* Set this to your logo image height */
   width: 247px; /* Set this to your logo image width */
   overflow: hidden;
   text-indent: -9999em;
}





---------

.main_view {
   float: left;
   position: relative;
}

.window {
   height:286px;   width: 960px;
   overflow: hidden; /*--Hides anything outside of the set width/height--*/
   position: relative;
}
.image_reel {
   position: absolute;
   top: 0; left: 0;
}
.image_reel img {float: left;}


.paging {
   position: absolute;
   bottom: 40px; right: 5px;
   width: 178px; height:47px;
   z-index: 100; /*--Assures the paging stays on the top layer--*/
   text-align: center;
   line-height: 40px;
   background: url() no-repeat;
   display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
border: 1px solid #;
background: #4f4f4f;
   -moz-border-radius: 20px;
   -khtml-border-radius: 20px;
   -webkit-border-radius: 20px;
}
.paging a.active {
   background: #000;
   border: 1px solid #000;
   -moz-border-radius: 20px;
   -khtml-border-radius: 20px;
   -webkit-border-radius: 20px;
color: #ff5757;
   -moz-text-shadow: -1px 1px 0 #ff5757;
   -webkit-text-shadow:  -1px 1px 0 #ff5757;
   text-shadow:  -1px 1px 0 #ff5757;
}
.paging a:hover {font-weight: ;}



---------

.main_view2 {
   float: left;
   position: relative;
}

/
.window2 {
   height:200px;   width: 960px;
   overflow: hidden; /*--Hides anything outside of the set width/height--*/
   position: relative;
}


*::-moz-selection{
   background: #ff5757;
   color: #fff;
}

*::selection {
   background: #ff5757;
   color: #fff;
}