/* ----------------------- All pages ------------------------------------*/
BODY
{
  background-color: #ffffff;
  font-family: Tahoma, "Lucida Grande", Arial, san-serif;
  font-size: 1em;
  font-weight: normal;
  color: #525252;
  border: 0px;
 margin:0;
 padding:0;
 /*max-width: 1600px;*/
}

* 
{
 margin:0;
 padding:0;
}


#pageContent
{
  margin-left: 4%;
  margin-right: 4%;
}


p, ul, li
{
}

.commentz
{
  visibility: hidden;
 display: none;
 height: 0;
}

#wrapper
{
}

.breadCrumbs
{
  /*
  padding-bottom: 1em;
  */
  padding-top: .5em;
}

.generalPhoto
{
 width: 100%;
 margin:.5em .5em .5em 0;
}

/* ----------------------- Home page ------------------------------------*/

#homeLeft
{
  clear: both;
  float: left;
  width: 49%;
  max-width: 49%;
}

#homeRight
{
  /*
  */
  float: right;
  width: 49%;
  max-width: 49%;
}

#homeRecipe
{
 /*
 clear:both;
 float: left;
 width: 50%;
 padding-bottom: 1em;
 */
 padding-top: 1em;
 position: relative;
 display:block;
 min-height: 5em; /* set to match overview min-height */
}

#homeRecipe p
{
 font-size: 1em;
 font-weight: normal;
 color: #5076bd;
}

#homeFeature
{
 /*
 top: 2em;
 float: right;
 */
 position: relative;
 padding-top: 1em;
 padding-bottom: 1em;
 z-index: 0;
}

#homePlayer
{
 /*
 top: 2em;
 float: right;
 */
 position: relative;
 padding-top: 1em;
 padding-bottom: 1em;
 z-index: 0;
}

/* The feature section has a bandcamp embedded player */
.homeFeaturePlayer
{ 

 visibility:visible; 
 display: inline-block;
 /* 
 visibility:hidden;    
 display: none;
 */
 position: relative;
 left: 0;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
 /*padding-top: 120px;  for the player controls*/
}

.homeFeaturePlayer iframe 
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

.smallHomeFeaturePlayer
{ 
 visibility:hidden;    
 display: none;
/*
 visibility:visible; 
 display: inline-block;
*/
 position: relative;
 left: 0;
 width: 100%;
 height: 120px;
 padding-bottom: 1em;
}

.smallHomeFeaturePlayer iframe 
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

/* these are the old method used for the home player */
.largeHomePlayer { visibility:visible; display: inline;}
.smallHomePlayer { visibility:hidden; display: none;}

.newMusicFeature
{
 text-align: center;
 padding: 1em;
 border: 0px solid #dadada;
}

.newMusicFeature h4 
{
 padding-bottom: .7em;
}


.newMusicFeature a
{
 margin-top: 0.5em;
 display: inline-block;
 border: 1px solid ;
 border-radius: .6em;
 padding-top: .2em;
 padding-bottom: .2em;
 padding-left: 1em;
 padding-right: 1em;
 min-width: 8em;
}

.newMusicFeature img
{
 width: 1.5em;
 height: 1.5em;
 padding-right: 0.5em;
 vertical-align: middle;
}

#homeVideo
{
 /*
 padding: .1em .2em .1em .2em;
 top: 2em;
 float: left;
 padding-top: 1em;
 */ 
 padding-bottom: 1em;

 position: relative;
 z-index: 0;
}

