/* tag styles */

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #333;
}

img {
  border: none;
}

a, a:visited {
  color: #f90;
}

a:hover, a:visited:hover {
  color: #f60;
}

p {
  margin: 0 0 .5em 0;
  line-height: 1.4em;
}

h1, h2, h3, h4 {
  margin: .5em 0 1em 0;
  padding: 0;
  color: #f90;
  font-weight: normal;
}

h1 {
  font-size: 62px;
  letter-spacing: -2px;
  line-height: 1em;
}

h2 {
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1em;
}

h3 {
  font-size: 20px;
  line-height: 1.1em;
}

h4 {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4em;
}

ul li {
  list-style-image: url(/images/icons/arrow.png);
  line-height: 1.4em;
}

/* layout styles */

#content {
  margin: 0 auto;
  padding: 0 37px;
  width: 780px;
  background: url(/images/bg/content.png) repeat-y;
}

#header {
  margin: 30px -37px 0 -37px;
  padding: 12px;
  height: 90px;
  background: url(/images/bg/header.png) no-repeat;
  text-align: right;
}

#footer {
  clear: both;
  margin: 0 -37px 2em -37px;
  padding: 1em 37px;
  background: url(/images/bg/footer.png) left bottom no-repeat;
}

#footer p {
  padding-top: .5em;
  border-top: 1px solid #ccc;  
}

/* helper styles */

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* general content styles */

.alternate {
  color: #000;
}

#footer a, #footer a:visited {
  color: #333;
}

#footer a:hover, #footer a:visited:hover {
  color: #f60;
}

h3.in_text {
  margin-top: 1em;
}

.tooltip {
  padding: 3px;
  width: 300px;
  background-color: #eee;
  border: 1px solid #ccc;
  font-size: 13px;
}

/* form styles */

.actions {
  margin: 1em 0;
  padding: .5em;
  background-color: #eee;
  border-top: 1px solid #ccc;
}

/* error and notice styles */

#errorExplanation {
  margin: 1em 0;
  padding: .5em 0 .75em 0;
  border-top: 1px solid #c00;
  border-bottom: 1px solid #c00;
}

#errorExplanation h2 {
  font-size: 15px;
  font-weight: bold;
  color: #c00;
  letter-spacing: 0;
}

#errorExplanation ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.fieldWithErrors input,
.fieldWithErrors textarea,
.fieldWithErrors select {
  border-color: #c00;
}

.notice {
  padding: .5em 0;
  border-bottom: 1px solid #ccc;
  color: #999;
  font-weight: bold;
}

.notice p {
  margin-bottom: 0;
}

/* homepage styles */

ol.steps {
  margin: 2em 0 2.5em 0;
  padding: 0;
}

ol.steps li {
  float: left;
  margin: 0;
  padding: 110px 20px 0 0;
  width: 180px;
  background-position: 10px 0;
  list-style-position: inside;
  background-repeat: no-repeat;
  color: #f90;
}

ol.steps li {
  font-weight: bold;
}

ol.steps li.inactive {
  color: #fc9;
  font-weight: normal;
}

ol.steps li#choose_style {
  background-image: url(/images/icons/choose_style.png);
}

ol.steps li#choose_style.inactive {
  background-image: url(/images/icons/choose_style_inactive.png);
}

ol.steps li#describe_yourself {
  background-image: url(/images/icons/describe_yourself.png);
}

ol.steps li#describe_yourself.inactive {
  background-image: url(/images/icons/describe_yourself_inactive.png);
}

ol.steps li#listen_to_sound {
  background-image: url(/images/icons/listen_to_sound.png);
}

ol.steps li#listen_to_sound.inactive {
  background-image: url(/images/icons/listen_to_sound_inactive.png);
}

ol.steps li#sign_up {
  padding-right: 0;
  background-image: url(/images/icons/sign_up.png);
}

ol.steps li#sign_up.inactive {
  background-image: url(/images/icons/sign_up_inactive.png);
}

ol.steps li h4 {
  display: inline;
  margin-left: -8px;
  color: #f90;
}

ol.steps li.inactive h4 {
  color: #fc9;
  font-weight: normal;
}

