body {
	text-align:center;
    font-family: Helvetica;
    letter-spacing: 3px;
    margin:20px;
}

h1 {
    text-transform: uppercase;
    font-size: 21px;
    font-weight:200;
    margin:40px auto 10px;
    white-space: nowrap;
}

p {
    font-size: 10px;
    font-weight: 200;
    text-transform: uppercase;
}

a {
    color:#000;
}

a:hover {
    color:#999;
}

hr {
    border: none;
    height: 2px;
    background: #000;
    margin: 30px -20px 20px;
}


#control {
	margin:20px auto 60px;
	cursor:pointer;
}

#control #color {
	height:150px;
	margin:15px auto;
	white-space: nowrap;
}

#control #color div {
    display: inline-block;
    width: 20px;
    border: 2px solid #000;
    margin:4px;
}

#control #color div.unselected {
    height:20px;
    margin-top:120px;
    cursor: pointer;
    transition: height 400ms, margin-top 400ms;
}

#control #color div.selected {
	height:140px;
	margin-top:0px;
    transition: height 300ms, margin-top 300ms;
}

#control #color div.unselected:hover {
    cursor: pointer;
	height:70px;
	margin-top:70px;
    transition: height 100ms, margin-top 100ms;
}

#control #other {
}

#control #other div, #control #shows div, .reset {
    display: inline-block;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: normal;
    border: 2px solid #000;
    padding: 4px 8px 4px 10px;
    margin: 5px 2px;
    width: auto;
    cursor: pointer;
}

@-moz-document url-prefix() { 
#control #other div, #control #shows div {
    padding-top:7px;
}
}

#control #other div.unselected, #control #shows div.unselected, .reset {
	background-color:#fff;
	color:#000;
    transition: background-color 400ms, color 400ms;
}

#control #other div.unselected:hover, #control #shows div.unselected:hover, .reset:hover {
	background-color:#ccc;
    color:#000;
    transition: background-color 200ms, color 200ms;
}

#control #other div.selected, #control #shows div.selected {
    background-color:#000;
    color:#fff;
    transition: background-color 200ms, color 200ms;
}

#control #other div#shows {
	width: 120px;
}

#control #red { background-color: #d00 }
#control #flame { background-color: #F76014 }
#control #orange { background-color: #FD9827 }
#control #gold { background-color: #FECB2E }
#control #yellow { background-color: #FFFD38 }
#control #lime { background-color: #be0 }
#control #green { background-color: #0c0 }
#control #olive { background-color: #525B1C }
#control #teal { background-color: #1A7C78 }
#control #blue { background-color: #376BFB }
#control #sky { background-color: #9DB8F4 }
#control #navy { background-color: #30c }
#control #purple { background-color: #639 }
#control #lavender { background-color: #CB9CFC }
#control #maroon { background-color: #A2334E }
#control #pink { background-color: #FD9BCB }
#control #fuchsia { background-color: #d07 }
#control #peach { background-color: #F9DCB5 }
#control #tan { background-color: #E2C176 }
#control #brown { background-color: #93411D }
#control #taupe { background-color: #442F29 }
#control #pale { background-color: #F7F4DF }
#control #silver { background-color: #ccc }
#control #gray { background-color: #666 }
#control #white { background-color: #fff }
#control #black { background-color: #000 }

#shows {
	display: none;
    max-width: 1000px;
    margin: 15px auto 0;
}

#control #other div.reset {
    display: none;
}

#noresults {
    display: none;
    margin-bottom: -154px;
    padding-top: 30px;
}

#characters {
	margin:60px auto 150px;
    min-height: 300px;
}

#characters .character {
    display:inline-block;
    margin: 4px 5px 10px;
}

#characters .character p {
    position: absolute;
    opacity: 0;
    transition: opacity 600ms;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: normal;
    margin: -8px auto 0;
    z-index: 20;
    text-align: center;
    width: 122px;
    line-height: 12px;
}

@-moz-document url-prefix() { 
#characters .character p {
    padding-top:7px;
}
}

#characters .character:hover p {
    opacity: 1;
    transition: opacity 400ms;
}

#characters .character img {
	display:inline-block;
	width:100px;
	height:100px;
	padding:10px;
    z-index: 0;
}