* { box-sizing: border-box; } btn-custom { background-color: hsl(0, 0%, 79%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#134134134", endColorstr="#c9c9c9"); background-image: -khtml-gradient(linear, left top, left bottom, from(#134134134), to(#c9c9c9)); background-image: -moz-linear-gradient(top, #134134134, #c9c9c9); background-image: -ms-linear-gradient(top, #134134134, #c9c9c9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #134134134), color-stop(100%, #c9c9c9)); background-image: -webkit-linear-gradient(top, #134134134, #c9c9c9); background-image: -o-linear-gradient(top, #134134134, #c9c9c9); background-image: linear-gradient(#134134134, #c9c9c9); border-color: #c9c9c9 #c9c9c9 hsl(0, 0%, 68.5%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.69); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a :hover { background-color: lightgreen; text-decoration: none; } li { list-style-type: none; text-color: black; } .liste_regions, .liste_antennes { background-color: lightblue; } .fond { background-image: url("../images/bildreich_1275.jpg"); background-repeat: no-repeat; background-attachment:fixed; background-position: center; background-size: 100% auto; font-family: Bree serif,"Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; } header.header { width: 389px; height: 259px; margin: 0 auto; margin-bottom: 10px; text-align: center; } header.header img { width: 389px; height: 259px; } .logo_toile img, .logo_june img { transition: transform .5s; } .logo_toile img:hover, .logo_june img:hover { transform: scale(1.1) rotate(10deg); } .post-header { width: 820px; height: 80px; margin: 0 auto; color: white; opacity: 0.9; font-family: Bree serif, Arial; font-size: 26px; } #la_page { text-align: center; width: 1174px; min-height: 901px; height:auto; margin-left: auto; margin-right: auto; } .article { width:auto; height:auto; font-size: 24px; } .article2 { width:auto; height:auto; font-size: 24px; } .container { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .records_content th, .records_content2 th{ background-color: lightgray; color: rgba(0,0,0,0.85); } .footer { width:105px; margin: 5px auto; text-align: center; } /******************************************************************/ /* POUR MOBILES */ /******************************************************************/ @media only screen and (max-width:560px) { .fond { background-color: black; background-image: url("../toureiffel.jpeg"); background-repeat: no-repeat; background-attachment: fixed; background-position: left; background-size: cover; } .post-header { width: auto; height: auto; margin-left: 10px; } #la_page { width: auto; height:auto; margin-left: auto; margin-right: auto; } .article { width: auto; height: auto; margin-left: 10px; margin-bottom: 10px; } .article2 { width: auto; height: auto; margin-left: 10px; margin-bottom: 10px; } .container button{ float: left; } /**************************************/ /* Tableaux responsives */ /**************************************/ .table-responsive table, .table-responsive thead, .table-responsive tbody, .table-responsive tr, .table-responsive th, .table-responsive td { display: block; } .table-responsive thead { display: none; } .table-responsive td { padding-left: 95px !important; position: relative; margin-top: -1px; background: #FFF; } .table-responsive td button{ margin-top:-7px; max-height: 30px; } .table-responsive td:nth-child(odd) { background-color: #eee; } .table-responsive td::before { padding: 10px; content: attr(data-label); position: absolute; top: 0; left: 0; width: 85px; bottom: 0; background-color: #000; color: #FFF; display: flex; align-items: center; font-weight: bold; } .table-responsive tr { margin-bottom: 1rem; } .table-responsive th + td { padding-left: 10px; } }