/* ----------------------------------------------------------------------------- VARIABLES */

@color-orange: #EB6C1D;
@color-greyfade: #777777;

@default-font-color: #3C3734;
@default-font-family: 'Verdana','Geneva','DejaVu Sans','sans-serif';

@selection-font-color: #FFF;
@selection-background: #EB6C1D;

@greynode-link-color: #424242;
@greynode-link-hover-color: #000000;

@greynode-gradient-start: #EDF2F2;
@greynode-gradient-end: #8a9092;

@greynode-bright-gradient-start: #F9FAFC;
@greynode-bright-gradient-end: #A9A9A9;

/* ----------------------------------------------------------------------------- FUNCTIONS */

.user-select-none {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-o-user-select: none;
	user-select: none;
}

.user-select-text {
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-o-user-select: text;
	user-select: text;
}

.text-inlay-light {
	text-shadow: 0 1px 0 rgba(0,0,0, 0.6);
}

.text-inlay-dark {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.border-radius (@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

.background-gradient (@val1,@val2) {
	background: -moz-linear-gradient(top, @val1 0%, @val2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@val1), color-stop(100%,@val2));
	background: -webkit-linear-gradient(top, @val1 0%,@val2 100%);
	background: -o-linear-gradient(top, @val1 0%,@val2 100%);
	background: -ms-linear-gradient(top, @val1 0%,@val2 100%);
	background: linear-gradient(top, @val1 0%,@val2 100%);
	-pie-background: linear-gradient(top, @val1 0%,@val2 100%);

	behavior: url(/site/js/libs/pie/PIE.htc);	
}

.box-shadow (@args) {
	box-shadow: @args;
	-moz-box-shadow: @args;
	-webkit-box-shadow: @args;
}

.box-shadow-standard {
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
}

.transition(@range: all, @time: 1s, @ease: ease-in-out) {
    -moz-transition: @range @time @ease;
    -webkit-transition: @range @time @ease;
    -o-transition: @range @time @ease;
    transition: @range @time @ease;
}

/* ----------------------------------------------------------------------------- SPRITES */

.sprite-thumb { background: url(../img/sprite_screenshot_thumb.png) no-repeat top left; }
.sprite-thumb00_over { .sprite-thumb; background-position: 0 0; width: 94px; height: 94px; } 
.sprite-thumb00_up { .sprite-thumb; background-position: 0 -99px; width: 94px; height: 94px; } 
.sprite-thumb01_over { .sprite-thumb; background-position: 0 -198px; width: 94px; height: 94px; } 
.sprite-thumb01_up { .sprite-thumb; background-position: 0 -297px; width: 94px; height: 94px; } 
.sprite-thumb02_over { .sprite-thumb; background-position: 0 -396px; width: 94px; height: 94px; } 
.sprite-thumb02_up { .sprite-thumb; background-position: 0 -495px; width: 94px; height: 94px; } 

/* ----------------------------------------------------------------------------- BODY */

html {
	overflow: auto !important;
}

body, html {
	height: 100%;
}

body {
	color: @default-font-color;
	background: #FFF url(../img/bg.jpg) top center no-repeat !important;
	margin: 0;
	font-family: @default-font-family;
}

body.page-template-page-raw-php {
	background: none !important;
	background: #FFF !important;
}

h1,h2,h3,h4,h5 {
	color: @default-font-color;
}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 14px; font-weight: bold; }
h5 { font-size: 14px; font-weight: bold; font-style: italic; }

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

::selection {
	color: @selection-font-color;
    background: @selection-background;
}

::-moz-selection {
	color: @selection-font-color;
    background: @selection-background;
}

* {
	outline: 0 !important;
	.user-select-none;
}

p, h1, h2, h3, h4, h5, span, input, textarea {
	.user-select-text;
}

a {
	color: @greynode-link-color;
	
	&:visited {
		color: @greynode-link-color;
	}
	
	&:hover {
		color: @greynode-link-hover-color;
	}
}

/* ----------------------------------------------------------------------------- HELPERS */

.centered {
	text-align: center;
}

/* ----------------------------------------------------------------------------- FORM ELEMENTS */

a.button, input.button {
	color: #EAEAEA;
	font-weight: bold;
	.text-inlay-light;
	
	background: url(../img/btn_up.png);
	
	width: 130px;
	height: 33px;
	
	padding: 15px 0 0 0;
	
	&:hover {
		background: url(../img/btn_over.png);
	}
}

input.button {
	padding: 0;
}

/* ----------------------------------------------------------------------------- GRAVITY FORMS */

