* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Raleway;
}

#wrapper {
	width: 100%;
	height: 100%;
}

.clearfix {
	clear: both;
}

.animated {
	-webkit-transition: all 500ms ease; 
  -moz-transition: all-color 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.animated_all * {
	-webkit-transition: all 1s ease;
  -moz-transition: all-color 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.animated_fast_all * {
	-webkit-transition: all 0.5s ease;
  -moz-transition: all-color 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/**
 * Background
 */

#bg1 {
	z-index: -10;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#edccf9+0,f3e8f7+100 */
	background: rgb(237,204,249); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(237,204,249,1) 0%, rgba(243,232,247,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(237,204,249,1) 0%,rgba(243,232,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(237,204,249,1) 0%,rgba(243,232,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edccf9', endColorstr='#f3e8f7',GradientType=0 ); /* IE6-9 */
}

#bg2 {
	z-index: -5;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #fff;
	opacity: 0;
	-webkit-animation-name: pulsate;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
	0% { opacity: 0.0 }
	50% { opacity: 0.5 }
	100% { opacity: 0.0 }
}

/**
 * FX
 */

#snow {
	z-index: -3;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

/**
 * Header
 */

header {
	width:100%;
	padding: 20px 0;
	background: rgba(255, 255, 255, 0.25);
}

#header-wrapper {
	height: 200px;
	margin: 50px auto;
	text-align: center;
}

#header-wrapper img {
	height: 100%;
}

/**
 * Main
 */

main {
	text-align: center;
	font-size: 1.6rem;
	line-height: 2rem;
	color: #999;
	font-family: Calligraffitti;
	padding-bottom: 25px;
}

/**
 * Administration
 */

.admin {
	margin-top: 40px;
}

.admin textarea {
	width: 500px;
	height: 200px;
	margin-top: 10px;
}

.admin button {
	display: block;
	margin: 20px auto;
	padding: 20px;
	font-size: 1.25em;
	font-family: Calligraffitti;
	outline: none;
	color: #999;
	border: none;
	background: rgba(255, 255, 255, 0.25);
	transition: all 0.5s;
}

.admin button.disabled,
.admin button.disabled:hover {
	opacity: 0.25 !important;
	cursor: default !important;
	color: #999;
	background: rgba(255, 255, 255, 0.25) !important;
}

.admin button:hover {
	cursor: pointer;
	color: #333;
	background: rgba(255, 255, 255, 0.75);
}

.users {
	width: 50%;
	margin: 50px auto;
}

.users .user {
	cursor: default;
	color: #999;
	background: rgba(255, 255, 255, 0.6);
	margin: 20px auto;
	padding: 20px;
}

.users .user input {
	width: 100%;
	background: none;
	border: 1px solid #999;
	padding: 4px;
}

.users .user input.empty {
	display: none;
}

.users .user.drawn {
	display: block;
}

.users .user:hover {
	color: #fff;
	background: rgba(240, 200, 255, 0.8);
}