html { background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%); background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%); background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%); } html, body { margin: 0; padding: 0; position: relative; color: #464637; min-height: 100%; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 300; } h1 { color: #FF3F00; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; } ul { margin: 0; padding: 0; list-style: none; } .container { width: 80%; margin: auto; min-width: 1100px; max-width: 1300px; position: relative; } @media (min-width: 750px) and (max-width: 970px){ .container { width: 100%; min-width: 750px; } } .sortable-ghost { opacity: .2; } img { border: 0; vertical-align: middle; } .logo { top: 55px; left: 30px; position: absolute; } .title { color: #fff; padding: 3px 10px; display: inline-block; position: relative; background-color: #FF7373; z-index: 1000; } .title_xl { padding: 3px 15px; font-size: 40px; } .tile { width: 22%; min-width: 245px; color: #FF7270; padding: 10px 30px; text-align: center; margin-top: 15px; margin-left: 5px; margin-right: 30px; background-color: #fff; display: inline-block; vertical-align: top; } .tile__name { cursor: move; padding-bottom: 10px; border-bottom: 1px solid #FF7373; } .tile__list { margin-top: 10px; } .tile__list:last-child { margin-right: 0; min-height: 80px; } .tile__list img { cursor: move; margin: 10px; border-radius: 100%; } .block { opacity: 1; position: absolute; } .block__list { padding: 20px 0; max-width: 360px; margin-top: -8px; margin-left: 5px; background-color: #fff; } .block__list-title { margin: -20px 0 0; padding: 10px; text-align: center; background: #5F9EDF; } .block__list li { cursor: move; } .block__list_words li { background-color: #fff; padding: 10px 40px; } .block__list_words .sortable-ghost { opacity: 0.4; background-color: #F4E2C9; } .block__list_words li:first-letter { text-transform: uppercase; } .block__list_tags { padding-left: 30px; } .block__list_tags:after { clear: both; content: ''; display: block; } .block__list_tags li { color: #fff; float: left; margin: 8px 20px 10px 0; padding: 5px 10px; min-width: 10px; background-color: #5F9EDF; text-align: center; } .block__list_tags li:first-child:first-letter { text-transform: uppercase; } #editable {} #editable li { position: relative; } #editable i { -webkit-transition: opacity .2s; transition: opacity .2s; opacity: 0; display: block; cursor: pointer; color: #c00; top: 10px; right: 40px; position: absolute; font-style: normal; } #editable li:hover i { opacity: 1; } #filter {} #filter button { color: #fff; width: 100%; border: none; outline: 0; opacity: .5; margin: 10px 0 0; transition: opacity .1s ease; cursor: pointer; background: #5F9EDF; padding: 10px 0; font-size: 20px; } #filter button:hover { opacity: 1; } #filter .block__list { padding-bottom: 0; }