$black: #000; $white: #fff; $link: #06581f; $packt: #f79321; /*************************************** Default Styles ***************************************/ html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: $black; background: $white; } #container { font-size: 1.2em; margin: 10px 2em; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } code { font-size: 1.2em; } a { color: $link; } /*************************************** Chapter Styles ***************************************/ ul#books { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px; overflow: hidden; } ul#books li { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px; background-color: $packt; position: relative; } ul#books li img { position: absolute; left: 0; top: 0; width: 300px; height: 210px; } ul#books li .title { margin-left: 300px; padding: 10px; width: 180px; font-weight: bold; font-size: 1.2em; background-color: $black; color: $white; overflow: hidden; } ul#books li .author { margin-left: 300px; padding: 10px 10px 0 10px; width: 180px; font-weight: bold; background-color: #F79321; color: $white; } #books-controls { margin: 10px 0; width: 500px; } #books-controls button { margin: 0 10px 10px 0; float: left; } #books-controls #slider { clear: left; margin: 10px 0; } h1 { text-align: center; border: 0 solid $white; width: 500px; margin-bottom: 20px; } h1.highlighted { border: 10px solid #F79321; padding: 10px; width: 460px; margin-bottom: 0; background-color: $black; color: $packt; } #books .ui-resizable-s { bottom: 0; } .ui-content img { display: block; } .ui-content .title { padding: 10px; margin: 0; width: 280px; font-weight: bold; font-size: 18px; background-color: $packt; color: $white; text-shadow: none; } .ui-content .author { padding: 10px; margin: 0; width: 280px; font-weight: bold; font-size: 14px; background-color: $packt; color: $white; text-shadow: none; }