body{ font-family: Tahoma; color: #444; letter-spacing: 1px; } h1, h2{ font-weight: normal; } #wrapper{ width: 90%; max-width: 960px; margin: 20px auto; border-radius: 6px; box-shadow: 0px 1px 6px rgba(0,0,0,0.2); box-sizing: border-box; padding: 0 0 20px; overflow: hidden; border: 1px solid lightgray; } #page-banner{ background: #eee ; padding: 10px 0; } #page-banner h1, #page-banner p{ width: 100%; text-align: center; margin: 10px 0; } #page-banner input{ width: 90%; max-width: 300px; margin: 20px auto; display: block; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; color: #444; } #book-list, #add-book, #tabbed-content{ margin: 30px; } #book-list ul, #tabbed-content ul{ list-style-type: none; padding: 0; } #book-list li{ padding: 20px; border-left: 5px solid #ddd; margin: 20px 10px; } #book-list li:hover{ border-color: #9361bf; } .delete{ float: right; background: #9361bf; padding: 6px; border-radius: 4px; cursor: pointer; color: white; } .delete:hover{ background: #333; } #add-book{ width: 400px; margin: 0 auto; } #add-book input{ display: block; margin: 20px 0; padding: 10px; border: 1px solid #ccc; font-size: 16px; border-radius: 4px 0 0 4px; box-sizing: border-box; width: 300px; float: left; } #add-book button{ border: 1px solid #9361bf; background: #9361bf; padding: 10px 20px; font-size: 16px; display: inline-block; margin: 0; border-radius: 0 4px 4px 0; cursor: pointer; width: 100px; float: left; margin: 20px 0; border-left: 0; color: white; } #add-book:after{ content: ''; display: block; clear: both; } /* #tabbed-content li{ display: inline-block; padding: 10px 14px; background: #ddd; border-radius: 4px; cursor: pointer; margin-right: 10px; } #tabbed-content .tab{ display: none; border: 1px solid #ddd; padding: 0 10px; border-radius: 4px; } #tabbed-content .tab.active{ display: block; } */