#results { padding: .1em; background: #333350; font-size: 80%; color: white; padding: .6em 0; text-align: center; width: 100%; height: 10em; position: fixed; bottom: 0; left: 0; border-top: 3px solid white; } #results.started { border: none; box-shadow: 1px -7px 20px 2px #ccc; } #results-actions, #results-titles { display: inline-block; float: left; width: 18%; margin: 0; padding: 0 1em; } #results-actions { display: flex; align-items: center; justify-content: space-around; height: 100%; } #toSimulation { font-size: 190%; color: white; background: #4A89DC; padding: .6em .6em; text-decoration: none; border-radius: .2em; position: relative; } #toSimulation i { margin-right: .6em; } #results-titles { color: white; line-height: 1.2em; font-weight: 400; font-size: 120%; text-align: left; } #results-titles h2 { font-size: 250%; margin: .4em 0; } #results-titles p { color: inherit; } #results-titles i { margin: 0 .3em; } #resultText { font-weight: 600; font-size: 100%; } #results ul { display: inline-flex; flex-wrap: wrap; justify-content: space-around; height: 100%; width: 80%; list-style: none; padding-left: 0; margin: 0; } @media (max-width: 1280px) { #results { padding: 0; } #results-titles { width: 100%; text-align: center; } #results-titles p { margin-right: 3em; } #results-titles h2 { display: none; } #results-titles #resultText { font-size: 120% } #results h2 { margin: 0.3em 1em 0 0; display: inline-block; } #results-titles > p { display: inline-block; } #results ul { width: 100%; } } #results li { margin: 1.4em 1em 0; text-align: center; } #results li a { text-decoration: none; } #results .rule-box { padding: 0 1em; color: #333350; background: white; border-radius: 3px; white-space: nowrap; color: #333350; min-width: 15em; } #results li:not(.pointedOut):hover .rule-box { background: #ddd; } #results li.irrelevant .rule-box { background: rgba(255, 255, 255, 0.35); } #results li.pointedOut:not(.irrelevant) .rule-name { color: #4A89DC; } #results li.pointedOut .rule-type { background: #4A89DC; } #results li.pointedOut .rule-box { border-top: .8em solid #4A89DC; } #results li.pointedOut { /* Pour ne pas avoir de décalage dû au border-top */ margin-top: .6em; } #results li.number p { color: #4A89DC; font-weight: bold; } #results .rule-type { background: #333350; color: white; border: none; font-size: 75%; line-height: 2em; font-weight: 800; margin: .6em 0 .1em; } #results li.irrelevant .rule-type { color: rgba(255, 255, 255, 0.35); } #results li.irrelevant .rule-name { text-decoration: line-through; } #results .rule-name { font-size: 150%; } #results li p { margin: 0; padding: 1em 0; font-size: 120%; color: inherit; } #results li.unsatisfied p { font-style: italic; } #results li.irrelevant p { font-weight: 600; } #results li p .figure { font-size: 250%; }