/* ---------------------- MISC ---------------------- */
h1, .h1 {
  font-size : 23px;
  font-size : 2.3rem;
  font-weight : bold;
}

h2, .h2 {
  font-size : 20px;
  font-size : 2.0rem;
  font-weight : bold;
}

h5 {
  text-align: center;
}

/* titles above home page paragraphs */
#main h4 {
  margin-bottom : 10px;
  margin-bottom : 1.0rem;
}

blockquote p {
  font-size : 14px;
  font-size : 1.4rem;

  line-height : 18px;
  line-height : 1.8rem;

  margin-bottom : 10px !important;
  margin-bottom : 1.0rem !important;
}

/* clears a float */
.clear {
  clear : both;
}

/* hide the prev and next buttons on single post pages */
/* because a music page might lead to a blog post page */
body.single-post #nav-below {
  display : none;
}

/* reduce space between menu and content body */
#main {
  margin-top : 10px;
  margin-top : 1rem;
}

/* main body of the web site */
body, #container {
  background-color : #eee;
}

/* a class that can be added to an image to give it a border */
img.pb-image-border {
  border : 1px solid #000;
}

/* make a square image into a circle */
img.pb-head-shot {
  border-radius : 50%;
}

/* for small screens matching this max width */
@media only screen and (max-width: 264px) {
  /* prevent the text from wrapping around the image */
  img.pb-head-shot {
    float : none;
  }
}

/* image inside links */
/* remove space beneath an image in a link */
.link-image img {
  margin-bottom : 0 !important;
}

/* remove extra space under images that is normally reserved for a caption */
.post-content img {
  margin-bottom : 0;
}

/* override default caption size, too small for mobile phones */
.wp-caption p.wp-caption-text, .entry-caption {
  font-size : 16px;
  font-size : 1.6rem;
}

/* hide the wordpress smiley. Appears on the 404.php page */
.wp-smiley {
  display : none;
}

/* number of times vpo has been downloaded */
#vpoDownloadCount {
  margin-top : -24px;
  font-size : 14px;

  margin-top : -2.4rem;
  font-size : 1.4rem;

  font-style : italic;
}

/* hide the footer */
#colophon {
  display : none;
  background-color : transparent;
}

/* the add to any buttons may have been too close together for mobile users */
.addtoany_list a, .widget .addtoany_list a {
  padding : 0px 8px !important;
}

/* end of misc */

/* ------------------ PAGE LAYOUT ----------------- */

/* remove white border between main body and sidebar */
#main {
  border : none;
}


/* reduce empty space when screen is 620px */
@media only screen and (max-width: 640px) {
  #main.col620 {
    margin-top : 10px;
    margin-top : 1.0rem;
  }
}

/* page titles */
body.page .entry-title, body.single .entry-title, .not-found .entry-title {
  font-size : 23px;

  font-size : 2.3rem;
  font-weight : 400;
  color : #007;
}

.entry-header {
  margin-bottom : 20px;
  margin-bottom : 2.0rem;
}

.entry-header h1.entry-title {
  font-size : 23px;
  font-size : 2.3rem;
}

.entry-title {
  font-size : 23px;
  font-size : 2.3rem;
  font-weight : 400;
}

/* the date above the post title on the category page */
time.entry-date {
  color : #000;
  font-style : italic;
}

/* artist section of post title */
.entry-title .songArtists {
  font-size : 16px;
  margin-left : 20px;

  font-size : 1.6rem;
  margin-left : 2.0rem;

  font-style : italic;
  color : #000;
}

/* reduce the space between the body text and the edge of it's cell */
article[id*="post-"] {
  margin-right : 0%;
}

/* links in page content and posts */
.entry-content a, post-content a {
  text-decoration : none;
  color : #509ae2;
  font-style : italic;
}

/* hover links in page content and posts */
.entry-content a:hover, post-content a:hover {
  text-decoration : underline;
  color : #206ab2;
}


/* used as name of category on category pages */
.colortxt {
  color : #ff4700; /* dark orange */
}

.page-title {
  font-weight : 400;
}

.page-header {
  padding-bottom : 0;
  margin-bottom : 30px;
  margin-bottom : 3.0rem;
}

/* remove default bottom border in post and pages */
.post-content table td {
  border-bottom : 0px solid transparent;
}

.category-archive-meta {
  color : #000;
  text-decoration : italic;
}

/* hide the date and author, I take care of the date display myself */
.entry-meta {
  display : none;
}

/* hide post author because it's always the same */
.byline {
/*  display : none; */ /* not needed, covered by .entry-meta */
}

/* end of page layout */

/* ---------------------- BANNER ---------------------- */

/* banner colour */
header[role="banner"] {
  background-color : #24598c !important; /* med blue green */
}

