/**
 * CSS for FOS Circular pages
 * This is an include that is intended to work with the default responsive styles
 */

#circular_wrapper {
  background-color: #cccccc;
  margin: 0 auto;
  width: 1014px;
  overflow: hidden;
  padding: 30px 0;
  font-size: 12px;
}
#circular_inner {
  background-color: #ffffff;
  width: 400px;
  overflow: hidden;
  width: 750px;
  margin: 0 auto;
  min-height: 600px;
  color: #445763;
}
#circular_inner a,
#circular_inner a:link,
#circular_inner a:visited {
  color: #445763;
}
#circular_inner a:link {
  text-decoration: underline;
}

#circular_inner .vspacer-70 {
  height: 70px;
}
#circular_inner .spacer-30 {
  width: 30px;
}
#circular_inner .spacer-15 {
  width: 15px;
}

#circular_header {
  background-image: url(/custom/files/media/circular_banner.jpg);
  background-color: transparent;
  background-position: left top;
  background-repeat: no-repeat;
  height: 109px;
  width: 750px;
}
#circular_home {
  width: 283px;
  height: 75px;
  margin-left: 36px;
  margin-top: 24px;
}
#circular_home .circular_link {
  display: block;
  width: 283px;
  height: 75px;
  text-indent: -999px;
  text-decoration: none;
}
#header_date {
  float: right;
  margin-top: 0;
}
td.issue-date {
  text-transform: uppercase;
  font-weight: bolder;
  font-family: sans-serif;
  color: #43305e;
  text-align: right;
  padding-right: 20px;
}

#circular_content {
  margin-top: 18px;
  margin-bottom: 18px;
  width: 750px;
  height: auto;
  overflow: hidden;
  background-color: white;
}
#circular_primary {
  width: 750px;
}
#circular_content h1,
#circular_content h2,
#circular_content h3 {
  color: #422e5d;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: normal;
}
#circular_content h1 {
  font-size: 1.8em;
  line-height: 1em;
  margin:0.67em 0;
}
#circular_content h2 {
  font-size:1.4em;
  line-height:1em;
  margin:0.83em 0;
}
#circular_content h3 {
  color:#422e5d;
  font-size:1.2em;
  line-height:1em;
  margin:1em 0;
}
#circular_content h4 {
  color:#422e5d;
  font-size:10px;
  line-height:normal;
  padding-left:12px;
  padding-top:12px;
  margin:0;
}
#circular_content h1 {
  margin-bottom: -10px;
  margin-top: 35px;
}
#circular_content p {
  margin-bottom: 10px;
}
#mainContent {
  width: 505px;
}
#imageContent {
  width: 150px;
  padding-top: 30px;
}
#homeLink {
  width: 750px;
}
#homeLink td.home-link {
  text-align: left;
  color: #444743;
  padding-left: 29px;
  padding-bottom: 20px;
}

#section-overview {
  margin-bottom: 30px;
  width: 100%;
}
tr.section table,
#section-main {
  width: 690px;
  margin-left: 30px;
}
tr.section td.section {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #d4dda4;
  padding-bottom: 15px;
}
td.page-overview {
  width: 450px;
  padding-bottom: 15px;
}
td.overview-image {
  text-align: right;
}
td.overview-image img {
  padding: 10px 0;
}
#circular_content a.title-link {
  text-decoration: none;
}
#circular_content span.page-title {
  font-weight: bolder;
  color: #464646;
}

/* responsive styles */
@media (max-width: 1062px) and (min-width: 961px) {
  #circular_wrapper {
    width: 100%;
  }
}
@media (max-width: 960px) and (min-width: 768px) {
  #circular_wrapper {
    width: 100%;
    padding: 30px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  #circular_inner,
  #circular_header,
  #circular_content,
  #circular_primary {
    width: 100%;
  }
  td.overview-image {
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  #circular_wrapper {
    width: 100%;
    padding:0;
  }
  #circular_inner,
  #circular_header,
  #circular_content,
  #circular_primary,
  #homeLink {
    width: 100%;
  }
  #mainContent {
    width: 70%;
  }
  #circular_primary,
  #circular_primary tbody,
  #circular_primary tr,
  #circular_primary td {
    display: block;
  }
  #circular_inner .spacer-30,
  #circular_inner .vspacer-70,
  #circular_inner .spacer-15 {
    display:none;
  }
  #mainContent,
  #imageContent {
    width:100%;
  }

  #circular_header,
  #circular_header table,
  #circular_header tr,
  #circular_header td,
  #circular_header tbody {
    display:block;
  }
  #circular_header {
    height: auto;
    background-size: auto 85px;
    background-position: left top;
  }
  #circular_home {
    width: 100%;
    height: 85px;
    margin: 0;
    padding:0;
  }
  #header_date {
    width: 100%;
    padding: 0;
    float: none;
  }

  #circular_content h1 {
    margin-top: 10px;
    margin-bottom: 0;
  }

  #imageContent {
    padding-top: 10px;
  }

  #homeLink {
    margin-top: 30px;
  }
  #homeLink td.home-link {
    padding-bottom: 10px;
  }

  tr.section table, #section-main {
    width: 95%;
    margin: 0 2.5%;
  }
  td.page-overview {
    width: 70%;
  }
  td.overview-image {
    width: 30%;
  }
}






/*  Custom styles for each particular issue */

/* ==== START ISSUE CM ==== */
/* The following styles are examples
 * assuming page(s) with the "Issue Number" metadata value of "ISSUE CM"
 *
 * the comments in each css block show examples of what to put in
 * each block to achieve the result in the comment above */

/* Header image */
.issue_cm #circular_header {
  /*background-image: url(/custom/files/media/circular_banner.jpg);*/
}

/* header issue date colour */
.issue_cm td.issue-date {
  /*color:#F00;*/
}

/* section line colour */
.issue_cm tr.section td.section {
  /*border-bottom-color: #F00;*/
}

/* section/page header colours */
.issue_cm #circular_content h1,
.issue_cm #circular_content h2,
.issue_cm #circular_content h3 {
  /*color:#F00;*/
}

/* Section Overview page title colour */
.issue_cm #circular_content span.page-title {
  /*color:#F00;*/
}

/* link colour */
.issue_cm #circular_inner a,
.issue_cm #circular_inner a:link,
.issue_cm #circular_inner a:visited {
  /*color:#F00;*/
}
/* ==== END ISSUE CM ==== */