postolibero* {margin: 0; padding: 0; border: 0; outline: 0;}
body,html{height:100%;margin:0;background-color:#fff;}
html{font-size:18px; font-family: 'Montserrat', sans-serif; font-style:normal; font-weight:normal; color:#444444;}

.postolibero {background-color:#FF0}

/* IE6 hack */
* html #container {height: 100%;text-align:center;}

::selection {color:#c13450; background:#f0f4f4;}
::-moz-selection {color:#c13450; background:#f0f4f4;}

.img {border: none;} 
a.img:link, a.img:hover {border-bottom: none;} 
strong, b { font-weight: 700; } 

#content { width:100%; text-align:center;  height: auto; margin: 0 auto; background-color: #f2e5d9; }

#logo { text-align:left; position:fixed; z-index:1; padding: 0 0 0 0; background-color: #ffffff; width:100%; }
.logo { margin: 0 auto; }

#menu-ds { float:right; padding: 10px; margin-top: 28px;}
#menu-ds2 { float:right; padding: 10px 0 10px 0; margin-top: -28px;}

/* link MENU in alto a destra */
a.menu:link, a.menu:visited { text-decoration: none ; color:#666666; border-bottom:1px solid #fff; padding:3px 6px 3px 6px; font-size: 18px; margin-left: 12px;} 
a.menu:hover, a.no:link { text-decoration: none ; color:#000000; border-bottom:1px solid #666; padding:3px 6px 3px 6px; font-size: 18px; margin-left: 12px;}

/* link RUSSO in alto a destra */
a.russo:link, a.russo:visited { text-decoration: none ; color:#f2e5d9; border-bottom:1px solid #fff; font-weight:bold; padding:6px 12px 6px 12px; font-size: 18px; margin-left: 12px; background-color: #670e34; border-radius: 3px;} 
a.russo:hover { text-decoration: none ; color:#ffffff; border-bottom:1px solid #fff; font-weight:bold; padding:6px 12px 6px 12px; font-size: 18px; margin-left: 12px; background-color: #670e34; border-radius: 3px;}

/* link CATEGORIE capi maglia */
a.cat:link, a.cat:visited { text-decoration: none ; color:#f2e5d9; border-bottom:1px solid #fff; font-weight:bold; padding:6px 12px 6px 12px; font-size: 18px; margin-left: 12px; background-color: #666666; border-radius: 3px;} 
a.cat:hover { text-decoration: none ; color:#ffffff; border-bottom:1px solid #fff; font-weight:bold; padding:6px 12px 6px 12px; font-size: 18px; margin-left: 12px; background-color: #999999; border-radius: 3px;}

#foto { z-index:-1; width:100%;}
.foto1, .foto2, .foto3 { max-width: 100%; height: auto; margin: 0; }

#words {width: 1000px; margin: 0 auto; text-align:left; 
line-height: 1.5; font-size:20px; font-weight:normal; font-style:normal; }
#words2 {width: 1000px; margin: 0 auto; text-align:left; padding-top: 100px;
line-height: 1.5; font-size:20px; font-weight:normal; font-style:normal; }

/* link nel testo */
a.tre:link { text-decoration: none ; color:#670e34; border-bottom:1px solid #eaaeba; padding:2px; } 
a.tre:visited { text-decoration: none ; color:#670e34; border-bottom:1px solid #eaaeba; padding:2px; } 
a.tre:hover { text-decoration: none ; color:#670e34; border-bottom:1px solid #ffffff; padding:2px; } 

#cit {margin: 0 auto; text-align:center; line-height: 1.5; color:#670e34; border-radius: 10px; padding: 30px 90px 30px 90px; font-size: 22px; background-color: #670e34;}

#box-testo {margin: 0 auto; text-align:left; line-height: 1.5; color:#666666; border-radius: 0px; padding: 20px 30px 20px 30px; font-size: 19px; background-color: #none; border: 1px solid #ffffff; }
#box-testo2 {margin: 0 auto; text-align:left; line-height: 1.5; color:#666666; border-radius: 0px; padding: 20px 30px 24px 30px; font-size: 19px; background-color: #none; border: 1px solid #ffffff; }

#box-testo-vert1 {float: left; width: 420px; margin: 30px 8px 8px 0; text-align:left; line-height: 1.5; color:#666666; border-radius: 0px; padding: 20px 30px 21px 30px; font-size: 18px; background-color: #none; border: 1px solid #ffffff; }
#box-testo-vert2 {float: left; width: 420px; margin: 30px 0 8px 8px; text-align:left; line-height: 1.5; color:#666666; border-radius: 0px; padding: 20px 30px 20px 30px; font-size: 18px; background-color: #none; border: 1px solid #ffffff; }

#box-donna {float: left; width: 442px; margin: 16px 8px 8px 0; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }
#box-uomo {float: left; width: 442px; margin: 16px 0 8px 8px; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }

#box-sciarpe {float: left; width: 199px; margin: 8px 4px 8px 0; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }
#box-berrette {float: left; width: 199px; margin: 8px 4px 8px 4px; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }
#box-tifosi {float: left; width: 199px; margin: 8px 4px 8px 4px; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }
#box-reversibili {float: left; width: 199px; margin: 8px 0 8px 4px; text-align:center; padding: 20px 20px 30px 20px; border: 1px solid #999999; }
#box-tifosi2 {float: left; width: 199px; margin: 8px 4px 8px 4px; text-align:center; padding: 20px 20px 35px 20px; border: 1px solid #999999; }
#box-reversibili2 {float: left; width: 199px; margin: 8px 0 8px 4px; text-align:center; padding: 20px 20px 35px 20px; border: 1px solid #999999; }

.fotobox { max-width: 70%; width: auto; height: auto; margin: 5px 0 0 0; }
.fotobox-v { max-width: 100%; width: auto; height: auto; margin: 5px 0 0 0; }
.fotobox-o { max-width: 100%; width: auto; height: auto; margin: 0 0 0 0; border-bottom: none;}
.fotobox-o2 { max-width: 100%; width: auto; height: auto; margin: 0 0 3px 0; border-bottom: none;}
.foto-box { max-width: 100%; height: auto; margin: 10px 0 0 0; }
.foto-box2 { max-width: 100%; height: auto; margin: 10px 0 0 0; }

/* pulsante */
a:link.pulsante, a:visited.pulsante {
text-decoration: none ; padding: 10px; color:#f2e5d9; background-color: #670e34; border-radius: 5px; border:none; font-size:21px; }
a:hover.pulsante { text-decoration: none ; color: #ffffff; }
.no-pulsante {
text-decoration: none ; padding: 10px; color:#ffffff; background-color: #670e34; border-radius: 5px; border:none; font-size:21px; }

/* pulsante testo piccolo*/
a:link.pulsante2, a:visited.pulsante2 {
text-decoration: none ; padding: 15px 12px 15px 12px; color:#f2e5d9; background-color: #670e34; border-radius: 5px; border:none; font-size:12px; }
a:hover.pulsante2 { text-decoration: none ; color: #ffffff; }
.no-pulsante {
text-decoration: none ; padding: 15px 12px 15px 12px; color:#ffffff; background-color: #670e34; border-radius: 5px; border:none; font-size:12px; }

h1 {font-size: 28px; color: #670e34; text-align: center; margin: 0 0 18px 0; }
h2 {font-size: 23px; color: #670e34; margin: 0 0 4px 0; }
h3 {font-size: 25px; color: #670e34; margin: 4px 0 10px 0; text-align: center;}
h4 {font-size: 21px; color: #670e34; margin: 4px 0 10px 0; text-align: center; font-style:bold; font-weight:bold;}

#io { text-align:center;} 
.io { border-radius: 10px;}

#footer {width: 100%; height:348px; text-align:center; background-color:#ffffff; margin-bottom: 20px; border-bottom: 1px solid #e6ccb3;}
#footer-home {width: 100%; height:468px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer-home-ru {width: 100%; height:598px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer-home-ru2 {width: 100%; height:728px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer-home-ru3 {width: 100%; height:628px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer-lingue {width: 100%; height:558px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer-canto {width: 100%; height:755px; text-align:center; background-color:#ffffff; margin-top: 68px; border-top: 2px solid #e6ccb3;}
#footer2 {width: 1000px; text-align:left; margin: 0 auto; padding-left: 10px; background-color:none; color:#670e34; 
line-height: 1.5; padding: 30px 0 0 0; font-family: 'Montserrat', sans-serif; font-weight:normal; font-size:17px; }

#foot1 {width: 250px; float: left; padding-right: 10px; }
#foot2 {width: 650px; float: right; padding-left: 20px; border-left: 1px solid #e6ccb3;}

#footer3 {width: 99%; text-align:right; font-size: 14px; clear: both; padding: 30px 0 0 0; margin: 0;}
#social {text-align:center;}

/* link decodo in basso*/
a:link { text-decoration: none ; color:#666666; border-bottom:1px solid #999999; padding:1px; } 
a:visited { text-decoration: none ; color:#666666; border-bottom:1px solid #999999; padding:1px; } 
a:hover { text-decoration: none ; color:#000000; border-bottom:1px solid #666666; padding:1px; } 


#box-rece { width: 1000px; margin: 0 auto; padding: 0; text-align:center; 
color:#666666; font-size: 18px; margin-bottom: 0; }
.rece-data { color:#999999; font-size: 17px; }

#box-rece1, #box-rece2 { float:left; text-align:left; line-height: 1.5; 
width: 454px; height:auto; padding: 30px 20px 20px 20px; border: 1px solid #670e34; }
.br-rece, br2 {clear:both;}
#box-rece1 {margin: 3px 4px 6px 0px;}
#box-rece2 {margin: 3px 0px 6px 4px;}

#recensioni { width: 80%; margin: 0 auto; padding: 30px 40px 0px 40px; text-align:left; 
color:#666666; font-size: 18px; border: 1px solid #999999; }
#rece-firma { width: 100%; color:#999999; text-align: center; font-style: italic;}

/* form PRENOTAZIONE consulenza */
input, select, option {padding: 4px; margin: 4px 0 4px 0; width:400px; height:30px; background-color: white; }
select {height:40px; font-size:18px; font-style:normal; font-weight:normal; color:#444444; }
textarea {padding: 10px; margin: 4px 0 4px 0; width:700px; height:200px; background-color: white; }
.checkbox {margin: 4px 0 4px 0; width:20px; height:20px; background-color: white; }
button { padding: 10px; color:#f2e5d9; background-color: #670e34; border-radius: 5px; border:none; font-size:21px; font-family: 'Montserrat', sans-serif; font-style:normal; font-weight:normal; cursor: pointer; }

/* tre BOX blog */
#box-home, #box-home2 { width: 1000px; margin: 0 auto; text-align:center; font-size: 16px; padding: 0 0 14px 0; }
#box-scheda { float:left; line-height: 1.2; text-align:center; width: 280px; height:auto; padding: 20px; border: 1px solid #999999; margin: 8px 4px 8px 4px; }
.flex { max-width: 100%; }
.frecce { clear:both; padding: 30px 0 10px 0; }

#box-modello { width: 1000px; margin: 0 auto; padding: 30px 0 14px 0; text-align:center; height:auto; }
#categorie { text-align: center; margin: 0 0 6px 0; }
#box-scheda1 { float:left; text-align:center; width: 350px; height:auto; padding: 20px 20px 14px 20px; border: 1px solid #e6ccb3; margin: 8px 4px 8px 4px; }
#box-scheda2 { float:left; line-height: 1.2; text-align:left; width: 530px; height:auto; padding: 0px 0px 0px 40px; margin: 8px 4px 8px 4px; }
.minibox { float:left; text-align:center; width: 80px; height:auto; 
padding: 4px 4px 0px 4px; border: 1px solid #e6ccb3; margin: 4px; }
.hr { width: 100%; height: 1px; margin: 16px 0 6px 0; }

/* BACK */
.back-right { float:right; }
.input-back {padding: 4px; margin: 4px 0 4px 0; width:400px; height:26px; border: 1px solid #999999; }
.textarea-back {padding: 10px; margin: 4px 0 4px 0; width:500px; height:30px; border: 1px solid #999999; }
.textarea2-back {padding: 10px; margin: 4px 0 4px 0; width:600px; height:300px; border: 1px solid #999999; }
.select-back {height:40px; font-size:18px; font-style:normal; font-weight:normal; color:#444444; border: 1px solid #999999; }
.select-back2 {height:36px; font-size:18px; font-style:normal; font-weight:normal; color:#444444; border: 1px solid #999999; }
.input-back2 {padding: 4px; width:80px; height:36px; font-size:18px; font-style:normal; font-weight:normal; color:#ffffff; cursor:pointer; background-color: #670e34; border-radius: 5px; border:none; }

table { width: 1000px; margin: 20px 0 20px 0; font-size: 14px;}
th, td { border: 1px solid #ccc; text-align: left; padding: 6px;} 
thead { background-color: #f5f5f5; } 

.color1, .color2, .color3 { float: left; text-align: center; height: auto; width: 100px; border: 1px solid #f2f2f2; padding: 6px; font-size: 14px;}
.color1, .lingue { background-color: #ffd9b3; }
.color2, .maglia { background-color: #d1e0e0; }
.color3, .canto { background-color: #b3e6b3; }
#colors { text-align: center; margin: 0 auto; width: 350px; background-color: #000;}

.fre-sin { float:left; width: 33%; text-align:left; }
.fre-cen { float:left; width: 33%; padding-top: 30px; text-align:center; }
.fre-des { float:right; width: 33%; text-align:right; }

.area-left { float:left; padding: 8px; text-align: center; background-color: #f2f2f2; border: 3px solid #fff; margin: 0; width:30%;}
.area-right { float:left; padding: 8px; text-align: center; background-color: #f2f2f2; border: 3px solid #fff; margin: 0 0 20px 0; width:20%;}

.foto2, .foto3, .br, .br2, .foto-box2 { display:none;}

/* -----------------------------------
TABLET landscape
------------------------------------ */
@media only screen and (min-width: 1000px) and (max-width: 1100px) {

#words, #words2, #footer2 {width: 900px;}

#box-testo-vert1 {float: left; width: 384px; margin: 30px 4px 8px 0; padding: 20px 30px 20px 30px;}
#box-testo-vert2 {float: left; width: 384px; margin: 30px 0 8px 4px; padding: 20px 30px 20px 30px; }
#box-home { width: 680px; }
#box-donna {float: left; width: 390px; margin: 16px 8px 8px 0; }
#box-uomo {float: left; width: 390px; margin: 16px 0 8px 8px; }
#box-home2 { width: 600px; }
#box-sciarpe {float: left; width: 250px; margin: 8px 4px 8px 0; }
#box-berrette {float: right; width: 250px; margin: 8px 0 8px 4px; }
#box-tifosi {float: left; width: 250px; margin: 8px 4px 8px 0; }
#box-reversibili {float: right; width: 250px; margin: 8px 0 8px 4px; }

#footer-home {height:550px;}
#footer-home-ru {height:680px;}
#footer-home-ru2 {height:800px;}
#footer-home-ru3 {height:680px;}
#footer-lingue {height:610px;}
#footer-canto {height:810px;}
#footer {height:520px;}
#foot1 {width: 30%; }
#foot2 {width: 61%;}
#box-rece { width: 900px; }
#box-rece1, #box-rece2 { width: 404px; }

#box-modello { width: 900px; }
#box-scheda2 { float:left; width: 430px; height:auto; padding: 0px 0px 0px 20px; }

table { width: 100%; }
.area-left { margin: 0; width:50%;}
.area-right { margin: 0 0 20px 0; width:50%;}

.br2 { display:inline; }

}

/* -----------------------------------
MEDIUM
------------------------------------ */
@media only screen and (min-width: 750px) and (max-width: 1000px) {


#words, #words2 { width: 90%; margin: 0 auto;}
#words2 { padding-top: 10px; padding-bottom: 24px;}
#logo { text-align:center; position:relative; margin-left: 0px; padding: 10px 0 10px 0;}

#menu-ds, #menu-ds2 { text-align:center; float:none; padding: 10px; margin-top: 6px; margin-bottom: 16px;}

#box-testo-vert1 {float: none; width: 90%; padding: 20px 30px 20px 30px; margin: 0 auto; margin-top: 30px;}
#box-testo-vert2 {float: none; width: 90%; padding: 20px 30px 20px 30px; margin: 0 auto; margin-top: 30px;}
#box-home { width: 680px; }
#box-donna {float: none; width: 442px; margin: 0 auto; margin-top: 30px;}
#box-uomo {float: none; width: 442px; margin: 0 auto; margin-top: 30px;}
#box-home2 { width: 486px; }
#box-sciarpe {float: left; width: 192px; margin: 8px 2px 8px 0; }
#box-berrette {float: right; width: 192px; margin: 8px 0 8px 2px; }
#box-tifosi {float: left; width: 192px; margin: 8px 2px 8px 0; }
#box-reversibili {float: right; width: 192px; margin: 8px 0 8px 2px; }

.foto1, .foto3, .foto-box2, .br-rece { display:none;}
.foto2 { display:inline; margin: -22px 0 0 0;}

.fotobox { max-width: 90%; width: auto; height: auto; margin: 5px 0 0 0; }

#footer {height:auto; margin-top: -23px;}
#footer-lingue {height:auto; margin-top: -23px;}
#footer-canto {height:auto; margin-top: -23px;}
#footer-home, #footer-home-ru, #footer-home-ru2, #footer-home-ru3 {height:auto; margin-top: -23px;}
#footer2 {width: 90%; text-align:left; padding-left: 0px; }

#foot1 {width: 95%; float: none; padding-right: 0px; padding-bottom: 30px; text-align:center; margin: 0 auto;}
#foot2 {width: 95%; float: none; border-left: 0; border-top: 1px solid #e6ccb3; padding-top: 23px; padding-bottom: 33px; padding-left: 0px; text-align:center; margin: 0 auto; text-align:left;}

#footer3 {text-align:center;}
#social {margin-bottom: 20px;}

#box-rece {width: 90%; margin: 0 auto; text-align: center; margin-bottom: 0;}
#box-rece1, #box-rece2 {float: none; margin: 0 auto; margin: 12px 0px 12px 0px; width: 95%; height:auto; }

textarea {width:500px; }

#box-modello { width: 90%; }
#box-scheda1 { float:none; margin: 0 auto; margin-bottom: 32px; }
#box-scheda2 { float:none; margin: 0 auto; width: 530px; padding: 0px 0px 0px 0px; margin-bottom: 8px; }
.hr { margin: 32px 0 12px 0; }

#no-more-tables table, #no-more-tables2 table, 
#no-more-tables thead, #no-more-tables2 thead,
#no-more-tables tbody, #no-more-tables2 tbody,
#no-more-tables th, #no-more-tables2 th, 
#no-more-tables td, #no-more-tables2 td,
#no-more-tables tr, #no-more-tables2 tr { display: block; }

table { width: 100%; }

#no-more-tables thead tr, #no-more-tables2 thead tr { position: absolute; top:-9999px; left:-9999px; } 
#no-more-tables tr, #no-more-tables2 tr { border: 1px solid #ccc; padding: 6px;} 

#no-more-tables td { border: none; border-bottom: 1px solid #eee; padding: 6px; padding-left: 5%; 
position: relative; white-space: normal; text-align:left; } 
#no-more-tables2 td { border: none; border-bottom: 1px solid #eee; padding: 6px; padding-left: 40%; 
position: relative; white-space: normal; text-align:left; } 

#no-more-tables td:before { display: none; } 
#no-more-tables2 td:before { position: absolute; top: 0; left: 0; width: 35%; content: attr(data-title);  
white-space: nowrap; text-align:left; font-weight: bold; background-color: #f5f5f5; padding: 6px;} 

.area-left { margin: 0; width:50%;}
.area-right { margin: 0; width:50%;}

.br2 { display:inline; }

}


/* -----------------------------------
SMARTPHONE 
------------------------------------ */
@media only screen and (min-width: 0px) and (max-width: 749px) {

.br, .br2, .foto-box2 { display:inline;}
#words, #words2 {width: 90%; margin: 0 auto; text-align: center;}
#words2 {padding-top: 10px; padding-bottom: 24px;}
#cit {padding: 30px 60px 30px 60px;}
#logo { text-align:center; position:relative; margin-left: 0px; padding: 10px 0 10px 0;}
.logo { max-width: 95%;}

#box-testo-vert1 {float: none; width: 85%; padding: 20px 30px 20px 30px; margin: 0 auto; margin-top: 30px;}
#box-testo-vert2 {float: none; width: 85%; padding: 20px 30px 20px 30px; margin: 0 auto; margin-top: 30px;}
#box-donna {float: none; width: 85%; margin: 0 auto; margin-top: 30px;}
#box-uomo {float: none; width: 85%; margin: 0 auto; margin-top: 30px;}
#box-home2 { width: 292px; }
#box-sciarpe {float: none; width: 250px; margin: 8px 0 8px 0; }
#box-berrette {float: right; width: 250px; margin: 8px 0 8px 0; }
#box-tifosi {float: left; width: 250px; margin: 8px 0 8px 0; }
#box-reversibili {float: right; width: 250px; margin: 8px 0 8px 0; }
#box-tifosi2 {float: left; width: 250px; margin: 8px 0 8px 0; }
#box-reversibili2 {float: right; width: 250px; margin: 8px 0 8px 0; }

#menu-ds, #menu-ds2 { text-align:center; float:none; padding: 10px; margin-top: 20px; margin-bottom: 30px;}

a.menu:link { margin-left: 0;} 
a.menu:visited { margin-left: 0;} 
a.menu:hover { margin-left: 0;}

h1 {font-size: 32px;}

.foto1, .foto2, .foto-box, .br-rece { display:none;}
.foto3 { display:inline; margin: -44px 0 0 0;}

.fotobox { max-width: 100%; width: auto; height: auto; margin: 5px 0 0 0; }

#footer {height:auto; margin-top: -23px;}
#footer-lingue {height:auto; margin-top: -23px;}
#footer-canto {height:auto; margin-top: -23px;}
#footer-home, #footer-home-ru, #footer-home-ru2, #footer-home-ru3 {height:auto; margin-top: -23px;}

#footer2 {width: 90%; text-align:left; padding-left: 0px; }

#foot1 {width: 95%; float: none; padding-right: 0px; padding-bottom: 30px; text-align:center; margin: 0 auto;}
#foot2 {width: 95%; float: none; border-left: 0; border-top: 1px solid #e6ccb3; padding-top: 23px; padding-bottom: 33px; padding-left: 0px; text-align:center; margin: 0 auto; text-align:left;}

#footer3 {margin: 0 auto; text-align:center; max-width: 90%;}
#social {margin-bottom: 20px;}

#box-rece {width: 90%; margin: 0 auto; text-align: center; margin-bottom: 0;}
#box-rece1, #box-rece2 {float: none; margin: 0 auto; margin: 12px 0px 12px 0px; width: 90%; height:auto; }

input {width:98%; }
select, option {width:100%; }
textarea {width:95%; height:200px; }

#box-home { width: 320px; }
#box-scheda { float:none; }

#box-modello { width: 100%; }
#box-scheda1 { float:none; margin: 0 auto; margin-bottom: 32px; }
#box-scheda2 { float:none; margin: 0 auto; width: 95%; padding: 0px 0px 0px 0px; margin-bottom: 8px; }
.hr { margin: 32px 0 12px 0; }

.back-right { float:none; margin-top: 30px; }
.input-back {width:95%; }
.textarea-back {width:93%; }
.textarea2-back {width:93%; }
.select-back {width:98%; }

#no-more-tables table, #no-more-tables2 table, 
#no-more-tables thead, #no-more-tables2 thead,
#no-more-tables tbody, #no-more-tables2 tbody,
#no-more-tables th, #no-more-tables2 th, 
#no-more-tables td, #no-more-tables2 td,
#no-more-tables tr, #no-more-tables2 tr { display: block; }

table { width: 100%; }

#no-more-tables thead tr, #no-more-tables2 thead tr { position: absolute; top:-9999px; left:-9999px; } 
#no-more-tables tr, #no-more-tables2 tr { border: 1px solid #ccc; padding: 6px;} 

#no-more-tables td { border: none; border-bottom: 1px solid #eee; padding: 6px; padding-left: 5%; 
position: relative; white-space: normal; text-align:left; } 
#no-more-tables2 td { border: none; border-bottom: 1px solid #eee; padding: 6px; padding-left: 30%; 
position: relative; white-space: normal; text-align:left; } 

#no-more-tables td:before { display: none; } 
#no-more-tables2 td:before { position: absolute; top: 0; left: 0; width: 25%; content: attr(data-title);  
white-space: nowrap; text-align:left; font-weight: bold; background-color: #f5f5f5; padding: 6px;} 

.area-left { float: none; margin: 0; width:80%; margin: 0 auto;}
.area-right { float: none; margin: 0 auto; width:80%;}

}