/* for small screen less than this size */
@media only screen and (max-width: 956px) {
  #site-heading {
    background-image : url(images/banner-100px-high.jpg);
    background-repeat : no-repeat;
    background-size : cover;
    padding-left : 9.6rem;
    padding-top : 0px;
    padding-bottom : 0px;
    width : 100%;
    height : 90px;
    height : 9.0rem;
  }

  #site-title {
    display : none;
  }
}

/* for small screens matching this max width */
/*
@media only screen and (max-width: 306px) {
  #site-heading {
    background-image : none;
    padding-left : 0;
      width : 100%;
  }
}
*/

/* this will be overridden for large screens */
#site-heading #site-title {
  font-weight : bold;
  font-style : italic;
  font-size : 20px;
  font-size : 2.0rem
}

/* for screens matching this min width */
@media only screen and (min-width: 956px) {
  #branding {
    background-image : url(images/banner-vpo.jpg);
    background-repeat : no-repeat;
    background-position : center top;
    min-height : 200px;
    min-height : 20.0rem;
  }

  /* hide the site heading text */
  #site-heading {
    display : none;
  }
}
/* end of banner */

/* --------------------- VPO BANNER & GET VPO --------------------------*/
#vpoBannerCell {
  background-image : url(images/gray-music-notes-background.jpg);
/*  background-size : cover; */
  background-size : 100% 100%;
  max-width : 660px;
  max-width : 66.0rem;

  width : 99%;

  min-height : 115px;
  min-height : 11.5rem;

  border : 4px solid #000;

  overflow : auto;

  position : relative;

  margin-bottom : -18px;
  margin-bottom : -1.8rem;

}

#getVpoButton a, .getVpoButton a {
  display : block;
}

#getVpoButton a, #vpoBannerText a,
.getVpoButton a {

  white-space : nowrap;

  font-style : normal;
  /* for older IE */
  filter : none;
  text-shadow : none;

  margin : 0 auto;
  background-color : #a30f00;
  border : 0 none;
  color : #fff;
  text-decoration : none;
  text-transform :uppercase;
  vertical-align: middle;

  width :          76px; /* older browsers */
  height :         18px;
  padding-left:    18px;
  padding-right:   18px;
  padding-top :     8px;
  padding-bottom : 12px;
  letter-spacing :  2px;
  font-size :      14px;
  border-radius :   3px;
  -webkit-border-radius: 3px; /* for older browsers */
  -moz-border-radius:    3px;

  width :          7.6rem;
  height :         1.8rem;
  padding-left:    1.8rem;
  padding-right:   1.8rem;
  padding-top :    0.8rem;
  padding-bottom : 1.2rem;
  letter-spacing : 0.2rem;
  font-size :      1.4rem;
  border-radius :  0.3rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius:    0.3rem;
}

#getVpoButton a:hover, #vpoBannerText a:hover,
.getVpoButton a:hover  {
  background-color : #c32f20;
  color : #fff;
  text-decoration : none;
}

#vpoBannerText a {
  margin-left : 10px;
}

#vpoDownloadButton-sav img {
  margin : 0px;
  margin-right : 5px;
}

#vpo-update-summary-sav {
  line-height : 18px;
}

#vpoBannerCell img {
  float : right;
  margin-top : 3px;
}

#vpoBannerText {
  width : 82%;

  color : #fff;

  font-size : 28px;
  font-size : 2.8rem;

  text-align : center;

  padding-top : 5px;
  padding-top : 0.5rem;


  /* for older IE */
  filter : DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1);
  text-shadow : 2px 2px #000;
}

#vpoBannerDate {
  font-size : 18px;
  font-size : 1.8rem;
}

/* this will hide the instruments but will be overridden for larger screens */
/*
#vpoInstruments {
  display : none;
}
*/

/* for screens matching this max width (small screens) */
@media only screen and (max-width: 579px) {
  #vpoBannerCell img {
    display : none;
  }

  #vpoBannerText {
    width : 100%;
  }
}

/* for screens matching this min width (large screens) */
/*
@media only screen and (min-width: 960px) {
  #vpoBannerText {

    width : 350px;
    width : 35.0rem;

  }

  #vpoInstruments {
    display : block;
    float: right;

    width : 212px;
    width : 21.2rem;

    height : 185px;
    height : 18.5rem;

    margin-top : 5px;
    margin-right : 25px;

    background-image : url(images/orchestra-cartoon-slider.png);
  }
}
*/

.getVpoWidget {
  margin-bottom : -24px;
}

