*{ box-sizing: border-box; margin: 0; box-sizing: border-box; } html, body{ height: 100%; font-family: sans-serif; } header{ background: #16a085; color: #ecf0f1; height: 100px; text-align:center; line-height: 100px; } header h1{ display: inline; font-family: FantasqueSansMono, sans-serif; font-size: 60px; font-weight: normal; vertical-align: middle; } header img{ height: 70px; width: auto; vertical-align: middle; } nav{ display: inline-block; height: calc(100% - 150px); width: 200px; vertical-align:top; background-color: #34495e; color: #D0D0D0; padding: 15px; } nav ul{ list-style-type: none; padding: 0; } section{ display: inline-block; height: calc(100% - 150px); width: calc(100% - 200px); vertical-align:top; background-color: #2c3e50; vertical-align:middle; color: #D0D0D0; padding: 15px; overflow: auto; } footer{ background-color: #16a085; text-align : center; height: 50px; line-height: 50px; color: #ecf0f1; } nav .logo img{ width: 50%; height: auto; } #yellow:hover{ fill: #f6b93b; } #blue:hover{ fill: #1e3799; } #red:hover{ fill: #eb2f06; } nav li{ transition: 0.3s; line-height: 1.5em; } nav li:hover{ background-color: rgba(255, 255, 255, 0.3); } .logo{ text-align: center; } section rect, section circle{ transition: 0.3s; fill: #D0D0D0; } a{ color: #C0C0C0; } table{ border-collapse: separate; border-spacing: 0; } table td, table th{ border: solid #C0C0C0 1px; border-bottom: none; border-right: none; padding: 10px; transition: 0.3s; } tr:last-child td, tr:last-child th{ border-bottom: solid #C0C0C0 1px; } td:last-child, th:last-child{ border-right: solid #C0C0C0 1px; } tr:first-child td:first-child, tr:first-child th:first-child{ border-radius: 15px 0 0 0; } tr:first-child td:last-child, tr:first-child th:last-child{ border-radius: 0 15px 0 0; } tr:last-child td:last-child, tr:last-child th:last-child{ border-radius: 0 0 15px 0; } tr:last-child td:first-child, tr:last-child th:first-child{ border-radius: 0 0 0 15px; } tr:nth-child(2n) td, tr:nth-child(2n) th{ background-color: rgba(255, 255, 255, 0.05); } tr:hover td, tr:hover th{ background-color: rgba(255, 255, 255, 0.2); } tr:hover td:hover, tr:hover th:hover{ background-color: rgba(255, 255, 255, 0.4); }