input[type=text], textarea {
	background-color: #FFF !important;
}

li.gfield {
	position: relative;
}

.gform_footer {
	text-align: center;
}

/* ----------------------------------------------------------------------------- CONTACT FORM */

#gform_fields_3 {
	margin: 0;
	padding: 0;
}

/* ----------------------------------------------------------------------------- FORM BUTTON */

#gform_submit_button_1, #gform_submit_button_2 {
	margin: 0;
	padding: 20px 4px 0 0;
	
	width: 100px;
	height: 38px;
	
	font-weight: bold;
	font-size: 14px;
	text-align: right;
	
	background: url(../img/btn_send_up.png);
	
	&:hover {
		background: url(../img/btn_send_over.png);
	}
	
	&:active {
		background: url(../img/btn_send_down.png);
	}
	
}

/* ----------------------------------------------------------------------------- FORM VALIDATION */

.validation_error {
	display: none;
}

.validation_message {
	display: block !important;
	font-size: 7pt !important;
	padding: 0 !important;
	font-style: italic !important;
}


/* ----------------------------------------------------------------------------- BANNER */

#wrap #banner {
	background: url(../img/top_motto.png) top center no-repeat;
	margin: 0 0 0 -10px;
	height: 100px;
	z-index: auto;
	width: 970px;
}

#wrap.lang_fr #banner {
	background: url(../img/top_motto_fr.png) top center no-repeat;
}

#wrap.page_home #banner, #wrap.page_coming-soon #banner {
	background: url(../img/top.png) top center no-repeat;
}

#banner .top-right {
	display: inline-block;
}

#banner a {
	color: @greynode-link-color;
	text-decoration: none;
	
	&:hover {
		color: @greynode-link-hover-color;
	}
}

#banner a.logo_link {
	position: absolute;
	width: 300px;
	height: 100px;
	
	top: 0;
	left: 50%;
	margin-left: -150px;
}

#banner .container {
	width: auto;
}

/* ----------------------------------------------------------------------------- TOP WIDGETS */

#banner .widget {
	display: inline-block;
	margin-right: 20px;
}

#banner ul {
	list-style: none;
	margin: 0;
	padding: 0;
	
	li {
		display: inline-block;
		margin-right: 5px;
	}
}

#text-3 { /* Social buttons */
	margin: 10px 0 0 40px;
}

.language_switcher {
	
	margin-top: 10px !important;
	margin-right: 20px !important;
	
	border: 0 !important;
	list-style: none;
	
	li {
		list-style: none;
		display: inline-block;
		width: auto;
		float: left;
		margin-right: 15px !important;
		font-size: 8pt;
		.text-inlay-light;
		
		a {
			background: none !important;
			border: 0 !important;
		}
		
	}
	
	li.language_active {
		font-weight: bold;
		padding-left: 14px;
		background: url(../img/arrow_s.png) top left no-repeat;
	}
}

#banner 

/* ----------------------------------------------------------------------------- CONTENT */

#content {
	position: relative;
	margin-top: 30px;
	padding-bottom: 90px;
}

/* ----------------------------------------------------------------------------- DEFAULT MAIN */

#main {
	width: 800px;
	margin-left: 75px;
	
	border: 0;
	
	.background-gradient(@greynode-gradient-start,@greynode-gradient-end);
	.box-shadow-standard;
	
	.container {
		border: 1px solid #000;
		.border-radius(2px);
		.box-shadow(0px 0px 0px 1px #CE9B54);
	}
	
	> .container {
		padding: 10px;
		background: url(../img/hexa_graybox.png) bottom right no-repeat;
		max-height: 500px;
		overflow: auto;
	}
	
}

/* ----------------------------------------------------------------------------- FRONT PAGE / ABOUT - MAIN */

#wrap.page_home, #wrap.page_coming-soon {
	#sidebar,#banner,#main,#screenshots {
		display: none;
	}
}

#wrap.page_home #main, #wrap.page_coming-soon #main {
	position: relative;
	
	padding: 0;
	margin: 40px 0 0 80px;
	width: 340px;
	min-height: 100%;
	float: left;
	
	border: 0;
	
	.box-shadow(none);
	.border-radius(none);
	.box-shadow(0px 3px 3px rgba(50, 50, 50, 0.8));
	
	-pie-background: none;
	background: url(../img/black_opaque.png);
	
	.container {
		border: 0;
		
		.box-shadow(none);
		.border-radius(0);
		
		color: #FFF;
		font-size: 12px;
		font-weight: normal;
		margin: 0;
		padding: 0;
		
		background: url(../img/hexa_top.png) top right no-repeat;
		
		.content { /* Wrapper to fix slidedown animation jump */
			padding: 10px;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
			text-align: justify;
			
			h1 {
				color: #FFF;
				font-size: 18px;
				margin-top: 5px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				border-bottom: 2px solid @color-orange;
				text-transform: uppercase;
			}
			
		}
		
		p:first-child {
			margin-top: 5px;
		}
		
	}
	
	.hexa_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 164px;
		height: 142px;
		background: url(../img/hexa_bottom.png) bottom left no-repeat;	
	}
	
	.wordfade {
		position: relative;
	}
	
	.wordfade_line {
		width: 100%;
		height: 4px;
		background: url(../img/scanline.png);
	}
	
}