.getVpoCell {
  padding-left   : 6px; /* older browsers */
  padding-right  : 6px;
  padding-bottom : 6px;
  padding-top    : 6px;

  padding-left   : 0.6rem;
  padding-right  : 0.6rem;
  padding-bottom : 0.6rem;
  padding-top    : 0.6rem;

  margin: 0 auto;
  margin-bottom : 1.0rem;
  margin-bottom : 10px;

  width          : 178px; /* for older browsers */
  padding-top    : 5px;
  padding-bottom : 5px;

  width          : 17.8rem;
  padding-top    : 0.5rem;
  padding-bottom : 0.5rem;

  border : 2px solid #000;

  background-repeat : no-repeat;
  background-color : #000;
}

.getVpoCellBgOrchestra {
  background-image : url(images/getVpoBg.jpg);
}

.getVpoCellBgOther {
  background-image : url(images/getOtherBg.jpg);
}

.getVpoText {
  font-size : 1.6rem;
  font-size : 16px;

  color : #fff;
  text-align : center;
  margin : 0 auto;

  margin-bottom : 12px;
  line-height   : 18px;

  margin-bottom : 1.2rem;
  line-height   : 1.8rem;

  /* for older IE */
  filter : DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1);

  text-shadow : 2px 2px #000;
}

/* this gets added to a vpo widget when inserted in to a page instead */
/* of in a sidebar when using "Amr Shortcode Any Widget" */
/* ex: [do_widget VpoGetVpo class="vpoWidgetInPage"] */
.vpoWidgetInPage {
  float : right;
  margin-left : 10px;
  margin-left : 1.0rem;
}

#facebookFollowCell {
  width : 160px;
  width : 16.0rem;
  margin: 0 auto;
}

#facebookFollowImg {
  border : 1px solid #000;
}

/* end of vpo banner */

/* ---------------------- MENU ---------------------- */

/* move menu below the small banner and to the left */
/* will be overridden for large screens */
#access {
  padding-top : 0px;
  float : left;
}

/* make room for facebook and feed icons in main menu */
nav[role="navigation"] {
  width : 100%;
}

/* keep menu text on the left */
nav[role="navigation"] div.menu {
  /*float : left; */
  float : none;
}

/* reduce space taken up by menu items */
nav[role="navigation"] .menu ul li a {
  color : #fff;
  background-color : #24598c; /* med blue green */

  margin-top :     4px;
  padding-top :    4px;
  padding-bottom : 4px;
  line-height : 30px; /* make menu text same height as menu images */

  margin-top :     0.4rem;
  padding-top :    0.4rem;
  padding-bottom : 0.4rem;
  line-height : 3rem; /* make menu text same height as menu images */
}

/* change menu item background on hover */
nav[role="navigation"] .menu ul li a:hover,
nav[role="navigation"] .menu ul li ul.sub-menu li a:hover,
nav[role="navigation"] .menu ul li ul.children li a:hover,
nav[role=navigation] .menu ul.sub-menu li.current-menu-item a:hover,
.nav ul.sub-menu li.current_page_item a:hover,
nav[role=navigation] .menu ul.sub-menu li.current_page_item a:hover,
nav[role=navigation] .menu ul li.current-page-parent ul.sub-menu li a:hover,
nav[role=navigation] .menu ul li.current-menu-item ul.sub-menu li a:hover,
nav[role=navigation] .menu ul li.current_page_parent ul.children li a:hover,
nav[role=navigation] .menu ul li.current_page_item ul.children li a:hover,
.nav ul li.current_page_item ul.sub-menu li a:hover,
nav[role=navigation] .menu ul li.current_page_item ul.sub-menu li a:hover {
  background-color : #09a;  /* blue green */
  color : #fff !important;

  /* round borders when hovering */
  /* for other browsers, IE9+ */
  -webkit-border-radius: 15px;  /* for older browsers */
  -moz-border-radius:    15px;
   border-radius:        15px;

  -webkit-border-radius: 1.5rem;
  -moz-border-radius:    1.5rem;
   border-radius:        1.5rem;
}

/* don't change menu item background on hover for menu images */
nav[role="navigation"] .menu ul li a.menu-image-not-hovered:hover,
nav[role="navigation"] .menu.nav-mobile ul li a.menu-image-not-hovered:hover {
  background-color : transparent;
}

div.menu ul li ul.sub-menu, div.menu ul li ul.children {
  word-wrap : normal;
  white-space: nowrap;
}

/* style the sub menu cells */
nav[role="navigation"] .menu ul li ul.sub-menu li,
nav[role="navigation"] .menu ul li ul.children li {
  padding : 3px;
  background-color : #24598c; /* med blue green */
  border : none;

  max-width : 230px;
  min-width : 160px;

  max-width : 23rem;
  min-width : 16rem;

  width : auto;
}

