archive/hourglass/client/profile/profile.css

#profPageWrapper {
	width: 100%;
	height: 100%;

	background-color: #282933;
	color: #FCF0F0 !important;

	position: absolute;
	top: 0;
	left: 0;

	user-select: none;
}

#profPageWrapper input {
	color: #FCF0F0 !important;
}

#profPageWrapper .optionText {
	background-color: #282933 !important;
}

#profPageWrapper #classSearch {
	background-color: rgba(0,0,0,0.1);
	border: 0;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#profPageWrapper #classSearch:hover {
	background-color: rgba(0,0,0,0.2);
}

#profPageWrapper .classBox:not(#label) {
	border: 1px solid #FCF0F0 !important;
}

#basicInfo {
	width: 100%;
	position: absolute;
	top: 20%;
}

#newUserWrapper {
	width: 25%;
	padding: 2%;
	margin: auto;

	background-color: rgba(255,255,255,0.2);
}

#newUserWrapper .formDiv {
	position: relative;
}

.opTitle {
	font-weight: 200;
	margin: 1%;
}

#basicNext {
	font-weight: 200;
	padding: 2%;
	border: 1px solid #FCF0F0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	cursor: pointer;
	text-align: center; 

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#basicNext:hover {
	background-color: rgba(0,0,0,0.1);
}

#backArrow {
	margin: auto;
	z-index: 10;
	cursor: pointer;
	opacity: 0;

	position: relative;
	top: 5%;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#backArrow i {
	line-height: 5vh;
}

#backArrow:hover {
	background-color: rgba(255,255,255,0.05);
}

#forwardArrow {
	margin: auto;
	z-index: 10;
	cursor: pointer;
	opacity: 0;

	position: relative;
	top: 85%;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#forwardArrow:hover {
	background-color: rgba(255,255,255,0.05);
}

#enrollInfo {
	width: 100%;
	position: absolute;
	top: 150%;	
}

#enrollUserWrapper {
	width: 60%;
	height: 60vh;
	margin: auto;
	padding: 1%;
	background-color: rgba(255,255,255,0.2);
}

#enrollUserWrapper #classBody {
	height: 40vh;
}

#enrollClassList {
	width: 10%;
	height: 100%;

	background-color: rgba(0,0,0,0.2);

	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

#enrollClassList h3 {
	font-weight: 300;
	margin: 0;
	padding: 10%;
	
	background-color: rgba(0,0,0,0.4);
	border: 0;

	text-align: center;
}

#enrollClassList h4 {
	font-weight: 300;
	margin: 0;
	width: 90%;
	padding: 10%;

	display: table-cell;
	cursor: pointer;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#enrollClassList i {
	font-size: 2vh;
	width: 20%;
	display: table-cell;
	cursor: pointer;
	text-align: right;

	-webkit-transition: color 0.5s ease;  
	-moz-transition: color 0.5s ease; 
	-ms-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

#enrollClassList i:hover {
	color: #FF1A1A;
}

#ESCWrapper {
	background-color: rgba(0,0,0,0.2);
}

#ESCWrapper:hover {
	background-color: rgba(0,0,0,0.25);
}

#createActivate {
	margin-right: 5%;
	padding: 1%;
	background-color: rgba(0,0,0,0.1);

	float: right;
	cursor: pointer;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#createActivate:hover {
	background-color: rgba(0,0,0,0.2)
}

#createInfo {
	width: 100%;
	position: absolute;
	top: 150%;
}

#profPageWrapper #createWrapper {
	margin: auto;
	margin-top: -1%;
	padding: 3%;
	padding-top: 2%;
	padding-bottom: 1%;
	width: 30%;

	background-color: rgba(255,255,255,0.2);
}

#profPageWrapper #creSubmit {
	margin-top: 5%;
	border: 1px solid #FCF0F0 !important;
}

#profPageWrapper .profTitle {
	margin-bottom: 1%;
}

#profPageWrapper input {
	margin: 0;
	padding: 2%;
	background-color: rgba(0,0,0,0.1);
	border: 0;
}

#profileSubmit {
	font-weight: 300;
	font-size: 3vh;
	padding: 1.5%;

	border-right: 5px solid #FCF0F0;
	background-color: rgba(0,0,0,0.2);

	display: none;
	position:absolute;
	top: 40%;
	right: 0;	

	cursor: pointer;

	-webkit-transition: background-color 0.5s ease;  
	-moz-transition: background-color 0.5s ease; 
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#profileSubmit span, #profileSubmit i {
	vertical-align: middle;
}

#profileSubmit i {
	position: relative;
}

#profileSubmit:hover {
	background-color: rgba(0,0,0,0.3);
}

 #profPageWrapper #createInfo .formDiv:nth-child(5),  #profPageWrapper #createInfo .formDiv:nth-child(6) {
 	position: relative;
 }