/*
	// CSS for MOATmix.com
	// Created by Terrill Thompson, terrill@terrillthompson.com
*/

/*
  Main structure
*/
body {
	font-family: Arial;
	color: #e0e0e0;
	font-size: 1em;
	background-color: #000;
  /* width: 1000px; */
  font-weight: normal;
  margin: 1em auto;
}
div#content {
  display: none;
/*
    width: 1250px;
  margin: 0 auto;
*/
}
header {
  float: left;
  text-align: center;
  max-width: 500px;
  width: 25%;
}
main {
  float: left;
  position: relative;
  min-height: 500px;
  width: 500px;
  margin-top: 100px;
  padding-left: 20px;
}
nav {
  float: left;
  width: auto; /* was 8em */
  margin-left: 50px;
  border-left: 5px solid #666;
  padding-left: 0.5em;
  margin-top: 100px;
}
footer {
  clear: left;
  font-size: 0.9em;
  color: #aaa;
  padding-top: 50px;
  text-align: left;
  margin-left: 2.5em;
}
footer a {
  color: #ccc;
}

/*
  Common HTML Elements
*/
h2 {
  font-size: 2em;
  margin-bottom: 0.15em;
  text-align: center;
  color: #fff;
}
h2 span.featured {
  display: block;
  font-size: 0.6em;
  font-style: italic;
  line-height: 1.25em;
}
p, ol {
	font-size: 1.1em;
  line-height: 1.5em;
}
main ul,
main ol {
  font-size: 1.1em;
  text-align: left;
}
a {
  color: #FFF;
  text-decoration: underline;
}
a:hover,
a:focus,
input:hover,
input:focus {
  outline: 2px solid #74B132; /* gator green */
  text-decoration: none;
}
strong {
  color: #FFF;
  font-weight: bold;
}

/*
  Header
*/
header[role="banner"] img {
  /* width: 400px; */
  max-width: 100%;
}
.tagline {
  font-size: 1.2em;
  font-style: italic;
  letter-spacing: 0.15em;
  padding-left: 10px;
}
.tagline b {
  font-size: 1.4em;
}

/*
  Main
*/
main p {
  width: 520px;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}
main#about p {
  margin: 1em auto;
  text-align: left;
}
/*
button#introToggle {
  margin: 1em auto;
  width: 7em;
  display: none;
}
*/
main p#intro {
  text-align: left;
}
main#about p.support {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 1em;
}
div.addthis_sharing_toolbox {
  text-align: center;
}
main.fullscreen {
  width: 100%;
  margin: 0;
  padding: 0;
}
main.shh h1 {
  font-size: 1.4em;
}
main.shh p {
  text-align: left;
  margin: 1em auto;
}
main.shh p.salutation {
  color: #fff;
  margin-left: 2em;
  font-size: 1.2em;
  font-weight: bold;
}
main.shh ol li {
  margin-bottom: 1em;
}

/*
  Login
*/
#keep-out {
  display: block;
  width: 700px;
  max-width: 100%;
  margin: 100px auto;
  text-align: center;
}
#keep-out button {
  margin: 0;
  padding: 0;
  background-color: #000;
  border: 0;
  height: 203px;
  width: 429px;
  max-width: 90%;
  margin: 0 auto;
  opacity: .3;
}
#keep-out button:hover,
#keep-out button:focus {
  cursor: pointer;
  opacity: 1 !important;
}
#keep-out button img {
  width: 100%;
}
#keep-out p {
  font-size: 2em;
  line-height: 1.5em;
  color: #fff;
  margin: 1em auto;
  display: none;
}
#keep-out div#message2 {
  display: none;
}
#keep-out div#message2 p {
  display: block;
}
#keep-out div#buttons {
  width: 13em;
  font-size: 2em;
  margin: 0 auto;
  display: block;
}
#keep-out div#buttons button {
  display: block;
  float: left;
  color: #FFF;
  background-color: #000;
  width: 6em !important;
  height: auto !important;
  opacity: 1 !important;
  border: none;
  outline-style: solid;
  outline-width: medium;
	outline-color: #C0C0C0;
  height: 203px;
  width: 429px;
  opacity: 1;
  margin: 0 0.25em;
  padding: 0.25em;
  text-align: center;
}

/*
  Able Player
*/
div.able {
  margin: 1em auto;
  border: 3px solid #14143D; /* deep violet */
  border-radius: 15px;
}
.modalDialog {
  color: #000;
  position: fixed !important;
  top: 10% !important;
}
div.able-player div.able-controller button:hover {
	outline-color: #ffbb37 !important; /* yellow */
}


/*
  Mix List
*/
nav#mixList h2 {
  font-size: 1.5em;
  margin-bottom: 0.25em;
}
nav#mixList ul {
  margin-top: 0;
  margin-left: 0;
  background-color: black; /* !important; */
  padding-left: 1.15em;
  font-size: 1.1em;
  list-style-type: none;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}
nav#mixList li {
  margin: 0;
  padding: 0;
  background-color: black; /* !important; */
  border: 2px solid black; /* !important; */
  line-height: 1.5em;
  text-indent: -1em;
}
nav#mixList li button {
  width: 6em;
  padding: 0;
  color: #b3b3b3; /* !important; light gray */
  background-color: transparent;
}
nav#mixList li.able-current button {
  color: #fff;
  font-weight: bold;
}
nav#mixList li.able-current button:after {
  content: ' *';
}
nav#mixList li button:hover,
nav#mixList li button:focus,
nav#mixList li button:active {
  outline-style: solid;
  outline-width: medium;
	outline-color: #ffbb37; /* yellow, same as Able Player */
	cursor: pointer;
}