/* style the sub menu links */
nav[role="navigation"] .menu ul li ul.sub-menu li a,
nav[role="navigation"] .menu ul li ul.children li a {
  /* make sub menu items take up less vertical space */
  padding-top    : 1px;
  padding-bottom : 1px;
  padding-top    : 0.1rem;
  padding-bottom : 0.1rem;
  min-height     : 0;

  color :  #fff !important;
  border : 0px solid #24598c; /* med blue green */
}


/* get rid of the shadow around menu items */
nav[role=navigation] .menu ul li ul li a {
  box-shadow: none;
}

/* for screens matching this min width (for larger screens) */
@media only screen and (min-width: 956px) {
  /* position menu below the banner */
  #access {
    padding-top : 180px;
    padding-top : 18rem;
  }
}

/* for small screens matching this max width */
@media only screen and (max-width: 824px) {
  /* keep mobile menu on the right */
  nav[role="navigation"] div.menu.nav-mobile {
    float : right;
  }

  /* set menu colour */
  nav[role="navigation"] div.menu > ul {
    color : #fff;
    background-color : #24598c; /* med blue green */
  }

  nav[role="navigation"] .menu.nav-mobile ul li a,
  nav[role="navigation"] .menu.nav-mobile ul li.current-menu-item a,
  nav[role="navigation"] .menu.nav-mobile ul li.current_page_item a {
    color : #fff !important;
  }

  /* set colour and remove rounded borders for all mobile menus, sub menus */
  nav[role="navigation"] .menu.nav-mobile ul li a:hover,
  nav[role="navigation"] .menu.nav-mobile ul li.current-menu-item a:hover,
  nav[role="navigation"] .menu.nav-mobile ul li.current_page_item a:hover,
  nav[role="navigation"] .menu ul li a:hover, nav[role="navigation"] .menu ul li ul.sub-menu li a:hover, nav[role="navigation"] .menu ul li ul.children li a:hover, nav[role="navigation"] .menu ul.sub-menu li.current-menu-item a:hover, .nav ul.sub-menu li.current_page_item a:hover, nav[role="navigation"] .menu ul.sub-menu li.current_page_item a:hover, nav[role="navigation"] .menu ul li.current-page-parent ul.sub-menu li a:hover, nav[role="navigation"] .menu ul li.current-menu-item ul.sub-menu li a:hover, nav[role="navigation"] .menu ul li.current_page_parent ul.children li a:hover, nav[role="navigation"] .menu ul li.current_page_item ul.children li a:hover, .nav ul li.current_page_item ul.sub-menu li a:hover, nav[role="navigation"] .menu ul li.current_page_item ul.sub-menu li a:hover
  {
    background-color : #09a;  /* blue green */
    color : #fff !important;

    /* remove round borders when hovering */
    -webkit-border-radius: 0px;
    -moz-border-radius:    0px;
     border-radius:        0px;
  }

  /* without this bar grey lines appear on left and right of sub menu items */
  nav[role="navigation"] .menu ul li ul.sub-menu li,
  nav[role="navigation"] .menu ul li ul.children li {
    padding-left : 0px;
    padding-right : 0px;
  }

  /* style the sub menu links */
  nav[role="navigation"] .menu ul li ul.sub-menu li a,
  nav[role="navigation"] .menu ul li ul.children li a {
    /* make sub menu items take up less vertical space */
    padding-top    : 3px;
    padding-bottom : 3px;
    padding-top    : 0.3rem;
    padding-bottom : 0.3rem;
  }
}
/* end of menu */

/* ---------------------- SIDEBAR ---------------------- */

/* reduce space between all sidebar widgets */
aside.widget {
  margin-bottom : 30px;
  margin-bottom : 3rem;
}

/* reduce space after search box only */
aside.widget_search {
  margin-bottom : 10px;
  margin-bottom : 1.0rem;
}

#sidebar {
  background-color : #f7f7f7;
  margin-top : 0.8rem;
  margin-top : 8px;

  padding : 4px;
  padding : 0.4rem;

/* --- shadow begins --- */
  -moz-box-shadow:    8px 8px 5px #888888;
  -webkit-box-shadow: 8px 8px 5px #888888;
  box-shadow:         8px 8px 5px #888888;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#888888')";

  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#888888');
/* --- shadow ends --- */

/* --- rounded corners begin --- */
  border: 2px solid #999;
  /* for other browsers */
   -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  /* for IE */
  behavior: url(wp-content/themes/virtualplaying/pie/pie/PIE.htc);
/* --- rounded corners begin --- */
}

