/*
 * The footer's three glyphs -- icon-envelope, icon-phone and icon-warning-sign
 * in layouts/application.html.erb -- referenced a font this bundle never
 * loaded, so they rendered as nothing on the live site. font-awesome is
 * required here now, with icons.css behind it: the vendored CSS re-inherits
 * link underlines onto the glyph, and shipping the font without that repair is
 * how the "icons are never underlined" rule quietly stops holding.
 *
 * The third glyph needed the font *and* a rename. It was written icon-warning,
 * which is Font Awesome 4's name; version 3 is what is vendored here and calls
 * it icon-warning-sign, so that one stayed blank even once the font arrived.
 *
 * The cost is a 41KB woff for three decorative marks. It is charged after
 * first paint -- the stylesheets are linked at the foot of the document, with
 * the above-the-fold CSS inlined in the head -- so it is deferred rather than
 * free. Say the word and the three become Unicode glyphs instead.
 *
 * ApplicationHelper::SITE_STYLESHEETS declares the load order. This file stays
 * last so these site-chrome rules override the component files as before.
 */

/* Ported from billfors.se app/assets/stylesheets/application.css (site chrome:
   front page boxes, footer, header and thumbnail rules). */

html, body, ul, img { margin:0; padding:0; border:0; font-size: 100%; }
/*
body { color: black; font: 1.1em/1.4em 'times new roman',georgia,verdana; }
*/
img { max-width: 100%; }
h1,h2 { font-family: 'times new roman'; font-weight: normal; }
h1 { color: black; font-size: 2em; }
a { color: black; text-decoration: underline; }
a:hover { color: #e9932e; }
address { display: inline; font-size: 0.8em; font-style: italic; }
footer { font: 0.8em verdana; background: #111; color: #aaa; padding: 15px 0px 15px 0px; margin-top: 30px;  width: 100%; min-height: 180px; line-height: 140%; }
footer a { color: white; }

header,footer,.box,.box2,.smallbox,.welcome,.front_house_box { box-sizing: border-box; }

/* .front_house_box { display: inline-block; width: 135px; font-size: 0.9em; }  */
/* .front_house_box address { font-size: 0.8em; height: 40px; background: red; display: block; }  */

.front_house_box { display: block; float: left; width: 135px; font-size: 0.9em; margin: 2px; min-height: 200px; } 
.front_house_box .label { position: absolute; font: normal 0.6em verdana; }
.front_house_box a { color: black; }
.front_house_box a:hover { color: white; }

.rent { float: right; font: 0.8em verdana; text-align: right; }
.not_for_rent { float: right; font: 1.5em verdana; padding: 4px; text-align: right; border-radius: 4px; background: #eee; color: red; }
.apply_button { margin: 30px 0px 20px 0px; text-decoration: none; }

.smallbox {
  min-height: 300px;
  background-image: -webkit-linear-gradient(top, #eee, #ddd);
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
  color: black;
  font-size: 1.2em;
}
.smallbox h3 { color: #e9932e; font-size: 1.4em; font-weight: normal; margin-bottom: 10px; }

.box { background: #e9932e; padding: 10px; min-height: 325px;  }
.box img { margin: 7px; padding: 0px; border-radius: 5px; }
.box img { margin: 1px; padding: 0px; border-radius: 0px; }
.box h2 { margin: 0px; padding: 0px; }

.box2 { background: #541877; padding: 10px; color: white; min-height: 325px; line-height: 1em; box-shadow: 1px 2px 10px 0px #888; }
.box2 h2 { font-weight: normal; }
.box2 a { color: white; font-size: 1em; }
.box2 a:hover { color: #e9932e; }
.box2 small { font-size: 0.8em; color: #bbb; }

#myCarousel { background: #d1c0da; padding: 10px; }

.welcome { background: #2a9337; color: white; padding: 10px; margin-top: 20px; margin-bottom: 20px; }
.welcome p { font-size: 1.1em; }

header { width: 100%; background: #2a9337; margin-bottom: 10px; box-sizing: border-box; }
header h1 { font: 3.5em 'times new roman'; color: white; display: block; margin: 0px; color: white, #146F3A; }
header a { color: black; font: bold 1em arial; text-decoration: none; }
header a:hover { text-decoration: none; }


/*
header ul { float: right; list-style-type: none; }
header ul li { float: left; margin: 10px 20px 0px 0px; padding: 5px 20px 5px 20px; background: white; box-shadow: 0px 1px 4px #444; border-radius: 9px; }
header ul li:hover { background: #eee; box-shadow: 0px 1px 6px #222; }
*/

.thumbnail { width: 150px; height: 200px; background: #dddddd; padding: 10px; margin: 10px; float: left; box-shadow: 1px 1px 10px #444; }
.important_info { font: bold 14px verdana; color: white; background: #459178; display: inline; float: right; padding: 1px; margin-bottom: 4px; }
#top { background: #ddd; }
#top_separator {  width: 100%; border-bottom: #70aa88 10px solid; border-bottom: #146F3A 10px solid; margin: 0px 0px 25px 0px; }