/* StitchYaWitch - first draft
   Plain, old-school CSS: floats and inline-blocks, no frameworks.
   Colours are all in this block, so they are easy to change. */

/* Colours used below:
   brown paper  #7b5a4d
   dark brown   #5e4136
   cream        #f6f1ea
   coral        #e8998d
   teal         #8fd9d6
   ink          #2b2b2b
*/

/* padding and border are included in widths, so percentage columns add up */
.card, .tile, .signup, .signup input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff; /* white, to match the torn-paper images */
  color: #2b2b2b;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: #c9695c; }
a:hover { color: #7b5a4d; }

h1, h2, h3 {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.wrap {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- top bar ---------- */
#topbar {
  background: #2e1d17; /* very dark brown to ground the page */
  color: #f6f1ea;
  font-size: 13px;
  padding: 6px 0;
  text-align: center;
}

/* ---------- header and nav ---------- */
/* Brown paper background (images/dark_hero1.jpg) is stretched over the whole
   top area and over each brown section. It is dark at the top and lighter at
   the bottom. The tear overlays (see "torn paper edges" below) sit on top. */
#top, .brown {
  position: relative; /* so the tear overlays can be placed inside */
  background: #775c51 url("images/dark_hero1.jpg") no-repeat center center;
  background-size: 100% 100%;
}

#header {
  color: #fff;
  text-align: center;
  padding: 28px 0 8px 0;
}

#logo {
  margin: 0 0 14px 0;
}

#logo img {
  max-width: 80%;
  height: auto;
  border: 0;
}

#nav {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid #a08275;
  list-style: none;
}

#nav li {
  display: inline-block;
  margin: 0 4px;
}

#nav a {
  display: block;
  padding: 6px 12px;
  color: #fff;
  text-decoration: none;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#nav a:hover {
  border-bottom: 2px solid #e8998d;
}

/* ---------- hero ---------- */
#hero {
  color: #fff;
  text-align: center;
  padding: 40px 0 100px 0; /* extra bottom room for the tear overlay */
}

#hero h1 {
  font-size: 40px;
  margin: 0 0 10px 0;
}

#hero p {
  font-size: 19px;
  margin: 0 0 26px 0;
}