#sidebar .widget-title {
/*    background-color : #04396c; */
  background-image : url(images/gray-note-in-circle.png);
  background-repeat : no-repeat;
  background-size : 3.9rem;
  background-position : 3px center;

 /* move title bar to the left, move text to the right to make room */
 /* for the background image */
  padding-left   : 50px; /* for older browsers */
  padding-right  : 0px;
  padding-top    : 6px;
  padding-bottom : 6px;
  margin-left    : -16px;  /* for older browsers */

 /* move title bar to the left, move text to the right to make room */
 /* for the background image */
  padding-left   : 5.0rem;
  padding-right  : 0.0rem;
  padding-top    : 0.6rem;
  padding-bottom : 0.6rem;
  margin-left    : -1.6rem;

  border-left :   3px solid #0cd;
  border-top :    3px solid #0cd;
  border-bottom : 3px solid #0cd;
  border-right  : 0px;

  /* rounded corners for all browsers, IE9+ */
  -webkit-border-radius: 24px 0px 0px 24px; /* for older browsers */
  -moz-border-radius:    24px 0px 0px 24px;
   border-radius:        24px 0px 0px 24px;

  -webkit-border-radius: 2.4rem 0 0 2.4rem;
  -moz-border-radius:    2.4rem 0 0 2.4rem;
   border-radius:        2.4rem 0 0 2.4rem;

  /* drop shadow (other browsers and IE9+) */
  -moz-box-shadow:    0 8px 5px #888888; /* for older browsers */
  -webkit-box-shadow: 0 8px 5px #888888;
  box-shadow:         0 8px 5px #888888;

  -moz-box-shadow:    0 0.8rem 0.5rem #888888;
  -webkit-box-shadow: 0 0.8rem 0.5rem #888888;
  box-shadow:         0 0.8rem 0.5rem #888888;
}

#sidebar .widget-title {
  background-color : #04396c !important;
}

/* all links in sidebar */
#sidebar li a, #sidebar .widget li a {
  color : #004a92; /* medium blue */
}

#sidebar li a:hover,#sidebar .widget li a:hover {
  color : #004a92; /* medium blue */
}

/* reduce space between songs in the top music widget */
#sidebar .widget_vpo_top_music li,
#sidebar .widget_vpo_all_music li,
#sidebar .widget_vpo_blog_posts li {
  margin-bottom : 0.4rem;
  line-height : normal;
}

.vpo_widgets_sidebar_scroll a {
  font-size : 98%; /* make font smaller so there is room for play button */
                   /*  without text wrapping around for long song names */
}

#sidebar .widget_vpo_top_music li,


/* set indentation for song artists name in all music widgets */
li .vpo_widgets_songArtists {
  margin-top : -4px;
  margin-left : 10px;

  margin-top : -0.4rem;
  margin-left : 1.0rem;

  font-style : italic;
  font-size : 12px;
}


/* scroll bar for latest music box */
.vpo_widgets_sidebar_scroll {
  background-color : #ececec;
  height : 500px;
  height : 50.0rem;
  overflow : auto;
  width : 96%;
  border : 1px solid #000;
  background-color : #e7e7e7; /* just a touch darker than the background */
  margin : 6px auto; /* centered */
}

.vpo_widgets_year {
  font-size : 16px;
  line-height : 18px;
  margin-top : 12px;
  margin-bottom : 2px;
  margin-left : -6px;
  margin-right : 0px;
  padding-left : 8px;
  border-bottom : 2px solid #0cd;

  font-size : 1.6rem;
  line-height : 1.8rem;
  margin-top : 1.2rem;
  margin-bottom : 0.2rem;
  margin-left : -0.6rem;
  margin-right : 0px;
  padding-left : 0.8rem;
  border-bottom : 0.2rem solid #0cd;

  text-align : left;
}

.widget_vpo_blog_posts a {
  margin-left : 10px;
  margin-left : 1.0rem;
}

/* end of sidebar */


/* ---------------------- COMMENTS ---------------------- */

/* make the gravatar image a little smaller (was 67px by default) */
.commentlist li.comment article[id*="comment-"] img {
  width : 48px;
  width : 4.8rem;

  height : 48px;
  height : 4.8rem;

  margin-top : -10px;
  margin-top : -1.0rem;

}

#comments-title {
  margin-bottom : 20px; /* reduce space below title */
  margin-bottom : 2rem; /* was 4rem */
}

.commentlist .vcard cite.fn {
  text-transform: none; /* undo forced uppercase for comment authors */
}

#content #comments .odd article, #content #comments .even article {
  border-bottom : 1px solid #e9e9e9; /* restore bottom border under initial comment */
                                     /* was 0 none - caused by css for category pages */
}

.commentlist li.comment article[id*="comment-"] {
  background-color : #fdfdfd; /* remove the grey background behind the gravatar image */
                              /* was #f1f1f1 */
}

