.fork {
  border:0;
  position:absolute;
  top:0;
  right:0;
}

h3.repertoires {
  margin: 0;
	background-color: #f5f5f5;
	background-image: linear-gradient(bottom,#f5f5f5 0,#e8e8e8 100%);
	background-image: -o-linear-gradient(bottom,#f5f5f5 0,#e8e8e8 100%);
	background-image: -moz-linear-gradient(bottom,#f5f5f5 0,#e8e8e8 100%);
	background-image: -webkit-linear-gradient(bottom,#f5f5f5 0,#e8e8e8 100%);
	background-image: -ms-linear-gradient(bottom,#f5f5f5 0,#e8e8e8 100%);
    color: #333;
    border-color: #ddd;}

h3.repertoires a {
  background: url("sprite.png") 5px 3px no-repeat;
  display: block;
  padding: 0px;
  padding-left: 32px;
  margin: 0;
  color: black;
  text-decoration: none;
  font-weight: normal;
	font-size: 85%;
  xborder-bottom: 1px solid rgba(128, 10, 85, 0.5);
  xtext-shadow: 1px 1px 1px rgb(128,10,85);
}
h3.reperoires:hover { background: #E8E8E8; }
h3.open  { background: #E8E8E8; }
h3.open a { background-position: 3px -33px; }
h3 + div { padding: 10px; }

/* Pre hide sections with JavaScript on
--- */
h3+div {
  display: none;
}

/* Event example
--- */
pre#event-log {
  background: #fafacc;
  padding: 10px;
  display: block;
}

/* Responsive design
--- */
@media screen and (max-width: 1056px) {
  body {
    width: 672px;
  }
  .c2 {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.test { background: #ccc; padding: 10px; border-bottom: 1px solid #aaa;}
.test + div { background: #fff; padding: 10px; }

@media
only screen and (max-width: 704px),
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  body {
    width: 320px;
  }
  .c1 {
    margin-right: 0;
    margin-bottom: 0;
  }
  h1 {
    font-size: 28px;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.7);
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  body {
    padding: 0 12px;
  }
}