/*********************************************************/
/* Variables */
/*********************************************************/

$black: #000;
$white: #fff;
$grey: #e6e6e6;
$transparent: transparent;

//Color on links
$anchorColor: #00ff00;

//Windows, hatches
//Background-color open window
$open: transparent;

//Border-color open window
$openBorder: #ffffff;

//Background-color current window 
$openCurrent: transparent;

//Border-color current window
$openCurrentBorder: #ffffff;

//Background-color past window 
$closed: transparent;

//Border-color past window
$closedBorder: #ffffff;

//Window text-color
$textColor: #fff;

//Window text-shadow
$textShadow: 1px 1px 1px #000;

//Window box-shadow
$boxShadow: 0 0 10px #000;

//Form Registration
//Background-color registration form
$formBackground: transparent; 

//Background-color inputs
$formInputBackground: #fff;

//Border-color inputs
$formInputBorder: $grey;

//text-color checkbox label
$formInputCheckboxLabel: #ffffff;

//Placeholder color
$placeholder: #777;

//Jquery infield-label text-color on focus inputs
$placeholderFocusText: #ffffff;

//Jquery infield-label arrow color on focus
$placeholderArrow: #000;

//Terms
//Terms h4 header text-color
$termsHeader: #000;

//Terms content text-color
$termsColor: #000;

//Preregistration
//Background-color Preregistration 
$preregBackground: #fff;

//Border-color Preregistration
$preregBorder: #000;

//Shadow Preregistration
$preregBoxShadow: rgba(0,0,0,.4);

//Text-color Preregistration
$preregText: #000;

$font: "Arial";

//Open modal
$modalHeaderFont: 'Arial';
$modalHeaderBackground: #fff;
$modalHeaderColor: #000;
$modalBodyColor: #000;

/*********************************************************/
/* Globals */
/*********************************************************/

a {
	color: $anchorColor;
	&:hover, &:active, &:focus, &:visited {
		color: $openCurrent;
	}
}

h4 {
	color: $termsHeader;
}

/*********************************************************/
/* Branding */
/*********************************************************/
.content {
	#content {
		#branding {
			margin-top: 20px;
			
			#logo_bg_wrapper {
				display:none;
				line-height: 0;
				height: 0;
				min-height: 0;
			}

			h3 {
				color: $grey;
				font-family: $font;
				font-size: 20px;
			}

			.welcome-text {
				color: $grey;
				font-family: $font;
				font-size: 14px;
			}
		}

/*********************************************************/
/* Preregistration */
/*********************************************************/

		#preregistration {
			#countdown {
				.well {
					background: $preregBackground;
					border: 5px solid $preregBorder;
					box-shadow: 0 0 5px $preregBoxShadow;

					h1, p {
						color: $black;
					}
				}
			}
		}



/*********************************************************/
/* Windows */
/*********************************************************/
		#questions {
			a {
				background: $open;
				animation: init 1s ease-in-out 1;
				color: $textColor;
				text-shadow: $textShadow;
				box-shadow: $boxShadow;
				opacity: .9;
				font-family: $font;
				
				&:hover, &:focus, &:visited, &:active {
					background: $open;
				}
			}

			a.open {
				background: $open;
				border: 1px solid $openBorder;

				&:hover, &:focus, &:visited, &:active { 
					background: $textColor;
					color: $open;
					border: 1px solid $open;
					text-shadow: 1px 1px 1px #fff;
					opacity: 1;
				}
			}

			a.open.current {
				background: $openCurrent;
				border: 1px solid $openCurrentBorder;

				&:hover, &:focus, &:visited, &:active { 
					background: $openCurrent;
					opacity: 1;
				}
			}

			a.past {
				background: $closed;
				border: 1px solid $closedBorder;
				opacity: .9;
				color: $textColor;

				&:hover, &:focus, &:visited, &:active { 
					background: $closed;
					opacity: .65;
					color: $textColor;
				}
			}
		}

/*********************************************************/
/* Modal Open Window */
/*********************************************************/

		#popup { 
			.modal-header {
				font-family: $modalHeaderFont;
				background-color: $modalHeaderBackground;
				color: $modalHeaderColor;
			}

			.modal-body {
				color: $modalBodyColor;
			}
		}

/*********************************************************/
/* Registration form */
/*********************************************************/

		#subscribe_form {
			.well {
				background: $formBackground;
				color: $termsColor;
				border: 1px solid $open;
				box-shadow: 0 0 50px rgba(0,0,0,.5);

				.infield-label label {
					color: $black;
				}

				.infield-label.placeholder-focus label {
					background: $black;
				}

				.infield-label.placeholder-focus label:after {
  				border-top: 5px solid $placeholderArrow;
  			}

				.checkbox-input label {
					color: $grey;
				}

				input[type="text"] {
					background: $formInputBackground;
					border: 1px solid $formInputBorder;
					color: $black;
				}
			}
		}
	}
}

/*********************************************************/
/* Animation */
/*********************************************************/

@-webkit-keyframes init { 
	from { 
		padding: 0;
		line-height: 0;
		box-shadow: none;
	} 

	to { 
		padding: 30px 0;
		line-height: 1;
		box-shadow: 0 0 10px #000000;
	}
} 

@-moz-keyframes init { 
	from { 
		padding: 0;
		line-height: 0;
		box-shadow: none;
	} 

	to { 
		padding: 30px 0;
		line-height: 1;
		box-shadow: 0 0 10px #000000;
	}
} 

@-o-keyframes init { 
	from { 
		padding: 0;
		line-height: 0;
		box-shadow: none;
	} 

	to { 
		padding: 30px 0;
		line-height: 1;
		box-shadow: 0 0 10px #000000;
	}
} 

@-ms-keyframes init { 
	from { 
		padding: 0;
		line-height: 0;
		box-shadow: none;
	} 

	to { 
		padding: 30px 0;
		line-height: 1;
		box-shadow: 0 0 10px #000000;
	}
} 

@-keyframes init { 
	from { 
		padding: 0;
		line-height: 0;
		box-shadow: none;
	} 

	to { 
		padding: 30px 0;
		line-height: 1;
		box-shadow: 0 0 10px #000000;
	}
}