.commentlist footer.comment-head {
  min-height : 65px;      /* ensure enough space for gravatar image */
  min-height : 6.5rem;
  border-bottom : 1px solid #c1c1c1; /* add border under author cell */
  padding: 0 0 0 0; /* reduce padding above and beside author name */
                    /* was 15px 0 0 20px */
}

.commentlist li.comment .comment-content {
  margin-left : 0px; /* make comment fit under the gravatar image */
                     /* was 10.5rem */

  padding : 10px; /* reduce white space around comments */
  padding : 1rem; /* was 2rem */

  padding-bottom : 0px;
}

.commentlist li.comment .comment-content p {
  line-height : 18px;
  line-height : 1.8rem;
}

#comments li.odd, #comments li.even {
  padding : 4px;
}

#comments li p {
  margin-bottom : 10px;
}

#comment-nav-above {
  margin-bottom : 20px;
  margin-bottom : 2rem;
}

/* end of comments */

/* ---------------- CATEGORIES, ARCHIVES, COMMENTS ------------------- */

/* --- for category / archive pages that show multiple posts on the same page --- */
#content .odd, #content .even {
  padding       :8px;
  margin-bottom : 10px;

  padding       :0.8rem;
  margin-bottom : 1.0rem;

  border: 1px solid #000;
}

#content .odd article, #content .even article {
  padding-bottom : 0;
  margin-bottom : 0;
  border-bottom : 0;
}

#content .odd {
  background-color : #f9f0e1; /* slightly darker old lace */
}

#content .even {
  background-color : #fffaf0; /* floral white */
}

/* end of categories, archives, comments */

/* --------------------- FORMS ------------------------- */

/* comment submit button and all submit buttons */
#respond #submit, input[type=submit] {
  background-color : #a30f00; /* red */
  border: 0 none;
  border-radius   : 3px;
  font-size       : 14px;
  letter-spacing  : 2px;
  padding         : 10px 24px;

  border-radius   : 0.3rem;
  font-size       : 1.4rem;
  letter-spacing  : 0.2rem;
  padding         : 1.0rem 2.4rem;

  color: #fff;
  text-transform: uppercase;
}

#respond #submit:hover, input[type=submit]:hover {
  background-color : #c32f20;
}

/* text under the "Leave a Reply" title */
#respond .comment-notes {
  font-size : 1.3rem; /* needed to be a touch smaller so text doesn't wrap */
}

/* the "*" following the text "Required fields are marked" will overlap */
/* with the text without this */
#respond .required {
  margin-left : 0px;
}

#reply-title {
  color : #007;
}

/* hide this, will use it to detect spammers */
#commentform .comment-form-url {
  display : none;
}

#pbContactForm {
  padding : 5px;

  padding : 0.5rem;
  margin : 0;
  overflow : hidden;

  background-color : #f9f0e1;  /* slightly darker old lace */
  border : 1px solid #777;
}

/* this removes some annoying extra space at the top of the form */
/* caused by a rogue <p> tag */
#pbContactForm p {
  margin : 0  !important;
}

/* for large screens matching this min width */
/* show the label and form field side by side */
@media only screen and (min-width: 540px) {
  #pbContactForm .formLabel {
    float : left;
    width : 20%;
    clear : both;
    padding-bottom : 10px;
  }

  #pbContactForm .formField {
    float : left;
    width : 80%;
    padding-bottom : 10px;
  }
}

/* this is the spam catcher, hide it */
#pbContactForm input[name=full_name] {
  display : none;
}

#pbContactForm input[type=text], #pbContactForm textarea {
  width : 100%;
}

div.wpcf7-response-output {
  margin-top : 10px;
  margin-top : 1.0rem;

}

/* hide the strange large border that appears when an validation error occurs */
.wpcf7 form .wpcf7-validation-errors,
.wpcf7 form .wpcf7-acceptance-missing,
.wpcf7 form .wpcf7-response-output {
  border : none !important;
}


/* end of forms */

/* --------------------- WHAT'S NEW --------------------------*/
.whatsNewCell {
  background-color : #fffaf0;   /* floral white */

  min-width : 22px;
  min-width : 2.2rem;
  width : 49%; /* leave room for the border */

  margin-top : 0px;
  margin-bottom : 6px;
  padding-bottom : 6px;
  padding-left : 4px;

  margin-top : 0.0rem;
  margin-bottom : 0.6rem;
  padding-bottom : 0.6rem;
  padding-left : 0.4rem;

  margin-right : 6px;

  border : 2px solid #24598c;  /* dark purplish blue */

  /* ensure boxes can stretch their height on small screens */
//  min-height : 119px;
//  min-height : 11.9rem;

  min-height : 68px;
  min-height : 6.8rem;

/*  overflow : hidden;  */
  float : left;

}