/* ----------------------------------------------------------------------------- FRONT PAGE SCREENSHOTS */

#wrap.page_home #screenshots, #wrap.page_coming-soon #screenshots {
	padding: 0;
	margin: 5px 0 0 80px;
	width: 340px;
	float: left;
	
	background: url(../img/black_opaque.png);
	
	.container {
		padding: 5px;
		
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			
			li {
				float: left;
				display: inline-block;
				margin: 5px 0 5px 10px;
			}
			
			li .thumb {
				display: block;
				width: 94px;
				height: 94px;
			}
			
			li .thumb_0 {
				.sprite-thumb00_up;
				
				&:hover {
					.sprite-thumb00_over;
				}
			}
			
			li .thumb_1 {
				.sprite-thumb01_up;
				
				&:hover {
					.sprite-thumb01_over;
				}
			}
			
			li .thumb_2 {
				.sprite-thumb02_up;
				
				&:hover {
					.sprite-thumb02_over;
				}
			}
		}
		
	}
}

/* ----------------------------------------------------------------------------- FRONT PAGE SIDEBAR */

#wrap.page_home #sidebar, #wrap.page_coming-soon #sidebar {
	padding: 0;
	margin: 40px 10px 0 0;
	width: 430px;
	
	border: 2px solid @color-orange;
	
	.border-radius(2px 6px 2px 2px);
	.background-gradient(@greynode-gradient-start,@greynode-gradient-end);
	.box-shadow(0px 3px 3px rgba(50, 50, 50, 0.8));
	
	> .container {
		padding-top: 10px;
		padding-left: 10px;
		
		background: url(../img/hexa_graybox.png) bottom right no-repeat;
		
		.gfield_checkbox li {
			margin-left: 10px;
			margin-bottom: 2px;
			
			div.checker {
				margin-right: 2px;
				margin-top: -5px;
			}
			
			label {
				margin: 0;
				padding: 2px 0 0;
				width: 330px;
				font-size: 10px !important;
			}
		}
		
		.gfield_radio {
			.radio {
				margin-right: 2px;
			}
			
			label {
				margin: 2px 0 0 0;
			}
		}
		
	}
}

#wrap.page_home #sidebar.beta-signup > .container, #wrap.page_coming-soon #sidebar.beta-signup > .container {
	background-image: url(../img/hexa_graybox_left.png), url(../img/fade_crystal.png);
	background-position:  bottom left, bottom right;
	background-repeat: no-repeat, no-repeat;
}

/* ----------------------------------------------------------------------------- NEWSLETTER SIGN UP FORM */

#gform_1 {
	position: relative;
	
	.gform_heading {
		margin-bottom: 5px;
	}
	
	span.gfield_required {
		display: none;
	}
	
	.gform_footer {
		border: 0;
		margin: 0;
		padding: 0;
		width: auto;
		
		position: absolute;
		z-index: 2;
		right: 60px;
		top: 86px;
	}
	
	.gform_ajax_spinner {
		position: absolute;
		top: 10px;
		right: -25px;
	}
}

#gform_widget-3 {
	margin: 0;
	
	h3 {
		display: none;
	}
}

/* E-Mail address */

#field_1_4 {
	
	height: 40px;
	
	.ginput_container {
		position: absolute;
		z-index: 1;
		top: 0;
		width: 400px;
	}
	
	li.email input {
		width: 200px;
	}
	
	.validation_message {
		position: absolute;
		left: 60px;
		top: 45px;
	}
	
	label.overlabel-apply {
		z-index: 2;
		top: 10px;
		left: 60px;
	}
	
	#input_1_4 {
		line-height: 40px;
		padding: 0 5px !important;
		height: 38px;
		margin-left: 50px;
	}
	
}

#field_1_4.gfield_error {
	margin: 0 !important;
	
	.ginput_container {
		margin: 0 !important;
	}
}

/* Checkboxes */

