Layout cinza

by gsguma

HTML

<!--[if IE 8]>
<style type="text/css">
    select { min-width:180px; }
</style>
<![endif]-->

<form id="formEndereco" action="endereco_controller" method="post">
    <div class="label">CEP: </div>
    <div class="field"><input type="text" name="cep" value="" /></div><br />                        
    
    <div class="label">Estado: </div>
    <div class="field">
        <select name="estado">
            <option value="">-- Escolha o estado --</option>
            <option value="rs" >RS</option>
            <option value="rj" >RJ</option>
            <option value="sp" >SP</option>
        </select>
    </div><br />            
    
    <div class="label">Cidade: </div>
    <div class="field"><input type="text" name="cidade" value="" /></div><br />
    <div class="label">&nbsp;</div>
    <div class="field">
        
        <input id="btnSave"   type="button" value="Salvar"   />
        
        <input id="btnCancel" type="button" value="Cancelar" rel="" />
    </div>
</form>

<br />

<table class="list">
    <thead>                
        <tr>
            <th>Código</th>
            <th>Usuário</th>
            <th>DDD</th>
            <th>Telefone</th>
        </tr>
    </thead>
    <tbody>    
        <tr>
            <td class="codigo">3</td>
            <td>usuario</td>
            <td>51</td>
            <td>12312312</td>               
        </tr>
        <tr class="even">
            <td class="codigo">5</td>
            <td>usuario</td>
            <td>51</td>
            <td>21321231</td>            
        </tr>  
        <tr>
            <td class="codigo">3</td>
            <td>usuario</td>
            <td>51</td>
            <td>12312312</td>               
        </tr>
        <tr class="even">
            <td class="codigo">5</td>
            <td>usuario</td>
            <td>51</td>
            <td>21321231</td>            
        </tr>  
        <tr>
            <td class="codigo">3</td>
            <td>usuario</td>
            <td>51</td>
...

CSS

body { font-family:Arial,Helvetica,sans-serif; font-size:75%; }
h1 { margin-bottom:0 }
img { border:0 }
a { text-decoration:none }

table.list { border-collapse:collapse; border:1px solid #C0C0C0; width:100% }
table.list thead tr th { padding:05px; border:1px solid #C0C0C0; background:#858585; color:#fff; text-align:left }
table.list tbody tr td { padding:05px; border:1px solid #C0C0C0}
/*table.list tbody tr:nth-child(even),*/ .list tbody tr.even { background:#F2F2F2 }
table.list tbody tr:hover { background:#c5c5}

div.label { margin: 2px 0; width:100px; font-weight:bold; padding:8px 10px 0 10px; float:left; display:inline; text-align:right }
div.field { width:200px; display:inline }

input[type=text],
input[type=email],
input[type=password],
select,
textarea { min-width:180px; outline:0 none; margin:5px 0; padding:5px; border:1px solid #C0C0C0; -webkit-border-radius:2px; border-radius:2px; -webkit-box-shadow:inset 2px 2px 5px 2px #e8e8e8; box-shadow:inset 2px 2px 5px 2px #e8e8e8 }

select { min-width: 191px }


input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
select:hover,
textarea:focus { border-color:#014A8A }

input[type=button], 
input[type=submit], 
input[type=reset],
button { 
    outline:0 none; 
    margin:0; 
    padding:5px; 
    height:30px; 
    min-width:70px; 
    font-weight:bold;    
    cursor:pointer;
    color:#fff;
    background:#858585;
    border:1px solid #858585; 
    -webkit-border-radius:2px; 
    border-radius:2px; 
    -webkit-box-shadow:inset 2px 2px 5px 2px #C0C0C0; 
    box-shadow:inset 2px 2px 5px 2px #C0C0C0;
}

input[type=button]:hover, 
input[type=submit]:hover, 
input[type=reset]:hover,
button:hover { 
    background:#858585;
    border:1px solid #858585; 
    -webkit-box-shadow:inset 2px 2px 5px 2px #e8e8e8; 
    box-shadow:inset 2px 2px 5px 2px #e8e8e8;
}

input[type=button]:active, 
input[type=submit]:active, 
input[type=reset]:active,
button:active { 
    color:#808080;
    background:#C0C0C0;
...