.newPostCell {
  width : 99% !important;
}

.newMusicCell {
}


.whatsNewCell img {
  margin-top : 6px;
  margin-right : 12px;
}

.whatsNewCell .songArtists_orig {
  font-size : 12px;

  margin-left : 10px;
  margin-top : -5px;

  line-height: 14px;

  font-size : 1.2rem;
  margin-left : 1.0rem;
  margin-top : -0.5rem;
  line-height: 1.4rem;
}

.whatsNewCell .songArtists {
  font-size : 14px;

  margin-left : 10px;
  margin-top : -5px;

  line-height: 14px;

  font-size : 1.4rem;
  margin-left : 1.0rem;
  margin-top : -0.5rem;
  line-height: 1.4rem;
}

/* -------------------- SONG POST ---------------------- */
/* remove space at end of multiple posts */
.post-content {
  margin-bottom : 0;
}

.songCreditTable {
  font-size : 14px;
  font-size : 1.4rem;

  line-height : normal;
}

.songCreditTable td {
  border : 0 !important;
  padding-top : 3px !important;
  padding-bottom : 8px !important;
}

.songCreditTable .artistName {
  width : 118px;
  width : 11.8rem;
  font-weight : 600;
  vertical-align : top;
}
.songCreditTable .artistInstruments {
  font-style : italic;
}

.artistWebSite {
  font-size: 14px;
  font-size: 1.4rem;
}

.youtubeIframe {
  width : 560px;
  height : 315px;

  width : 56.0rem;
  height : 31.5rem;

  margin-bottom : 5px !important;
}

p.pb-subtext, div.pb-subtext {
  font-size : 12px;
  font-size : 1.2rem;
}

.lyrics-trigger {
  text-transform : uppercase;
  font-size : 12px;
  font-size : 1.2rem;

  line-height : 14px;
  line-height : 1.4rem;

  letter-spacing : 2px;
  font-family : sans-serif;
  text-align : center;
  cursor : pointer;
  color : #fff;
/*  background-color : #34699c; */ /* lighter dark blue */
  background-color : #777; /* gray */
/*  border : 1px solid #0cd; */ /* neon blue */
  border : 1px solid #333; /* darker gray */

  width : 190px;
  width : 19.0rem;

  padding : 5px;
  margin-bottom : 5px;

  /* for other browsers, IE9+ */
  -webkit-border-radius: 3px;
  -moz-border-radius:    3px;
   border-radius:        3px;

  -webkit-border-radius: 0.3rem;
  -moz-border-radius:    0.3rem;
   border-radius:        0.3rem;

}

.lyrics-trigger:hover {
/*  background-color : #5479ac;  */ /* even lighter dark blue */
  background-color : #999; /* lighter gray */
}

.lyrics-text {
  display : none;
  background-color : #fcf5e9; /* halfway between slightly darker old lace and floral white */

  border : 1px solid #777;
  padding-left : 8px;
}

.lyrics-title {
  font-weight : bold;
}

.lyrics-author {
  font-style : italic;
}

/* #content div, in theme, sets box-sizing to border-box, but
audio player needs it set to content-box, so this corrects the conflict */
#content div .mejs-container .mejs-controls .mejs-time {
  box-sizing: content-box;
}

/* my attempt to stop the popup instruction box from the audio player */
/* doesn't work */
.mejs-offscreen {
  display : none;
}

/* default of 17px not showing up as tall enough for the text */
.mejs-container .mejs-controls .mejs-time {
  height : 18px !important;
  height : 1.8rem !important;
}


/* end of song post */

/* -------------------- BLOG TABLE OF CONTENTS ---------------- */

.postLinksFromCategoryCell h3 {
  margin-top : 20px;
  margin-top : 2.0rem;

  margin-bottom : 5px;
  margin-bottom : 0.5rem;

  margin-top : 2.0rem;
  margin-bottom : 0.5rem;
}

.postLinksFromCategoryCell a {
  font-size : 14px;
  font-size : 1.4rem;
}

/* this will be overridden for small screens */
#blogLeft {
  float : left;
  width : 50%;
}

#blogRight {
  float : left;
  width : 50%;
}

#blogBottom {
  clear : both;
  margin : 0 auto;
  width : 40%;
}

/* for small screens matching this max width */
@media only screen and (max-width: 579px) {
  #blogLeft {
    float : none;
    width : 100%;
  }

  #blogRight {
    float : none;
    width : 100%;
  }

  #blogBottom {
    margin : 0 0;
    width : 100%;
  }
}


/* --------------------- VPO DOWLOAD PAGE ---------------------- */

