/**
 * CSS for Hue Hunt
 * Base
 * Alexandre Andrieux @2015 (October)
 */

 /** Fonts **/
 @import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz");
 @import url("https://fonts.googleapis.com/css?family=Playball");
 @import url("https://fonts.googleapis.com/css?family=Poiret+One");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");

/** Boilerplate style **/
* {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-align: center;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-family: 'Playball', sans-serif;
  font-family: 'Poiret One', sans-serif;
  font-family: 'Open Sans Condensed', sans-serif;
}
*:not(input) {
  /* No selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* No unwanted drag */
  -webkit-user-drag: none;
  user-drag: none;
  cursor: default;
}
html,
body {
  height: 100%;
  width: 100%;
}
p {
  white-space: pre-wrap;
}

/** Useful classes **/
.flexcol {
	display: -webkit-flex;/* Safari, douchebag */
	display: -ms-flex;/* IE <3 */
	display: flex;
	-ms-flex-flow: column nowrap;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.flexrow {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.targetcolor {
  /* Color defined in controllers */
}
.acidbutton {
  color: black;
  text-decoration: none;
  background: transparent linear-gradient(hsl(0, 0%, 67%), hsl(0, 0%, 27%)) repeat scroll 0% 0%;
  border-radius: 2px;
  padding: 2px 50px;
  font-size: 1.5em;
  font-weight: bold;
  margin: 15px 0px 0px;
  border: medium none;
  cursor: pointer;
  box-shadow: 0px 0px 3px black;
}
.acidbutton:hover {
  background: transparent linear-gradient(hsl(200, 100%, 50%), hsl(200, 100%, 20%)) repeat scroll 0% 0%;
}

/** Base style **/
body {
  background: #111;
}
p {
  color: #DDD;
}
h2 {
  color: #eee;
  font-size: 1.5em;
  font-family: Poiret One;
  background: radial-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0));
  text-transform: uppercase;
  text-shadow: black 1px 1px 2px;
}

/** Insightwrapper **/
#insight {
  /* Color defined in controllers */
  height: 92%;
  width: 95%;
  margin-top: 2%;
  margin-left: 2%;
  border-radius: 2px;
}

/** Instructions **/
#instructions {
  width: 100%;
  margin-top: 0px;
  background: #333;
}
#instructions p {
  font-size: 1.2em;
  text-align: left;
  margin-left: 50px;
}

/** Footer **/
#footer {
  width: 100%;
  padding: 10px 0px;
}
#footer p {
  font-size: 1em;
  color: #555;
}
#footer a {
  cursor: pointer;
  text-decoration: none;
  color: #777;
}
#footer a:hover {
  color: #BBB;
}

#insight .targetcolor.smallsquare {
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 5px;
  border: #111 2px solid;
}

.avatar {
  /* Colors defined in controllers */
  width: 50px;
  height: 50px;
  margin: 0px 10px;
  border-radius: 12.5px;
  border: solid 3px #111;
  overflow: hidden;
  position: relative;/* For kids */
}
.avatar .square {
   position: absolute;
   width: 25px;
   height: 25px;
}
.avatar .square:nth-of-type(1) {
  border-radius: 9.5px 0 0 0;
  top: 0;
  left: 0;
}
.avatar .square:nth-of-type(2) {
   border-radius: 0 9.5px 0 0;
   top: 0px;
   left: 25px;
}
.avatar .square:nth-of-type(3) {
   border-radius: 0 0 0 9.5px;
   top: 25px;
   left: 0px;
}
.avatar .square:nth-of-type(4) {
   border-radius: 0 0 9.5px 0;
   top: 25px;
   left: 25px;
}
.avatar .head,
.avatar .body {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.avatar .head {
  width: 20px;
  height: 20px;
  left: 15px;
  top: 8px;
}
.avatar .body {
  width: 30px;
  height: 40px;
  left: 10px;
  top: 26px;

}