/*
 * Beer O'Clock
 * @jamesrwhite
 * @benhodgson
 *
 * Core Stylesheet
 */


// Include Base Config + Compass Modules

@import "_base";
@import "compass/css3";


// Page Setup
*,
html {
	margin: 0;
	padding: 0;
	border: 0;
}

html,
body {
	position: relative;
	height: 100%;
	-webkit-font-smoothing: antialiased;

	@media screen and (max-width: $tablet) {
		height: auto;
	}
}

body {
	background: #ddd url('#{$layout-path}/body-bg.png');
	font-family: $sans-serif;
}

::selection {
	background: #333;
	color: #fff;
}

.site-container {
	width: 100%;
	min-height: 100%;

	@media screen and (max-width: $tablet) {
		min-height: auto;
	}
}

.main-content {
	overflow: auto;
	padding-bottom: 35px;

	@media screen and (max-width: $tablet) {
		padding: 0;
	}
}


// Github Fork Banner

.github-banner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;

	@media screen and (max-width: $tablet) {
		display: none;
	}
}


// Site Header

.site-header {
	z-index: 1000;
	position: absolute;
	top: 50%;
	left: 0;
	width: 33%;
	height: 210px;
	margin: -122px 3% 75px 2%;  /* Minus half height of div + half height of footer */

	h1 {
		margin-bottom: 10px;
		font-family: $heading-font;
		font-size: 72px;
		font-weight: normal;
		line-height: 62px;
		text-shadow: 0 1px 0 rgba(255,255,255,0.75);
	}

	p {
		font-size: 16px;
		color: #666;
		text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	}

	@media screen and (max-width: $tablet) {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin: 20px auto;
		text-align: center;
	}
}


// Drink Container

.drink-container {
	z-index: 750;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -280px;

	@media screen and (max-width: $tablet) {
		display: block;
		position: relative;
		top: auto;
		left: auto;
		margin: 20px auto;
	}
}

#drink-type {
	position: relative;
	overflow: hidden;
	margin: 10px auto;
}

