/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 html, body {
  margin: 0;
  padding: 0;
  background: White;
  color: DarkSlateGrey;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 10pt;
}
div.main {
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  width:  96%;
}
a {
  background: transparent;
  color: maroon;
  text-decoration: underline;
  font-weight: bold;
}
h1 {
  margin: 0 0 0;
  padding: 10px;
  text-align: center;
  font-size: 2em;
  font-style: normal;
}
h1.title {
  margin: 0 0 0;
  text-align: center;
  font-size: 2em;
  font-style: normal;
}
table#movies {
  margin: 10px;
  border-collapse: collapse;
  width: 100%;
  border-bottom: 2px solid black;
}
table#movies th {
  border: 2px solid white;
  font-weight: bold;
  background-color: wheat;
}
table#movies th, table#movies td {
  padding: 4px;
  text-align: left;
}
#notice, #warning {
  background: rosybrown;
}
form label {
  display: block;
  line-height: 25px;
  font-weight: bold;
  color: maroon;
}

div.header {
  width: 100%;
  height: 75px;
}

div.header h1.app-title {
  padding-left: 12px;
  color: maroon;
  font-size: 150%;
  text-decoration: none;
}

div.header h1.app-title a {
  padding-left: 12px;
  padding-right: 12px;
  color: maroon;
  text-decoration: none;
  font-size: 150%;
}

div.header h1.app-title a:hover {
  background-color: #dddddd;
  padding-left: 12px;
  color: orange;
  font-size: 150%;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  position: fixed;
  width: 100%;
}

ul.menu li {
  display: inline;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  float: left;
}

ul.menu li.menu-item {
  margin-top: 10px;
}

ul.menu li a {
  font-size: 120%;
  display: block;
  padding: 8px;
  text-decoration: none;
  background-color: #dddddd;
}

/* Change the link color on hover */
ul.menu li a:hover {
  background-color: orange;
  text-decoration: none;
  color: white;
}