/*
 * 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 ad=d 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
 */
 body, body > p, body > ol, body > ul, body > td {margin: 8px !important}

 #banner {
   position: relative;
   min-height: 40px;
   background: #9c9;
   padding: 10px;
   border-bottom: 2px solid;
   font: small-caps 40px/40px "Times New Roman", serif;
   color: #282;
   text-align: center;

   img {
     position: absolute;
     top: 0;
     left: 0;
     width: 192px;
   }
 }

 #notice {
   color: #000 !important;
   border: 2px solid red;
   padding: 1em;
   margin-bottom: 2em;
   background-color: #f0f0f0;
   font: bold smaller sans-serif;
 }

 #notice:empty {
   display: none
 }

 #columns {
   background: #141;
   display: flex;

   #main {
     padding: 1em;
     background: white;
     flex: 1;
   }

   #side {
     padding: 1em 2em;
     background: #141;

     form, div {
       display: inline;
     }

     input {
       font-size: small;
     }

     #cart {
       font-size: smaller;
       color: white;

       table {
         border-top: 1px dotted #595;
         border-bottom: 1px dotted #595;
         margin-bottom: 10px;
       }
     }

     ul {
       padding: 0;

       li {
         list-style: none;

         a {
           color: #bfb;
           font-size: small;
         }
       }
     }
   }
 }

 @media all and (max-width: 800px) {
   #columns {
     flex-direction: column-reverse;
   }
 }

 @media all and (max-width: 500px) {
   #banner {
     height: 1em;
   }

   #banner .title {
     display: none;
   }
 }