Add some variables to the scss files

Use the period API call for the program schema

public/css/components/pretty_photo.css

@@ -1,35 +0,0 @@
-div.pp_default .pp_content_container .pp_left,
-div.pp_default .pp_content_container .pp_right,
-div.pp_default .pp_top .pp_left,
-div.pp_default .pp_top .pp_middle,
-div.pp_default .pp_top .pp_right,
-div.pp_default .pp_bottom .pp_left,
-div.pp_default .pp_bottom .pp_middle,
-div.pp_default .pp_bottom .pp_right {
-  background: none;
-  padding: 0;
-}
-
-div.pp_default .pp_content, div.light_rounded .pp_content {
-  padding: 10px;
-}
-
-div.pp_default .pp_description {
-  font-family: Nunito, serif;
-  font-size: 12px;
-  font-style: italic;
-  line-height: 3.17;
-  color: #585858;
-}
-
-div.pp_default .pp_close {
-  margin-top: 8px;
-  background: url("/images/icons/other/close.png") 0 0 no-repeat;
-}
-
-div.pp_default .pp_close:hover {
-  opacity: 1;
-  background-position: 0 -30px;
-}
-
-/*# sourceMappingURL=pretty_photo.css.map */

public/css/style.css

@@ -689,8 +689,6 @@ div.pp_default .pp_close:hover {
   }
 }
 .blog_grid .post .slider_content_box .post_date {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -698,6 +696,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -814,8 +814,6 @@ div.pp_default .pp_close:hover {
   padding: 0;
 }
 .blog .post .post_date {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -823,6 +821,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -859,8 +859,6 @@ div.pp_default .pp_close:hover {
   color: #1a1a1a;
 }
 .radio_box .post_date {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -868,6 +866,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -946,6 +946,7 @@ div.pp_default .pp_close:hover {
   font-size: 12px;
   font-weight: 500;
   line-height: 3.17;
+  letter-spacing: normal;
   text-align: left;
   color: #000;
   margin-right: 10px;
@@ -955,8 +956,6 @@ div.pp_default .pp_close:hover {
   white-space: nowrap;
 }
 .featured .sub_title .post_date {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -964,6 +963,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -1012,6 +1013,7 @@ div.pp_default .pp_close:hover {
   font-size: 12px;
   font-weight: 500;
   line-height: 3.17;
+  letter-spacing: normal;
   text-align: left;
   color: #000;
   margin-right: 10px;
@@ -1021,8 +1023,6 @@ div.pp_default .pp_close:hover {
   white-space: nowrap;
 }
 .podcast_items ul li .sub_title .post_date {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -1030,6 +1030,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -1047,6 +1049,7 @@ div.pp_default .pp_close:hover {
   font-size: 12px;
   font-weight: 500;
   line-height: 3.17;
+  letter-spacing: normal;
   text-align: left;
   color: #666;
   margin-right: 5px;
@@ -1157,6 +1160,8 @@ div.pp_default .pp_close:hover {
   font-size: 12px;
   font-weight: 500;
   line-height: 3.17;
+  letter-spacing: normal;
+  text-align: left;
   color: #666;
 }
 .post_container .post_body .post_details li a {
@@ -1201,8 +1206,6 @@ div.pp_default .pp_close:hover {
   color: #1a1a1a;
 }
 #schedule .program-times {
-  display: block;
-  height: 30px;
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
@@ -1210,6 +1213,8 @@ div.pp_default .pp_close:hover {
   letter-spacing: normal;
   text-align: left;
   color: #666;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;