learning_jquery/Chapter 7/07.scss

$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;
}