.button {
  display: inline-block;
  background: #fff;
  color: #c9695c;
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.button:hover {
  background: #e8998d;
  color: #fff;
}

.button-dark {
  background: #5e4136;
  color: #fff;
}

/* ---------- torn paper edges ----------
   Two white PNGs that fade to transparent (images/ripoff.png and ripoff_flip.png).
   Each tear sits INSIDE its brown section as an overlay, so the paper
   texture shows straight through the transparent part with no seam.
   - tear-top:    white section above, brown below (flip image)
   - tear-bottom: brown above, white section below */
.tear {
  position: absolute;
  left: 0;
  width: 100%;
  height: 60px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.tear-top {
  top: -1px; /* the 1px overlap hides any hairline gap */
  background-image: url("images/ripoff_flip.png");
}

.tear-bottom {
  bottom: -1px;
  background-image: url("images/ripoff.png");
}

/* ---------- sections ---------- */
.section {
  padding: 30px 0 40px 0;
  text-align: center;
}

.section h2 {
  font-size: 30px;
  margin: 0 0 6px 0;
}

.section .sub {
  margin: 0 0 30px 0;
  color: #6b5a52;
}

.brown {
  color: #fff;
  padding-top: 90px; /* room for the tear overlay at the top */
}

.has-bottom-tear {
  padding-bottom: 100px; /* room for the tear overlay at the bottom */
}

.brown .sub { color: #ead9cf; }
.brown a { color: #fff; }

/* Beige paper section, to break up the white/brown/white stripes.
   It is a mid taupe, so the text on it is dark. Has a tear at the top.
   (Not used on the home page at the moment; kept for a future About page.) */
.beige {
  position: relative;
  padding-top: 90px;
  background: #a89d99 url("images/beigepaperbackground.jpg") no-repeat center center;
  background-size: 100% 100%;
  color: #2b2b2b;
}

.beige .sub { color: #3b2822; }

/* White sections with the faint rose pattern centred behind them */
.roses {
  background: #ffffff url("images/rose-overlay.png") no-repeat center center;
}

/* ---------- pattern cards ---------- */
.cards {
  font-size: 0; /* removes the gap between inline-blocks */
}

.card {
  display: inline-block;
  vertical-align: top;
  width: 23%;
  margin: 0 1% 20px 1%;
  background: #fff;
  border: 1px solid #e6dcd2;
  font-size: 15px;
  text-align: center;
  padding: 14px 8px 16px 8px;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 10px 0;
  border: 0;
}

.card h3 {
  font-size: 15px;
  margin: 0 0 4px 0;
}

.price {
  color: #6b5a52;
  margin: 0 0 8px 0;
}

.card a.buy {
  display: inline-block;
  border: 1px dashed #e8998d;
  padding: 4px 16px;
  text-decoration: none;
  font-size: 13px;
}

/* ---------- zodiac grid: five across, two rows ---------- */
.zodiac {
  font-size: 0; /* removes the gap between inline-blocks */
  margin-bottom: 10px;
}

.sign {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  margin: 0 1% 14px 1%;
  border: 1px solid #e6dcd2;
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sign:hover {
  border-color: #e8998d;
}

.sign img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.section h2.more {
  margin-top: 40px;
}

/* ---------- category tiles ---------- */
.tile {
  display: inline-block;
  width: 22%;
  margin: 0 1% 14px 1%;
  background: #5e4136;
  border: 1px solid #a08275;
  padding: 24px 6px;
  color: #fff;
  text-decoration: none;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
}

.tile:hover {
  background: #e8998d;
}

/* ---------- signup box ---------- */
.signup {
  background: #fff;
  border: 1px solid #e6dcd2;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px;
}

.signup input[type="email"] {
  width: 62%;
  padding: 10px;
  border: 1px solid #c9bfb5;
  font-size: 15px;
}

.signup input[type="submit"] {
  padding: 10px 18px;
  background: #5e4136;
  color: #fff;
  border: 0;
  font-size: 15px;
  cursor: pointer;
}

/* spam-trap field for the signup form: bots fill it in, people never see it */
.hidden {
  display: none;
}

.note {
  font-size: 13px;
  color: #6b5a52;
}

/* ---------- contact form (white card inside the brown About section) ---------- */
.contactbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 560px;
  margin: 30px auto 0 auto;
  padding: 24px;
  background: #fff;
  color: #2b2b2b;
  border: 1px solid #e6dcd2;
  text-align: left;
}

.contactbox h3 {
  margin: 0 0 6px 0;
  font-size: 22px;
}

.contactbox label {
  display: block;
  margin: 12px 0 4px 0;
  font-size: 14px;
}

.contactbox input[type="text"],
.contactbox input[type="email"],
.contactbox textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid #c9bfb5;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.contactbox textarea {
  height: 120px;
}

.contactbox input[type="submit"] {
  margin-top: 14px;
  padding: 10px 18px;
  background: #5e4136;
  color: #fff;
  border: 0;
  font-size: 15px;
  cursor: pointer;
}

/* ---------- about + footer ---------- */
.about {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

/* The footer is inside the About section, so it has no background of its own:
   the brown paper runs straight through. */
#footer {
  color: #ead9cf;
  text-align: center;
  font-size: 13px;
  margin-top: 40px;
  padding: 24px 0 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

#footer a { color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  #logo { font-size: 42px; }
  #hero h1 { font-size: 28px; }
  .card { width: 46%; }
  .tile { width: 46%; }
  .sign { width: 46%; }
  .signup input[type="email"] { width: 90%; margin-bottom: 8px; }
}