.videoWrapper 
{
  /*
   There's a great article about how to make iframes resize in a responsive layout.
     http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
 */
  position: relative;
  padding-bottom: 75%; /* 4:3 */
  /*padding-bottom: 56.25%;  16:9 */ 
  padding-top: 1em;
  height: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

.videoWrapper iframe 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoHeading
{
  margin-top: 1.5em;
}

.videoWrapperHD 
{
  /*
 */
  position: relative;
  /*padding-bottom: 75%;  4:3 */
  padding-bottom: 56.25%; /* 16:9 */ 
  padding-top: 1em;
  height: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

.videoWrapperHD iframe 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#homeFacebookWidget
{
 /*
 padding: .1em .2em .1em .2em;
 top: 2em;
 float: right;
 */
 position: relative;
 z-index: 0;
 width: 100%;
 padding-top: 1em;
 padding-bottom: 1em;
 /*padding-left: 1em;*/
 /*min-width: 200px;*/
}

#homeOverview
{
 /*
 float: left;
  width: 50%;
 */
 position: relative;
 display: block;
 padding-top: 1em;
 padding-bottom: 1em;
 min-height: 5em; /* set to match recipe min-height */
}

#homeLinks
{
 /*
 padding-top: .5em;
 padding-bottom: .5em;
 */
  position: relative;
  display: block;
}

#storeLinks
{
 width: 100%;
 padding-top: 1em;
 padding-bottom: 1em;
 /*padding-left: 2em;*/
 position: relative;
 display: block;
}

.linkButtonGroup
{
 text-align: center;
 padding: 1em;
 border: 1px solid #dadada;
}

.linkButtonGroup h4 
{
 padding-bottom: .7em;
}

.linkButtonGroup a
{
 margin-top: 0.5em;
 display: inline-block;
 /*border: 1px solid ;*/
 border-radius: .6em;
 padding-top: .2em;
 padding-bottom: .2em;
 padding-left: 1em;
 padding-right: 1em;
 /*min-width: 8em;*/
}

.linkButtonGroup img
{
 width: 1.5em;
 height: 1.5em;
 padding-right: 0.5em;
 vertical-align: middle;
}

.storeItemTable td
{
 padding-right: 1em;
 width: 100%;
 vertical-align: middle;
 white-space: nowrap;
}

.headingLink
{
  /*
  Used for headings that we want to have a rounded border with fill.
 padding: 1em 2em; 
 border: 1px solid #a1a1a1;
 background: #b8b8d0;
  */
 border: 1px solid #b8b8d0;
 border-radius: .4em;
 padding-left: .7em;
 padding-top: .1em;
 padding-bottom: .1em;
 margin-bottom: .5em;
}

.headingLink:before
{
  /*
   \221E is infinity
   \25BA is right pointing black triangle
   \223E or \007E is tilde
   \00A0 is non-breaking space
  */
  content: "\221E \00A0 \00A0";
}

.headingDiv
{
  /*
  Used for headings that we want to have a rounded border with fill.
 padding: 1em 2em; 
 border: 1px solid #a1a1a1;
 background: #b8b8d0;
  */
 border: 1px solid #b8b8d0;
 border-radius: .4em;
 padding-left: .7em;
 padding-top: .1em;
 padding-bottom: .1em;
 margin-bottom: .5em;
 background-color: #eeeeee; /*#f0f0ff;*/

 /* self clear the floats for contained elements */
 overflow: hidden;
}

.headingLeft
{
  float:left; 
}

.headingLeft:before
{
  /*
   \221E is infinity
   \25BA is right pointing black triangle
   \223E or \007E is tilde
   \00A0 is non-breaking space
  */
  content: "\221E \00A0 \00A0";
}


.headingRight
{
  /*
   \221E is infinity
   \25BA is right pointing black triangle
   \223E or \007E is tilde
   \00A0 is non-breaking space
  */
  float:right;
}

/* ----------------------- Albums page ------------------------------------*/

#catalog
{
  position: relative;
}

.albumPlayer
{
 /*
 top: 2em;
 float: right;
 */
 position: relative;
 padding-top: 1em;
 padding-bottom: 1em;
 z-index: 0;
}

.albumPlayer p
{
 font-size: 80%; /* a little smaller than usual */
}

.albumTitle
{
  /*
  Used for headings that we want to have a rounded border with fill.
  */
 border: 1px solid #b8b8d0;
 border-radius: .4em;
 padding-left: .7em;
 padding-top: .1em;
 padding-bottom: .1em;
 margin-bottom: .5em;
 background-color: #eeeeee; /*#f0f0ff;*/
}




/* ----------------------- Calendar page ------------------------------------*/
#calendarLayout
{
 position: relative;
  margin-top: 1em;
 padding-bottom: 66%;  /* 600 x 400 = 66% */
 height: 0;
 overflow: hidden;
}

#calendarLayout iframe 
{
 position: absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* ----------------------- BIO page ------------------------------------*/
#bioLayout
{
  /*
  left: 4em;
  top: 3em;
  */
  position: relative;
  padding-top: 1em;
}

#bioLayout p
{
  padding-bottom: .5em;
}

.biophoto IMG
{
 float: right;
 margin-left: 1%;
 margin-top: 1%;
 margin-bottom: 1%;
  border-top: 1px solid #AFAFAF;
  border-left: 1px solid #AFAFAF;
  border-bottom: 2px solid #202040;
  border-right: 2px solid #202040;
  padding: .3em;
}


/* ----------------------- top secret redeem download page ------------------------------------*/
#downloadCodeLayout
{
  /*
  left: 4em;
  top: 3em;
  */
  position: relative;
  padding-top: 1em;
}

#downloadCodeLayout p
{
 padding-bottom: .5em; 
}



/* ----------------------- Press Kit page ------------------------------------*/
#threeColContainer
{
  /*
  */
 clear:both;
}

#threeColContainer p
{
 margin-bottom:1em;
}

#threeColLeft 
{
 display: inline-block;
 float: left;
 width: 28%;
 padding-right: 1em;
}

#threeColRight 
{
 display: inline-block;
 float: right;
 width: 38%;
}

#threeColMiddle 
{
  width: 30%;
  display: inline-block;
  padding-right: 1em;
}

#threeColMiddle p
{
  margin-bottom: .5em;
}

#pressKitPress
{
  float: none;
 width: 100%;
 display: inline-block;
}

#pressKitPress p
{
  padding: .5em .5em .5em .5em;
 border: 1px solid #b8b8d0;
}

#pressKitPress p span
{
 font-style: italic;
}

.pressKitPhoto
{
  /*
  */
  width: 100%;
 margin:.5em .5em .5em 0;
}

.songList
{
  /*
  */
 list-style: none;
 padding: 0 0 1em 1em;
}


/* ----------------------- Contact Form page ------------------------------------*/

.contactForm
{
  /*
  padding-top: 0em;
  padding-bottom: 0em;
  */
  position: relative;
  width: 100%;
  padding-top: 1.5em;
}

.contactForm table
{
  border: 0;
  width: 100%;
  /*padding: 0em;*/
}

.contactForm tr:nth-child(odd)
{
  padding-top: 1.3em;
  padding-bottom: 0.1em;

}

.contactForm td
{
  padding: inherit; 
}



/* --
.FormButton
{
  background-color: #5076bd;
  border: none;
  color: white;
  border-radius: 0.4em;
  padding: .5em;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  margin: 0.4em;
  font-size: 1.5em;
}

input[type=button], input[type=submit], input[type=reset] 
{
}
 --*/

/* ----------------------- Videos page ------------------------------------*/
#performanceLayout
{
  position: relative;
 padding-top: 1em; 
}

#performanceLayout p
{
  padding-bottom: 1em;
}


/* ----------------------- Photos page ------------------------------------*/
#photoPageLayout
{
  position: relative;
 padding-top: 1em; 
}

.photoPageImage
{
  display: inline;
  padding-bottom: 1em;
  padding-right: 1em;
  width: 45%;
}

.photoPageStrip
{
  display: inline-block;
  width: 100%;
}

.photoPageStrip img
{
  display: inline;
  padding-bottom: 1em;
  padding-right: 1%;
  width: 30%;
}


/* ------------------  zoompic classes support the zoom-thumbnail-to-picture ----------------
  Based on "creating popup image viewer in css"
  http://webdesigninfo.wordpress.com/2007/05/26/creating-popup-image-viewer-in-css/
*/
.zoompic
{
 position: relative;
 z-index: 0;
}

.zoompic:hover
{
 background-color: transparent;
 z-index: 50;
}

.zoompic span
{ /*CSS for enlarged image*/
 position: absolute;
 background-color: white;
 /*padding: 5px;*/
 left: -1000px;
 border: 1px solid black;
 visibility: hidden;
 /*color: black;*/
 text-decoration: none;
}

.zoompic span img
{ /*CSS for enlarged image*/
 border-width: 0;
 padding: 2px;
}

.zoompic:hover span
{ /*CSS for enlarged image on hover*/
 visibility: visible;
 top: -100px;
 left: 10px; /*position where enlarged image should offset horizontally */
}

.zoompic a:visited, a:link, a:focus 
{
 outline: white none 0;
}


/* ------------------------ Footer and Header  -------------------------*/

#footer
{
  /*
  width: 100%;
  margin-top: auto;
  margin-left: auto;
  */
 clear: both;
 position: relative;
 display: block;
}

#footer img
{
  /*
  */
  height:2em;
}

ul.footerLinks 
{ 
  /*
  width: 100%;
  text-align: center;
  margin-top: auto;
  margin-left: auto;
  */
  font-size: 1em;
  list-style-type: none;
  padding-top: .5em;
  padding-bottom: .5em;
}

ul.footerLinks li
{
  /*
  t r b l
 padding: 1em 0.5em 1em 0em;
  */
 display: inline-block;
 padding-right: 0.5em;
 vertical-align: middle;
}

#header
{
  position: relative;
  display:block;
  font-size: 1em;
  overflow:hidden;
  }


#newlogoWrapper
{
 visibility:visible;
  position: relative;
  top: 0;
  border: 0;
}

#newlogoWrapper img { display: none; z-index:0; width: 100%;  height: auto;}
#newlogoWrapper img.firstImage { display: block; width: 100%;  height: auto;}

/* For the jQuery Cycle2 plugin to do the slideshow in the header */
.cycle-slideshow { width: 100% }
.cycle-slideshow img { width: 100%; height: auto }  

#newlogo
{
  /*
  */
  position: absolute;
  left: 2em;
  top: .5em;
  width: 100%; 
  text-align: left;
  color: #ffffff;
  z-index:1000;
}

.wfmLogo
{
 font-size: 2.2em;
}

.wfmSubTitle
{
 font-size: 1.5em;  
 padding-top: .8em;
}


/*-- Contact form and other forms use this --*/
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel], textarea 
{
  -webkit-appearance: none; -moz-appearance: none;
  display: block;
  margin: 0;
  width: 100%; 
  height: auto; /*1.5em;*/
  line-height: 1.7em; 
  font-size: 1.4em;
  border: 1px solid #bbb;
}

input[type=submit]
{
  -webkit-appearance: none; -moz-appearance: none;
  display: inline-block;
  margin: 0.4em;
  border: none;
  background-color: #5076bd;
  color: white;
  border-radius: 0.4em;
  padding: .5em;
  font-size: 1.5em;
  text-decoration: none;
  cursor: pointer;
}


/* -------------------------------- Adjust content for small devices ------------------------------*/

@media screen and (max-width: 900px)
{
 /* Adjust elements when the screen is less than max-width. */
 #homeLeft { float: none; max-width: 100%; width: 100%;}
 /*#homeRight { visibility: hidden; display: none;}*/
 #homeRight {float: none; max-width: 100%; width: 100%;}

 /* Adjust elements when the screen is less than max-width. */
 #newlogoWrapper img { display: none; z-index:0; width: 100%; height: 100%;}
 #newlogoWrapper img.firstImage { display: block; z-index:0; width: 100%; height: 100%;}
 #newlogo{left:2%; top:0; }
 
 .wfmLogo { visibility:hidden; display:none; height: 0;}
 .wfmSubTitle {width: 100%; font-size: 1.5em; padding-top: 1em;}

 #storeLinks { padding-top: 0;}

/* #homeFacebookWidget { padding-left: 0;}*/
 #homeFacebookWidget {visibility: hidden; display: none;}

 .biophoto img {float: none; width:95%;}

 #threeColLeft {float: none; width: 100%; margin-right: 0;}
 #threeColRight {float: none; width: 100%; margin-left: 0;}
 #threeColMiddle {float: none; width: 100%; margin-left: 0;}

 .photoPageImage {padding-right: 0; width: 95%;}

 .homeFeaturePlayer { visibility:hidden; display:none;}
 .smallHomeFeaturePlayer { visibility:visible; display:inline-block;}

}

@media screen and (max-width: 250px)
{ 
 #newlogo{left:0; top:0; text-align: center; }
 .wfmSubTitle {width: 100%; font-size: 1.1em; padding-top: 0.5em;}

 #homeLeft { float: none; max-width: 100%;}
 #homeRight { float: none; max-width: 100%;}

 #homeRecipe { visibility:hidden; display:none;}
 #homeFacebookWidget { visibility:hidden; display:none;}
 #homeOverview { width: 100%;}

/*
 .largeHomePlayer { visibility:hidden; display:none;}
 .smallHomePlayer { visibility:visible; display: inline;}
*/
}


/* -------------------------------- A tags ------------------------------*/
A:link
{
  text-decoration: none;
  color: #5076bd;
}
A:visited
{
  text-decoration: none;
  color: #4066ad;
}
A:hover
{
  text-decoration: none;
  color: #CF1111;
}

#logo A
{
  text-decoration: none;
  color: #AF3333;
}

#homeRecipe A, span
{
 font-weight: bold;
 color: #5076bd;
}

#homeRecipe A:hover
{
 font-weight: bold;
  color: #5076bd;
}