.ideaList{ background-color: rgb(32, 32, 32); width: 100%; height: 100%; .head{ padding-top: 30px; text-align: center; display:block; height: 80px; border-bottom: 2px solid rgba(95, 95, 95, 0.28); p{ text-align: left; font-size: 1.4em; font-weight: bold; padding-left: 20px; float:left; } .newIdea{ float:left; width: 100%; display: flex; text-align: center; font-size: 1em; text-decoration: none; justify-content: center; padding-top: 10px; p{ background: rgb(8, 185, 108); border-radius: 10px; text-align: center; padding:0; width: 50px; cursor:pointer; border: 3px solid transparent; transition: 100ms; transition-timing-function: linear; &:hover{ background: rgb(32, 218, 137); border-color: rgb(147, 253, 207); box-shadow:rgba(161, 159, 159, 0.3) 0px 0px 10px; } } } img{ background-color: white; width: 30px; height: 30px; float:right; margin-right: 20px; } } .ideaListContent{ width: 100%; .idea{ width: calc(100% - 3px); height: 70px; border-bottom: 2px solid rgba(95, 95, 95, 0.28); display: block; transition: 100ms; transition-timing-function: linear; cursor: pointer; border-left: 3px solid transparent; &:hover{ background-color: rgba(95, 95, 95, 0.28); border-left-color: rgb(219, 219, 219); } .title{ font-size: 1.1em; font-weight: bold; padding-left: 5px; padding-right: 30px; padding-top: 10px; width: 90%; float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .description{ font-size: 0.9em; padding-left: 5px; padding-top: 5px; width: 70%; color: rgba(220, 220, 220, 0.738); float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .timestamp{ float: right; width: 60px; margin-top: 10px; font-size: 0.7em; color: rgba(195, 195, 195, 0.572); } } .current{ background-color: rgba(95, 95, 95, 0.28); border-left-color: rgb(219, 219, 219); } } } // Min Width @media (max-width: 1135px) { .ideaList .head { height: 120px; } }