.drink-glass {
	z-index: 600;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tasty-beverage {
	z-index: 200;
	position: absolute;
	bottom: 0;
	width: 100%;

	@include transition(height 2.5s ease-in-out);
}


// Countdown Timer

.countdown-timer {
	z-index: 1000;
	position: absolute;
	top: 50%;
	right: 0;
	width: 100%;
	width: 33%;
	height: 82px;
	margin: -56px 0 75px 3%;

	h2 {
		@include hide-text();
	}

	@media screen and (max-width: $tablet) {
		overflow: auto;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin: 20px auto;
	}
}

.countdown-container {
	height: 100%;
	display: none; // Hidden by default so the JS can decide

	@media screen and (min-width: $tablet) {
		margin-right: 5%;
	}
}

.countdown-segment {
	position: relative;
	float: left;
	width: 31%;
	height: 100%;
	margin: 0 1%;
}

.countdown-days {
	width: 11.5%;

	.digit {
		width: 98%;
	}
}

.countdown-label {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #666;
	font-size: 16px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.digit,
.beer-oclock-notification {
	float: left;
	width: 48%;
	height: 40px;
	padding: 10px 0;
	margin-right: 2%;
	background: #333 url('#{$layout-path}/footer-bg.png');
	color: #fff;
	font-family: $heading-font;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 2px 0 rgba(0,0,0,0.5);

	@include border-radius(5px);
}


// IT'S BEER O'CLOCK!!

.beer-oclock-notification {
	width: 100%;
	height: auto;
	background: #900;
	text-transform: uppercase;
	position: absolute;
	right: 2%;
	display: none;

	@include animate(alertflash, 2s, infinite, linear);

	@media screen and (max-width: $tablet) {
		position: relative;
		right: auto;
		margin: 20px auto;

		@include border-radius(0);
	}
}


// Site Footer

.site-footer {
	z-index: 2000;
	clear: both;
	position: relative;
	height: 15px;
	padding: 10px;
	margin-top: -35px;
	background: #333 url('#{$layout-path}/footer-bg.png');
	font-size: 13px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);

	@media screen and (max-width: $tablet) {
		margin-top: 0;
	}

	@media screen and (max-width: $handheld-wide) {
		height: auto;
	}
}

.site-footer,
.site-footer a {
	color: #fff;

	@include transition(color 0.2s ease-in-out);
}

.site-footer a {
	font-weight: bold;

	&:hover {
		color: #fc0;
	}
}

.site-credits {
	float: left;
	font-size: inherit;

	@media screen and (max-width: $handheld-wide) {
		float: none;
	}
}

.site-options {
	float: right;
	text-align: right;

	@media screen and (max-width: $handheld-wide) {
		float: none;
		margin: 0 0 10px 0;
		text-align: left;
	}
}

.site-customise {
	margin-left: 10px;

	@media screen and (max-width: $handheld-wide) {
		margin-left: 0;
		margin-right: 10px;
	}
}


// Settings Panel

.settings-panel {
	display: none;
	z-index: 2500;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #333 url('#{$layout-path}/footer-bg.png');
	color: #fff;
	text-shadow: 0 1px 0 #000;

	h2 {
		padding: 0 4%;
		margin-bottom: 5px;
		color: #fc0;
		font-family: $heading-font;

		@media screen and (max-width: $handheld-wide) {
			padding: 0 2.5%;
		}
	}

	.checkbox {
		float: left;
		margin: 5px 20px 5px 0;
	}

	@media screen and (max-width: $handheld-wide) {
		padding-bottom: 35px;
	}
}

.settings-inner {
	padding: 30px 0;
	overflow: hidden; /* Clearfix */
}

.settings-options {
	position: absolute;
	top: 20px;
	right: 4%;

	@media screen and (max-width: $handheld-wide) {
		top: auto;
		bottom: 0;
		left: 2.5%;
		margin: 0 0 25px 0;
	}
}

.settings-segment {
	float: left;
	width: 25%;
	padding: 10px 4%;

	h3 {
		margin-bottom: 10px;
	}

	@media screen and (max-width: $handheld-wide) {
		width: 95%;
		padding: 10px 2.5%;
	}
}

.drink-options {
	position: relative;

	select {
		width: 100% !important;
		height: 100% !important;
	}
}

.time-selector .select-box select {
	float: left;
	width: auto;
}

/*
.hour-options:after {
	float: left;
	content: " :";
	margin: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
*/


.settings-cancel {
	color: #fff;
	font-weight: bold;
	text-decoration: none;

	@media screen and (max-width: $handheld-wide) {
		padding: 5px;
		background: #fc0;
		color: #222;
		text-shadow: none;
	}
}


// Custom Select Styles

.customSelect {
	width: 100%;
	background:#eee url('#{$layout-path}/select-arrow.png') no-repeat center right;
	padding: 5px 0;
	border: 1px solid #fff;
	color: #333;

	@include border-radius(20px);

	text-shadow: none;
}
.customSelectInner {
	width: 100% !important;
	padding: 0 10px;
}


// Bubbles

.bubbles {
	overflow: hidden;
	position: relative;
	width: 90%;
	height: 100%;
	margin: 0 auto;
}

.bubble-container {
	opacity: 0;
	position: absolute;
	bottom: 10px;

	@include animate(bubblerise, 4s, infinite, ease-in);
}

.bubble-container:active .bubble {
	border-color: rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.15);
}

.bubble {
	z-index: 250;
	width: 4px;
	height: 4px;
	margin: 0 auto;
	border: 1px solid rgba(255,255,255,0.15);
	background: rgba(255,255,255,0.05);

	@include border-radius(10px);
	@include animate(bubblewobble, 0.4s, infinite, linear);
}


// Include Drink Styles

@import "_drinks";


// Include Keyframe Animation

@import "_keyframes";