#field_1_5 {
	
	li {
		font-size: 6.5pt;
		.text-inlay-dark;
		
		label {
			margin: 0;
		}
		
	}
	
	li.gchoice_5_2 label {
		font-weight: bold !important;
	}
	
	.ginput_container {
		margin-top: -5px;
	}
	
}

/* Disclaimer */

#field_1_6 .centered {
	font-size: 10px;
	color: #494949;
	margin-left: -20px;
	font-style: italic;
	
	a {
		color: @greynode-link-color;
		
		&:hover {
			color: @greynode-link-hover-color;
		}
	}
}


/* Form submission confirmation */

.gform_confirmation_message_1 {
	
	color: @default-font-color !important;
	margin: 0 !important;
	padding: 20px 0 0 50px !important;
	text-align: left !important;
	font-weight: normal !important;
	border: 0 !important;
	font-size: 13px !important;
	padding-bottom: 7px !important;
	background-color: transparent !important;
	background-image: url(../img/star.png), url(../img/orange_line.jpg) !important;
	background-position: left top, bottom center !important;
	background-repeat: no-repeat, no-repeat !important;
	
	h3 {
		display: block !important;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 0;
		.text-inlay-dark;
	}
	
	p {
		font-size: 11px;
	}
}

/* ----------------------------------------------------------------------------- BETA SIGN UP FORM */

#gform_widget-4 {
	display: none;
	color: #3F3F3F;
	
	h3 {
		font-size: 16px;
		font-weight: normal !important;
		.text-inlay-dark;
	}
	
	label {
		font-weight: normal;
	}
	
	span.gfield_required {
		display: none;
	}
	
	.gform_heading {
		margin-bottom: 5px;
	}
	
	.gform_heading span {
		padding-right: 10px;
	}
	
}


/* Email */

#field_2_4 {
	display: none;
}

/* Gender - Male / Female */

#field_2_9 {
	display: inline-block;
	margin-top: 13px;
	
	 > label {
		display: block;
		float: left;
		width: 150px;
		clear: none;
		margin-right: 5px;
		.text-inlay-dark;
	}
	
	.ginput_container {
		clear: none;
		display: block;
		float: left;
		width: 250px;
	}
	
	label {
		.text-inlay-dark;
	}
	
	ul {
		margin: 0 0 0 30px;
	}
	
	li {
		display: inline-block;
		margin-bottom: 0;
		margin-left: 5px;
	}
}

/*  Age group, Experience & Gamer style */

#field_2_10, #field_2_11, #field_2_12 {
	
	label {
		float: left;
		display: inline-block;
		width: auto;
		clear: none;
		margin-right: 5px;
		.text-inlay-dark;
	}
	
	.ginput_container {
		float: right;
		display: inline-block;
		width: auto;
	}
	
	.selector {
		width: 230px;
		
		span {
			width: 198px;
		}
	}
	
	select {
		width: 240px;
	}
	
}

/* Why you */

#field_2_13 {
	
	> label {
		float: left;
		display: inline-block;
		width: auto;
		clear: none;
		margin-right: 5px;
		.text-inlay-dark;
	}
	
	.ginput_container {
		float: right;
		display: inline-block;
		width: auto;
	}
	
	textarea {
		width: 235px;
		height: 50px;
		margin-right: 5px;
	}
	
	.charleft {
		color: @color-greyfade;
		margin: 0;
	}
	
	.gfield_description {
		position: absolute;
		top: 30px;
		left: 0px;
		color: @color-greyfade;
		font-style: italic;
	}
	
}

/* Submit button positioning */

#gform_submit_button_2 {
	float: right;
	margin: 10px 20px 0 0 !important;
}

/* Confirmation */

.gform_confirmation_message_2 {
	color: @default-font-color !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-weight: normal !important;
	border: 0 !important;
	font-size: 13px !important;
	
}

/* ----------------------------------------------------------------------------- CONFIRMATION */

#signup_confirmation {
	position: relative;
	
	display: none;
	width: 480px;
	margin: 40px auto;
	
	.container {
		display: none;
		position: relative;
		z-index: 1;
		
		padding: 20px;
		color: @default-font-color;
		
		border: 2px solid @color-orange;
		
		.border-radius(2px);
		.background-gradient(@greynode-gradient-start,@greynode-gradient-end);
		.box-shadow(0px 3px 3px rgba(50, 50, 50, 0.8));
		
		> div {
			display: none;
		}
	}
	
	.return-link {
		display: none;
		margin-top: 10px;
		margin-right: 30px;
		text-align: center;
	}
	
	p {
		display: block;
		margin-bottom: 5px;
		margin-right: 50px;
	}
	
	img {
		margin-top: 10px;
	}
	
}

