@charset "UTF-8";

@import "compass";
@import "compass/reset";


//////////////////////////////////////////////////////////////////
//Definitions de variables
//////////////////////////////////////////////////////////////////

$bodyBackgroundColor: #182600;
$watchElementsColor: #ffffff;

$watchInitialDimension:600px;
$centerRatio:0.5;





//////////////////////////////////////////////////////////////////
//Fonts
//////////////////////////////////////////////////////////////////






//////////////////////////////////////////////////////////////////
//General 
//////////////////////////////////////////////////////////////////

body, html{
	margin: 0px;
	padding: 0px;
	background-color: $bodyBackgroundColor;
	width: 100%;
	height: 100%;
	overflow:hidden;
}
body{
	font-family:Helvetica, Aria, Sans Serif;
	font-size:14px;
	color:$watchElementsColor;
	cursor:pointer;
	overflow:hidden;
}





//////////////////////////////////////////////////////////////////
//Styles
//////////////////////////////////////////////////////////////////


a{
	color:$watchElementsColor !important;
	
	&:hover{
		text-decoration: none;
	}
}

*{
	-webkit-tap-highlight-color: rgba(0,0,0, 0.1);
}

::-webkit-selection { background: black; color: #fff; text-shadow: none; }
::-moz-selection { background: black; color: #fff; text-shadow: none; }
::selection { background: black; color: #fff; text-shadow: none; }

@mixin triangle(){
	display:block;
	position:relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-color:$bodyBackgroundColor transparent transparent transparent;
	@include transform-origin(center, center);
	-webkit-backface-visibility: hidden;
}




//////////////////////////////////////////////////////////////////
//Structure
//////////////////////////////////////////////////////////////////

#watch-container{

	#watch{			
		position: absolute;
		z-index:10;
		left: 50%;
		top: 50%;
		background-color: $watchElementsColor;
		@include transform(rotate(-45deg));

		

		#seconds-container{
			width:100%;
			height:100%;
			@include transform(rotate(-45deg));

			.second-item{
				position:absolute;
				font-size:0px;

				&.active{
					
				}

				span{
					@include triangle();
				}
			}
		}

		#minutes-container, #hours-container{
			position:absolute;
			z-index:10000;
			background-color:$watchElementsColor;
			left:50%;
			top:50%;
			@include transform(rotate(-90deg));
			overflow:hidden;

			.container{
				position:absolute;
				width:100%;
				height:100%;
				@include transform(rotate(45deg));
			}

			.minute-item, .hour-item{
				position:absolute;
				font-size:0px;

				&.active{
					
				}

				span{
					@include triangle();
				}
			}
		}
		#hours-container{
			z-index:12000;
		}

		#minutes-background, #hours-background{
			position:absolute;
			z-index:9000;
			background-color:$watchElementsColor;
			left:50%;
			top:50%;
		}
		#hours-background{
			z-index:11000;
		}
	}
}

#decoration-background{
	position: absolute;
	z-index:0;
	left: 50%;
	top: 50%;
	background-color:$watchElementsColor;
}
#decoration-lines{
	position:absolute;
	z-index:10;
	left:50%;
	top:50%;
	@include transform(rotate(45deg));
	@include transform-origin(center, center);
	width:0px;
	height:0px;

	&:before, &:after{
		content:"";
		display:block;
		width:4000px;
		height:1px;
		background-color:$watchElementsColor;
		position:relative;
		margin-left:-2000px;
	}
	&:after{
		width:1px;
		height:4000px;
		margin-left:0px;
		margin-top:-2000px;
	}
}

#warning{
	position:absolute;
	bottom:20px;
	right:20px;
	z-index:30000;
	@include opacity(0.5);
	@include transition(opacity ease-out 0.25s);

	&:hover{
		@include opacity(1);
	}
}

body.inverted{
	background-color:$watchElementsColor;
	color:$bodyBackgroundColor;

	a{
		color:$bodyBackgroundColor !important;
	}

	#watch-container{
		#watch{			
			background-color: $bodyBackgroundColor;
			#seconds-container, #minutes-container, #hours-container{
				.second-item, .minute-item, .hour-item{
					span{
						border-color:$watchElementsColor transparent transparent transparent;
					}
				}
			}
			#minutes-container, #hours-container{
				background-color:$bodyBackgroundColor;
			}
			#minutes-background, #hours-background{
				background-color:$bodyBackgroundColor;
			}
		}
	}

	#decoration-background{
		background-color:$bodyBackgroundColor;
	}
	#decoration-lines{
		&:before, &:after{
			background-color:$bodyBackgroundColor;
		}
	}
}




//////////////////////////////////////////////////////////////////
//Media queries
//////////////////////////////////////////////////////////////////