/*
  "Show Artists" checkbox
*/
div#showArtistsToggle {
  margin: 1.5em auto;
  text-align: center;
}
div#showArtistsToggle label {
  border: solid medium #000;
}
div#showArtistsToggle label.focus,
div#showArtistsToggle:hover label {
  outline: none;
  cursor: pointer;
  border: solid medium #ffbb37; /* yellow */
}
div#showArtistsToggle > input[type="checkbox"] {
  opacity: 0;
}
div#showArtistsToggle > input[type="checkbox"]+ label {
  background: transparent url('../images/checkbox_unchecked.png') no-repeat;
  background-size: contain;
  height: 32px;
  padding-left: 40px;
  font-size: 1.4em;
  vertical-align: middle;
  display: inline-block;
}
div#showArtistsToggle > input[type="checkbox"]:checked + label {
  background: transparent url('../images/checkbox_checked.png') no-repeat;
  background-size: contain;
}

/*
  Artists/Samples
*/
div#samples {
  display: block;
}
div.sample {
  clear: left;
  position: relative;
  border:  1px solid #999;
  border-radius:  15px;
  padding: 15px;
  margin: 15px auto;
  min-height: 160px;
  max-width: 100%;
  display: none;
}
div.sample > img {
  float: left;
}
div.artist-title {
  padding-left: 175px; /* allow space for 160px album cover */
  text-align: left;
}
div.sample div.artist {
  font-size: 1.4em;
  font-weight: bold;
}
div.sample div.title {
  font-size: 1.2em;
  font-weight: bold;
}
div.musicIcons {
  position: absolute;
  bottom: 10px;
  left: 180px;
}
div.musicIcons div {
  float: left;
  padding-left: 10px;
}
div.musicIcons div.available-on {
  float: none;
  display: block;
  font-style: italic;
  font-size: 1.1em;
  margin: 0.5em 0 0;
  padding-left: 10px;
}

/*
  Button Styles
*/
button {
  font-size: 1em;
  color: #340449;
}
button:hover,
button:focus {
  /* same colors as the "M" in "Mix" */
  color: #850E20;
  background-color: #DDD597;
  /* outline matches other focusable elements */
  outline-style: solid;
  outline-width: medium;
	outline-color: #ffbb37 !important;
}
/*
  Misc Styles
*/
.clipped {
	/* hide from sighted users, but not screen reader users */
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
}
div.singleColumn {
  padding-right: 6em;
  padding-top: 1em;
}
div.singleColumn p {
  width: 100%;
  text-align: left;
  margin-bottom: 1em;
}

/*
  Login Form (if there was one)
*/
div#formWrapper {
  margin: 1em 2em;
  padding: 1em;
  border: 1px solid #CCC;
}
form.user div {
  margin: 1em 0;
}
form.user label {
  display: block;
  font-size: 1.1em;
  margin: 0 0 0.25em;
}
#loginHelp {
  font-size: 0.9em;
  margin: 0;
}
form.user input[type="submit"] {
  font-size: 1.1em;
  border-radius: 5px;
  background-color: #74B132; /* gator green */
}
form.user input[type="submit"]:active {
  background-color: black;
  color: #74B132;
}
form.user {
  text-align: left;
}
form.user input[type="text"] {
  width: 100%;
  font-size: 1em;
}
form.user input.short {
  max-width: 10em;
}
div#alert {
  color: #FF0; /* yellow */
  font-weight: bold;
}
#alert a {
  color: #CC0; /* goldish */
}

/*
  Responsive Structure
*/

@media (max-width: 1100px) {
	/* the point below which the double-column mix menu starts looking crowded */
  body {
    /* background-color: green !important; */
  }
  nav#mixList ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -o-column-count: 1;
    column-count: 1;
  }
}
@media (max-width: 1040px) {
	/* the point at which the menu (with left margin) floats below main content */
	/* display Mixes horizontally, rather than vertically */
  body {
    /* background-color: yellow !important; */
  }
  main {
    min-height: 100px;
  }
  nav#mixList {
    border-left: none;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    clear: both;
  }
  nav#mixList ul {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
  }
  nav#mixList ul li::before {
    content: "";
  }
  /*
  p#intro {
    display: none;
  }
  button#introToggle {
    display: block;
  }
  */
  .tagline {
    font-size: 1em;
  }
  .tagline b {
    font-size: 1.2em;
  }
}
@media (max-width: 680px) {
	/* the point at which the logo no longer fits as a float */
	/* and the media player & samples blocks no longer fit at their fixed width */
  body {
    /* background-color: red !important; */
  }
  #keep-out {
    margin-top: 0;
  }
  #keep-out p {
    font-size: 1.5em;
  }
  header, main, nav {
    position: relative;
    width: 100%;
    text-align: center;
  }
  header {
    float: none;
    max-width: 10000px !important;
  }
  header img {
    float: left;
    width: 166px;
    height: 98px;
    padding: 0;
  }
  header h1.tagline {
    float: left;
    font-size: 16px;
    padding: 30px 0 0 10px;
    text-align: left;
  }
  main {
    float: none;
    clear: left;
    width: 100%;
    padding-left: 0;
    margin-top: 0;
  }
  /*
  button#introToggle {
    position: fixed;
    right: 0;
    top: 0;
  }
  */
  main#about p,
  p#intro {
    padding: 0 1em ;
    max-width: 88%;
  }
  nav#mixList {
    margin-left: 0;
    border-top: thin solid #666;
  }
  nav#mixList ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
  }
  #keep-out div#buttons button {
    max-width: 40%;
  }
  div.able-wrapper {
    min-width: 95%;
  }
  div.able {
    max-width: 95%;
  }
  div.sample {
    max-width: 88%;
  }
}

/* =Print
----------------------------------------------- */

@media print {
  /* Why are you printing MOATmix.com? */

}