/* start: general reusable rules */

	/* LESS variables */
	@black:					#000;
	@white:					#fff;
	@yellow:				#ffc800;
	@teal:					#009696;
	@red:					#ff4b00;
	@baseGray:				#0f0f0f;
	@mainGray:				#323232;
	@max_width:				100%;
	@global_spacing:		0%;
	@text_font:				"Montserrat";
	@icons_font:			"Soundpairs";
	/* */

	/* shadows, corners, transparency */
	.shadowed (@x,@y,@size) { -webkit-box-shadow:@x @y @size rgba(0, 0, 0, 0.5); -moz-box-shadow:@x @y @size rgba(0, 0, 0, 0.5); box-shadow:@x @y @size rgba(0, 0, 0, 0.5); filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#999999, Positive='true'); }
	.innerShadowed (@x,@y,@size) { -webkit-box-shadow:inset @x @y @size rgba(0, 0, 0, 0.5); -moz-box-shadow:inset @x @y @size rgba(0, 0, 0, 0.5); box-shadow:inset @x @y @size rgba(0, 0, 0, 0.5); filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#999999, Positive='true'); }
	.rounded (@radius) { border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; }
	.roundedLeft (@radius) { border-top-left-radius:@radius; -webkit-border-top-left-radius:@radius; -moz-border-radius-topleft:@radius; border-bottom-left-radius:@radius; -webkit-border-bottom-left-radius:@radius; -moz-border-radius-bottomleft:@radius; }
	.roundedRight (@radius) { border-top-right-radius:@radius; -webkit-border-top-right-radius:@radius; -moz-border-radius-topright:@radius; border-bottom-right-radius:@radius; -webkit-border-bottom-right-radius:@radius; -moz-border-radius-bottomright:@radius; }
	.roundedTop (@radius) { border-top-right-radius:@radius; border-top-left-radius:@radius; -webkit-border-top-right-radius:@radius; -webkit-border-top-left-radius:@radius; -moz-border-radius-topright:@radius; -moz-border-radius-topleft:@radius; }
	.roundedBottom (@radius) { border-bottom-right-radius:@radius; border-bottom-left-radius:@radius; -webkit-border-bottom-right-radius:@radius; -webkit-border-bottom-left-radius:@radius; -moz-border-radius-bottomright:@radius; -moz-border-radius-bottomleft:@radius; }
	.transparent (@trans, @transfull) { -moz-opacity:@trans; -khtml-opacity:@trans; opacity:@trans; filter:alpha(opacity=@transfull); }
	.transition (@params) { transition:@params; -moz-transition:@params; -webkit-transition:@params; -o-transition:@params; }
	/* */

	/* text */
	.normal { font-family:@text_font, Helvetica, Arial; font-weight:400; font-style:normal; }
	.bold { font-family:@text_font, Helvetica, Arial; font-weight:700; font-style:normal; }
	.icon_font { font-family:@icons_font; font-style:normal; }
	.underlined { text-decoration:underline; }
	.notUnderlined { text-decoration:none; }
    .pt7  { font-size:0.438em; line-height:1.5; } .pt8  { font-size:0.500em; line-height:1.5; }
	.pt9  { font-size:0.563em; line-height:1.5; } .pt10 { font-size:0.625em; line-height:1.5; } .pt11 { font-size:0.688em; line-height:1.5; }
	.pt12 { font-size:0.750em; line-height:1.0; } .pt13 { font-size:0.813em; line-height:1.5; } .pt14 { font-size:0.875em; line-height:1.75; }
	.pt15 { font-size:0.938em; line-height:1.5; } .pt16 { font-size:1.000em; line-height:1.5; } .pt17 { font-size:1.062em; line-height:1.5; }
	.pt18 { font-size:1.125em; line-height:1.0; } .pt19 { font-size:1.188em; line-height:1; } .pt20 { font-size:1.250em; line-height:1; }
	.pt22 { font-size:1.375em; line-height:1.5; } .pt24 { font-size:1.500em; line-height:1.0; } .pt26 { font-size:1.625em; line-height:1.5; }
	.pt28 { font-size:1.750em; line-height:1.5; } .pt32 { font-size:2.000em; line-height:1.5; } .pt36 { font-size:2.250em; line-height:1.0; }
	.pt42 { font-size:2.625em; line-height:1.5; } .pt48 { font-size:3.000em; line-height:1; } .pt64 { font-size:4.000em; line-height:1; }
	.pt72 { font-size:4.500em; line-height:1; } .pt128 { font-size:8.000em; line-height:1; } .pt136 { font-size:8.500em; line-height:1; }
	.centeredText { text-align:center; } .rightText { text-align:right; } .leftText { text-align:left; }
	.capitalized { text-transform:uppercase; } .capitalizedSingle { text-transform:capitalize; } .regCapitalized { text-transform:none; }
	/* */

	/* positioning */
	.clear { clear:both; float:none; display:block; }
	.left { float:left; }
	.right { float:right; }
	.centered { margin:0 auto; }
	.rightSpace(@amount) { margin:0 @amount 0 0; } .leftSpace(@amount) { margin:0 0 0 @amount; }
	.topSpace(@amount) { margin:@amount 0 0 0; } .bottomSpace(@amount) { margin:0 0 @amount 0; }
	.leftSpace { .leftSpace(10px); } .rightSpace { .rightSpace(10px); }
	.topSpace { .topSpace(10px); } .bottomSpace { .bottomSpace(10px); }
	.rel { position:relative; } .relPos(@top,@left) { position:relative; top:@top; left:@left; } .relPosBottom (@bottom,@left) { position:relative; bottom:@bottom; left:@left; }
	.abs { position:absolute; } .absPos(@top,@left) { position:absolute; top:@top; left:@left; } .absPosBottom (@bottom,@left) { position:absolute; bottom:@bottom; left:@left; }
	.absPosRight(@top,@right) { position:absolute; top:@top; right:@right; } 
	.fixPos(@top,@left) { position:fixed; top:@top; left:@left; }
	.fixPosRight(@top,@right) { position:fixed; top:@top; right:@right; }
	.fixPosBottom(@bottom,@right) { position:fixed; bottom:@bottom; right:@right; }
	.noBorder { border:0; }
	/* */

	/* behaviour */
	.active { cursor:pointer; } .inactive { cursor:default!important; }
	.invisible { display:none; }
	.completelyHidden { display:none; visibility:hidden; }
	.visible(@type) { display:@type; }
	.nonSelective, * { -moz-user-select:none; -webkit-user-select:none; }
	/* */

	/* buttons */
	.button { -moz-user-select:none; -webkit-user-select:none; .rounded(4px); .notUnderlined; margin:10px auto 0; padding:12px 10px; background:@yellow; .pt12; .capitalized; .bold; color:@black; .visible(block); .clear; .transition(all .1s ease-in-out); }
	.button:active { background:@white; .innerShadowed(0,5px,7px); }
	.button:after { .icon_font; .regCapitalized; .right; color:@black; content:"c"; .relPos(1px,0); }
	/* */

/* end: general reusable rules */

/* tag rules */
html, body { width:100%; height:100%; margin:0; padding:0; background:@baseGray; }
div, span, p, input, td { .normal; .pt14; color:@yellow; }
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }
/* */

/* containers */
#loader, #intro, #game_board { width:100%; height:100%; background:@baseGray; .fixPos(0,0); margin:0; padding:0; }
#loader { z-index:1000; }
#intro { .active; z-index:500; .shadowed(0,5px,10px); .centeredText; }
#game_board { width:100%; height:88%; z-index:100; overflow:hidden; }
#menu, #confirmation { width:100%; height:12%; background:@black; .fixPosBottom(0,0); z-index:200; overflow:hidden; }
#menu { .shadowed(0,5px,10px); }
#confirmation { background:@mainGray; .fixPosBottom(0,0); z-index:80; }
#about { width:100%; height:88%; .fixPos(12%,0); z-index:90; background:@mainGray; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#all_sounds, audio { display:none; }
/* */

/* custom objects */
#logo { .icon_font; color:@yellow; font-size:11em; padding:10% 0; }
#volume_icon { .rel; margin:5% 0 0; -webkit-transform:scale(.75); }
#logo_small { .active; .icon_font; color:@yellow; .pt36; .left; padding:6% 3% 0 4%; width:5%; }
#timer { .left; padding:5% 0; .centeredText; width:5%; }
#timer { .leftText; width:15%; padding:8% 0 0 5%; }
.menu_item { .active; width:6%; height:100%; background:@black; color:@yellow; .capitalized; .right; padding:8% 5% 0; .centeredText; .rel; z-index:100; }
.menu_item.active { background:@yellow; color:@black; }
#hint { .active; background:@teal; color:@yellow; padding:8% 0 0; width:16%; .centeredText; }
#close { .active; .absPosRight(0,-50%); height:100%; .rightText; padding:8% 5% 0; .pt14; z-index:50; }
.sound { .active; width:20%; background:@mainGray; opacity:1; -webkit-transform:scale(.5); .left; -webkit-transition:background .25s ease-in-out, opacity .5s ease-in-out; }
.sound:nth-child(2n) { background:@mainGray + #030303; }
.sound.selected { background:@teal; }
.sound.hidden { opacity:0; }
.sound.wrong { background:@red; }
#result { color:@yellow; padding:150px 0 0; .centeredText; }
.title { .capitalized; margin:0; padding:2% 0; border-bottom:solid 1px @yellow; }
.title:not(:first-child) { margin:7% 5% 2%; }
.title:first-child { margin:2% 5%; }
.infotext { margin:0 5%; }
#stats_table { width:100%; }
#stats_table td { border-bottom:dashed 1px @yellow; .centeredText; padding:5% 0; width:25%; .capitalized; }
.stats { .bold; .pt18!important; }
td:not(.stats) { .pt12; }
#question { .left; padding:8% 5% 0; }
/* */