ol.steps li p {
  display: inline;
  color: #333;
  font-weight: normal;
}

ol.steps li.inactive p {
  color: #999;
}

ol.steps li ul {
  padding: 0;
}

ol.steps li ul li {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

/* example styles */

.example {
  float: left;
  margin-right: 20px;
  width: 240px;
}

.example object {
  display: block;
  width: 240px;
}

/* team styles */

.member {
  clear: both;
  margin-bottom: 2em;
}

.member img {
  float: left;
  margin-right: 20px;
}

/* questionnaire styles */

.questionnaire h3 {
  margin: 1em 0 .5em 0;
}

.questionnaire div.entry {
  clear: both;
}

.questionnaire label {
  line-height: 2em;
  font-weight: bold;
}

.questionnaire .text_little,
.questionnaire .slider {
  float: left;
}

.questionnaire .text_little {
  width: 235px;
}

.questionnaire .slider {
  padding: 0 20px;
  width: 250px;
}

.questionnaire .text_much {
  float: right;
  width: 235px;
}

.questionnaire .actions .buttons {
  float: left;
  margin-right: 10px;
  width: 225px;
}

.questionnaire .actions .spinner {
  float: left;
  position: relative;
  margin-bottom: 0;
}

.questionnaire .actions .spinner img {
  position: absolute;
}

.questionnaire .actions .spinner span {
  display: block;
  margin-top: 69px;
  padding: 0 .5em;
  background-color: #fff;
}

.questionnaire .actions #soundbadge_preview p {
  margin-top: 1em;
  font-weight: bold;
}

/* hiphop styles */

.hiphop #content h1 {
  background: url(/images/bg/header_hiphop.jpg) no-repeat;
}

li.hiphop {
  list-style-image: url(/images/icons/arrow_hiphop.png);
}

li.hiphop a, li.hiphop a:visited,
.hiphop .alternate,
.hiphop label {
  color: #B21;
}

li.hiphop a:hover, li.hiphop a:visited:hover {
  background-color: #B21;
  color: #fff;
}

.hiphop .questionnaire .actions {
  color: #B21;
}

.hiphop .questionnaire .actions .spinner img {
  left: 120px;
  top: -27px;
}

.hiphop .questionnaire .actions .spinner span {
  border: 1px solid #c00;
}

/* electro styles */

.electro #content h1 {
  background: url(/images/bg/header_minimal.png) no-repeat;
}

li.electro {
  list-style-image: url(/images/icons/arrow_minimal.png);
}

li.electro a, li.electro a:visited,
.electro .alternate,
.electro label {
  color: #90f;
}

li.electro a:hover, li.electro a:visited:hover {
  background-color: #90f;
  color: #fff;
}

.electro .questionnaire .actions {
  color: #90f;
}

.electro .questionnaire .actions .spinner img {
  left: 145px;
  top: -24px;
}

.electro .questionnaire .actions .spinner span {
  border: 1px solid #90f;
}

/* country styles */

.country #content h1 {
  background: url(/images/bg/header_country.jpg) no-repeat;
}

li.country {
  list-style-image: url(/images/icons/arrow_country.png);
}

li.country a, li.country a:visited,
.country .alternate,
.country label {
  color: #753;
}

li.country a:hover, li.country a:visited:hover {
  background-color: #753;
  color: #fff;
}

.country .questionnaire .actions {
  color: #753;
}

.country .questionnaire .actions .spinner img {
  left: 110px;
  top: -23px;
}

.country .questionnaire .actions .spinner span {
  border: 1px solid #753;
}

/* SLIDER  */

/* put the left rounded edge on the track */
.track-left,
.track-left-color {
	position: absolute;
	width: 5px;
	height: 9px;
	background: transparent url(/images/sliders/track_left_default.png) no-repeat top left;
}

.track-left-color {
  background: transparent url(/images/sliders/track_left_color.png) no-repeat top left;
}

/* put the track and the right rounded edge on the track */
.track,
.track-color {
  margin: 0 auto;
  width: 250px;
  height: 20px;
	background: transparent url(/images/sliders/track_right_default.png) no-repeat top right;
}

.track-color {
  background: transparent url(/images/sliders/track_right_color.png) no-repeat top right;
}