dgstyle.css

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

/* Copied from tesco.com to handle the nutritional info panels */
.gda{display:inline-block;margin-bottom:20px}.gda .summary{display:block;font-family:Helvetica,Arial,sans-serif;font-weight:700;color:#000;padding-bottom:13px}.gda .reference{font-size:11px;line-height:14px}.gda ul{display:inherit}.gda ul .gda-item{border:1px solid #000;border-top-left-radius:100% 30px;border-top-right-radius:100% 30px;border-bottom-left-radius:100% 30px;border-bottom-right-radius:100% 30px;display:block;float:left;font-family:Helvetica,Arial,sans-serif;font-weight:700;color:#000;height:80px;margin-bottom:10px;text-align:center;width:55px}.gda ul .gda-item .value{display:block;font-size:11px;line-height:10px;padding-top:14px}.gda ul .gda-item .value.energy{font-weight:300;font-size:10px;padding-top:8px;width:47px;margin:0 auto}.gda ul .gda-item .top{border-bottom:1px solid #000;height:51px}.gda ul .gda-item .top .title{display:block;font-size:10px;height:15px;padding-top:5px}.gda ul .gda-item .bottom{border-bottom-left-radius:90% 27px;border-bottom-right-radius:90% 27px;height:27px}.gda ul .gda-item .bottom .value{padding-top:7px}.gda ul .gda-item .bottom.high{background-color:#f27060}.gda ul .gda-item .bottom.medium{background-color:#ffce83}.gda ul .gda-item .bottom.low{background-color:#acd480}






body {
  background-image: url(dgbackground.png);
  font-family: sans-serif;
}

  header img#logo {
    width:30%;
  }

  header figure#trueTaste {
    width: 8em;
    float:right;
    display: block;
    margin-top:0;
    margin-right: 0.2em;
  }

  header figure#trueTaste img {
    width:100%;
  }

  header figure#trueTaste figcaption {
    text-align:center;
    font-family: 'Indie Flower', cursive;
    font-size: 80%;
    white-space: nowrap;
  }

  header p.nav, header p.nav a {
    background-color: #589F3B;
    color: white;
    padding-left: .5em;
    clear:both;
    font-size:80%;
  }

section#mc figure {
  width:95%;
  margin: 0 auto;
  float:none;
}

section#mc figure img {
  width:100%;
  box-shadow: 3px 3px 5px 6px #aaa;
}

section#mc p.title {font-weight:bold;}
section#mc p.description {font-family: 'Indie Flower', cursive;}


@media screen and (min-width: 700px) {

  header figure#trueTaste {
    width: 12em;
  }

  header figure#trueTaste figcaption {
    font-size: 120%;
  }

  header p.nav {
    padding-left: 1em;
    font-size:100%;
  }
}

/* ************************ Risotto page ****************************** */

  section#product {
    background-image: none;
    background-color:white;
    position:relative;
    height:500px;
  }

  section#product figure {
    margin-left:0;
    display:block;
    width:65%;
  }

  section#product figure img {
    width:100%;
  }

  section#product p.title, section#product p.description, section#product p.goodStuff, section#product p.linkGraphic, section#product p#romance {
    position: absolute;
    left: 200px;
  }

  section#product p.title {
    font-weight: bold;
    top: 0;
  }

  section#product p.description {
    font-family: 'Indie Flower', cursive;
    top:50px;
  }

  section#product p.goodStuff {
    top:100px;
  }

  section#product p.goodStuff span, section#product p.linkGraphic span {
    font-size:0.6rem;
    font-weight: 700;
    border-radius: 50px;
    padding: .5em .5em;
    width: 7em;
    text-align:center;
    float:left;
    margin-right:0.5em;
    display:block;
  }

  section#product p.goodStuff span:before {
    content: "✓ ";
    color: #589F3B;
  }

  section#product p.goodStuff span {
    background-color: #dfd;
    border: 2px solid #589F3B;
    margin-top: .2em;
  }

  section#product p.linkGraphic span {
    background-color: white;
    border: 2px solid black;
    margin-top: .2em;
  }

  section#product p.goodStuff span#vegetarian, section#product p.linkGraphic span#howToCook, section#product p.title span#titleNetWeight, section#product p.description span.long {
    display:none;
  }

  section#product p.linkGraphic {
    top:170px;
  }

  div#regInfo {
    clear:both;
  }

  div#regInfo span.title {
    font-size: 80%;
  }


@media screen and (min-width: 400px) {
  section#product p.linkGraphic {
    top:140px;
  }

  section#mc figure {
    width:400px;
    margin: 1em;
    float:left;
  }

  section#product figure {
    width:260px;
 }

  section#product p.title, section#product p.description, section#product p.goodStuff, section#product p.linkGraphic, section#product p#romance {
    left: 220px;
  }

}




@media screen and (min-width: 700px) {

  section#product figure {
    margin-right: .5em;
  }

  section#product p.goodStuff span, section#product p.linkGraphic span {
    font-size:0.75rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 1em 1.5em;
    width: 8em;
    text-align:center;
    float:left;
    margin-right:0.5em;
    display:block;
  }

  section#product p.goodStuff span#vegetarian, section#product p.linkGraphic span#howToCook, section#product p.title span#titleNetWeight, section#product p.description span.long {
    display:inline;
  }

section#product p.description span.short {
  display: none;
}


  section#product p.title, section#product p.description, section#product p.goodStuff, section#product p.linkGraphic, section#product div#regInfo {
    left: 300px;
  }

  section#rpoduct p.title {
    font-size: larger;
  }

  section#product p.description {
    top:40px;
  }


  section#product p.goodStuff {
    top:80px;
  }

  section#product p.linkGraphic {
    top:130px;
  }

  section#product div#regInfo {
    top:200px;
  }

}