[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral

• [1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración
• [2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera
• [3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú
• [4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido

             <div id="widget">
                 <h2>Iniciar sesión</h2>
                    <div class="wcontenido">
                     <form name="login" id="login">
                         <input type="text" name="user" value="Usuario" size="21"><br>
                         <input type="password" name="pass" value="Contraseña" size="21"><br>
                         <input type="button" name="button" value="Login">
                        </form>
                    </div> 

                 <h2>Disclaimer</h2>
                    <div class="wcontenido">
                     El contenido presente en este portal está protegido por una licencia de Creative Commons, el cual aprueba su uso, modificación y distribución avisando previamente al dueño del mismo y acreditando al final de la publicación.<a href="#">link</a> <span>hola</span>
                    </div> 
                    
                </div>

   body aside #widget {
    padding-bottom:18px;
    font-family:'Raleway',sans-serif;
   }
   body aside h2 {
    width:78%;
    float:right;
    text-align:right;
    font-size:21px;

   }
   body aside .wcontenido {
    clear:both;
    text-align:left;
    text-align:justify;
    padding-left:4%;
    padding-right:4%;
    font-size:16px;
   }
   body aside .wcontenido form {
    text-align:center;
   }
   body aside .wcontenido form input[type=text] {
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#bcbcbc;
    border-radius:15px; 
    -moz-border-radius:15px; 
    -webkit-border-radius:15px; 
    padding:7px 12px;
    /*MEJORAS 
    box-shadow:3px 3px 8px #333;
    -webkit-box-shadow:3px 3px 8px #333;
    -moz-box-shadow:3px 3px 8px #333;
    -o-box-shadow:3px 3px 8px #333;
    -ms-box-shadow:3px 3px 8px #333; */

   }

   body aside .wcontenido form input[type=text]:hover {
    border:1px solid #FFF;
    transition:all ease-in .3s;
   }
   body aside .wcontenido form input[type=password] {
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#bcbcbc;
    border-radius:15px; 
    -moz-border-radius:15px; 
    -webkit-border-radius:15px; 
    padding:7px 12px;
    /*MEJORAS 
    box-shadow:3px 3px 8px #333;
    -webkit-box-shadow:3px 3px 8px #333;
    -moz-box-shadow:3px 3px 8px #333;
    -o-box-shadow:3px 3px 8px #333;
    -ms-box-shadow:3px 3px 8px #333; */

   }
   body aside .wcontenido form input[type=text]:password {
    border:1px solid #FFF;
    transition:all ease-in .3s;
   }
   body aside .wcontenido form input[type=button] {
    position:relative; 
    left:-6px;
    border:1px solid #FFF;
    background:#666; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); 
    color:#FFF;
    cursor: pointer;
    /*MEJORAS
    margin-left:-49px;
    border-radius:0px 15px 15px 0px;  
    padding:5px 14px 5px 14px;
    */

   }
   body aside .wcontenido form input[type=button]:hover{
    background:#000; 
    transition:all ease-in .3s;
   }
   
   body aside .wcontenido form label {
    font-weight:bold;
    font-size:10px;
   }