#dennis {
	position: absolute;
	z-index: 2;
	
	right: -160px;
	top: -90px;
	
	width: 276px;
	height: 587px;
	
	background: url(../img/dennis_char.png);
}

/* ----------------------------------------------------------------------------- ABOUT PAGE */

#wrap.page_about-us {
	
	#main,#banner,#robot,#pictures li {
		display: none;
	}
}

#wrap.page_about-us #main, #wrap.page_a-propos #main {
	
	margin-top: 30px;
	
	.container .content {
	
		padding: 10px;
		
		p:last-child {
			margin-bottom: 0;
		}
		
		h1 {
			text-transform: uppercase;
			font-size: 18px;
			width: 300px;
			padding-bottom: 5px;
			border-bottom: 2px solid @color-orange;
			text-shadow: none;
			font-weight: bold;
		}
		
		h2 {
			text-transform: uppercase;
			font-size: 14px;
			color: darken(@color-orange,20%);
			margin-bottom: 0;
			text-shadow: none;
		}
		
		.robot_spacer {
			float: right;
			width: 180px;
			height: 130px;
		}
		
	}

}

#robot {
	position: absolute;
	top: -50px;
	right: 0;
	width: 288px;
	height: 271px;
	background: url(../img/roboto_career.png);
}

#pictures {
	width: 100%;
	margin-top: -40px;
	
	ul {
		list-style: none;
		margin: 70px 0 0 20px;
		padding: 0;
		
		li {
			float: left;
			display: inline-block;
			margin: 0 0 20px 20px;
			
			img {
				.box-shadow(0px 0px 5px rgba(50, 50, 50, 0.75));
			}
		}
	}
}


/* ----------------------------------------------------------------------------- CAREERS PAGE */

#wrap.page_careers, #wrap.page_emplois {
	#amy,#main,#taleo,#banner {
		display: none;
	}
	
	#main {
		width: 750px;
		float: right;
		
		h1 {
			display: none;
		}
	}
}

#taleo {
	width: 750px;
	float: right;
	
	margin-top: 20px;
	border: 1px solid @color-orange;
	
	.border-radius(5px);
	.box-shadow(0px 3px 3px rgba(50, 50, 50, 0.8));
	
	background: #E2E2E2;
}

#amy {
	position: absolute;
	left: 0;
	top: 10px;
	background: url(../img/amy_char.png);
	width: 220px;
	height: 642px;
}

/* ----------------------------------------------------------------------------- FOOTER */

#content-info {
	position: relative;
	
    margin-top: -85px;
    height: 85px;
    clear:both;
	
	text-align: center;
	
	.container {
		display: inline-block;
		width: auto;
		max-width: 700px;
		height: 30px;
		margin: 0 auto 20px;
		.text-inlay-light;
	}
	
	p.copy {
		text-align: center;
		font-size: 8px;
		color: #999999;
	}

}


ul#menu-footer-navigation, ul#menu-footer-navigation-fr {
	margin: 10px 0 5px !important;
	list-style-type: none;
	text-align: center;
	
	display: inline-block;
	padding: 2px 5px 5px !important;
	color: #BCBCBC;
	background: url(../img/black_opaque.png);
	
	.border-radius(5px);
	
	li {
		margin: 0 !important;
		padding: 0 8px 0 5px;
		display: inline-block;
		border-left: 1px solid #2D2D2D;
		text-transform: lowercase;
		
		&:first-child {
			border-left: 0;
		}
	}
	
	a {
		color: #D3D3D3;
		text-decoration: none;
		.text-inlay-light;
		
		&:hover {
			color: #FFFFFF;
		}
	}
	
}

/* ----------------------------------------------------------------------------- PLACEHOLDER PLUGIN */

label.overlabel-apply {
    color: #999999;
    left: 5px;
    position: absolute;
    top: 5px;
    z-index: 1;
	margin: 6px 0 0 !important;
}

/* ----------------------------------------------------------------------------- BROWSER FIXES */

body.browser_internet_explorer.browser_v7 {
	#wrap {
		display:table;
		height:100%
	}
	
	#field_2_13 textarea {
		width: 225px;
	}
	
	#pictures ul {
		margin-top: 40px;
	}
	
}

body.browser_opera {
	&:before {/* thanks to Maleika (Kohoutec)*/
		content:"";
		height:100%;
		float:left;
		width:0;
		margin-top:-32767px;/* thank you Erik J - negate effect of float*/
	}
}