.instruments-list {
  font-size : 14px;
  font-size : 1.4rem;
  clear : both;
}

.instruments-list table {
  border-collapse : collapse;
  font-size : 14px;
  font-size : 1.4rem;
}

.instruments-list table, .instruments-list th, .instruments-list td, .instruments-list tr {
  border: 1px solid #777;
  background-color : #ede5d6; /* darker OldLace */
}

.instruments-list td, .instruments-list th {
  padding-left : 5px;
  padding-left : 0.5rem;

  padding-right : 5px;
  padding-left : 0.5rem;

  padding-top : 0px;
  padding-bottom : 0px;
  vertical-align : top
}

.instruments-list th {
  background-color : #e1d8c9;
}

.instruments-list table.wood-strings-brass td:nth-child(2) {
  white-space : nowrap;  /* don't allow range column to wrap */
}

/* for small screens matching this max width */
@media only screen and (max-width: 360px) {
  .instruments-list table.wood-strings-brass td:nth-child(2) {
    white-space : normal;  /* allow range column to wrapping */
  }
}

#vpo-jump-buttons {
  text-align : center;
  width : 100%;
}

#vpo-jump-buttons a {
  display : inline-block;

  text-align: center;
  text-transform: uppercase;
  text-decoration : none;

  font-style : normal;
  font-size : 12px;
  font-weight: bold;

  background-color : #24598c;
  color : #fff;

  /* for older IE */
  filter : DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1);
  text-shadow : 2px 2px #000;

  /* for older browsers */
  padding-left : 6px;
  padding-right : 6px;
  padding-top : 4px;
  padding-bottom : 4px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 2px;
  margin-bottom: 2px;

  padding-left : 0.6rem;
  padding-right : 0.6rem;
  padding-top : 0.4rem;
  padding-bottom : 0.4rem;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;

  /* for other browsers, IE9+ */
  -webkit-border-radius:  8px;  /* for older browsers */
  -moz-border-radius:     8px;
   border-radius:         8px;

  -webkit-border-radius: 0.8rem;
  -moz-border-radius:    0.8rem;
   border-radius:        0.8rem;

}

#vpo-jump-buttons a:hover {
  background-color : #09a;  /* blue green */
}

#vpo-demo-music-cell-left {
  float : left;
  width : 45%;
}

#vpo-demo-music-cell-right {
  float : right;
  width : 50%;

  font-size : 14px;
  font-size : 1.4rem;
}

/* for small screens matching this max width */
@media only screen and (max-width: 519px) {
  #vpo-demo-music-cell-left {
    float : none;
    width : 100%;
  }

  #vpo-demo-music-cell-right {
    float : none;
    width : 100%;
  }
}

.vpo-demo-music-cell-clear {
  clear : both;
}

/* ---------------------- VPO DOWLOAD BOXES --------------- */

fieldset {
  padding: 10px;
  padding : 1.0rem;
  padding-top : 0px;
  padding-bottom : 0px;
  border : 1px solid #000;
  font-size : 14px;
  font-size : 1.4rem;
}

legend {
  margin : 0.5rem;
  padding-left : 5px;
  padding-right : 5px;
  font-weight : bold;
  background-color : #fff;
  border : 1px solid #000;
}

p.download-arrow-image {
  margin-top:-20px !important;
  margin-top:-2.0rem !important;

  margin-bottom:-0px !important;
}

fieldset.download, legend.download {
  background-color : #fff;
}

fieldset.download {
  max-width : 94%; /* make room for rounded corners and shadow */

/* --- shadow begins --- */
  -moz-box-shadow:    8px 8px 5px #888888;
  -webkit-box-shadow: 8px 8px 5px #888888;
  box-shadow:         8px 8px 5px #888888;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#888888')";

  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#888888');
/* --- shadow ends --- */

/* --- rounded corners begin --- */
  border: 2px solid #999;
  /* for other browsers */
   -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  /* for IE */
  behavior: url(wp-content/themes/virtualplaying/pie/pie/PIE.htc);
/* --- rounded corners begin --- */

}

fieldset.container, legend.container {
  background-color : #f7f7f7;
}


/* ------------------ LAZY LOAD ---------------------- */

/* these don't seem to be needed but I leave them here just in case */
.container-lazyload {
  border : 5px solid #000;
  background-color : #000; /* without this a thin strip of background shows through */
}

a.lazyload-info-icon {
  display : none !important;
}

/* hide blank paragraph tags that immediately follow a lazy loaded video */
.container-lazyload + p {
  display : none;
}

/* ------------------ OTHER INSTRUMENTS ---------------------- */
#otherInstruments h1 img {
  vertical-align : middle;
  margin-right : 10px;
}