@import "css_fonctions.less";

@background-color: #000;


@font-face {
    font-family: 'QuicksandLight';
    src: url('fonts/Quicksand_Light-webfont.eot');
    src: url('fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Light-webfont.woff') format('woff'),
         url('fonts/Quicksand_Light-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandLightOblique';
    src: url('fonts/Quicksand_Light_Oblique-webfont.eot');
    src: url('fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
         url('fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBook';
    src: url('fonts/Quicksand_Book-webfont.eot');
    src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Book-webfont.woff') format('woff'),
         url('fonts/Quicksand_Book-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBookOblique';
    src: url('fonts/Quicksand_Book_Oblique-webfont.eot');
    src: url('fonts/Quicksand_Book_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Book_Oblique-webfont.woff') format('woff'),
         url('fonts/Quicksand_Book_Oblique-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Book_Oblique-webfont.svg#QuicksandBookOblique') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('fonts/Quicksand_Bold-webfont.eot');
    src: url('fonts/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Bold-webfont.woff') format('woff'),
         url('fonts/Quicksand_Bold-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBoldOblique';
    src: url('fonts/Quicksand_Bold_Oblique-webfont.eot');
    src: url('fonts/Quicksand_Bold_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Bold_Oblique-webfont.woff') format('woff'),
         url('fonts/Quicksand_Bold_Oblique-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Bold_Oblique-webfont.svg#QuicksandBoldOblique') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandDash';
    src: url('fonts/Quicksand_Dash-webfont.eot');
    src: url('fonts/Quicksand_Dash-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Quicksand_Dash-webfont.woff') format('woff'),
         url('fonts/Quicksand_Dash-webfont.ttf') format('truetype'),
         url('fonts/Quicksand_Dash-webfont.svg#QuicksandDash') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{
	background: @background-color;
	width: 100%;
	height: 100%;
}

h1, h2, h3, h4, h5, h6{
	font-family: "QuicksandLight";
}

h1{
	
}
h2{
	font-size: 2em;
	padding: 6px 0 10px 0;
}
h3{
	font-size: 1.4em;
	padding: 4px 0 8px 0;
}
h4{
	
}
h5{
	
}
h6{
	font-size: 0.6em;
	padding: 18px 0 10px 0;
	text-transform: uppercase;
}


p{
	
}

#background{
	position: absolute;
	top: 30px;
	left: 40px;
	right: 40px;
	bottom: 50px;
	background: white;
	.border-radius(20px);
	border: black solid 1px;
	overflow: hidden;
	img{
		min-width: 100%;
		min-height: 100%;
		z-index: 20px;
	}
	.motif{
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: url('images/motif.png');
		z-index: 50;
	}
}

#bandeau{
	position: absolute;
	bottom: 100px;
	left: 0px;
	right: 0px;
	height: 100px;
	.gradient-background(#0E0E0E, #050505);
	.shadow-box(#050505, 0px, 0px, 3px, 3px);
	z-index: 100;
	padding-left: 8%;
	h1{
		display: none;
	}
	img{	
		float: left;
	}
	.baseline{
		float: left;
		color: white;
		position: absolute;
		bottom: 20px;
		margin-left: 280px;
		font-family: "QuicksandLight";
	}
	ul{
		position: absolute;
		right: 100px;
		bottom: 20px;
		color: white;
		li{
			font-family: "QuicksandLight";
			font-size: 22px;
			float: left;
			padding: 0px 20px;
			a{
				color: white;
				text-decoration: none;
			}
		}
	}
}

#content{
	position: absolute;
	margin: 0 6%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 250px;
	
	#services{
		font-family: "QuicksandLight";
		color: white;
		position: absolute;
		right: 0px;
		width: 493px;
		bottom: 0px;
		padding: 10px 20px;
		background: rgba(0, 0, 0, 0.8);
		z-index: 100;
		a{
					color: white;
					text-decoration: none;
				}
		.content{
			width: 100%;
			overflow: auto;
			p {
				margin-bottom: 20px;
			}
		}
	}
	
	#creations{
		font-family: "QuicksandLight";
		color: white;
		position: absolute;
		right: 0px;
		width: 463px;
		bottom: 0px;
		padding: 10px 20px;
		background: rgba(0, 0, 0, 0.8);
		z-index: 100;
		a{
					color: white;
					text-decoration: none;
				}
		.content{
			width: 100%;
			overflow: auto;
			img{
				width: 180px;
				margin: 18px 10px 18px 10px;
				border: solid 1px #333;
				padding: 1px;
				float: left;
			}
			p.adresse{
				margin: 30px 0 0 10px;
			}
			p.contact{
				clear: both;
				margin: 8px 0 20px 10px;
			}
		}
	}
	
	#contact{
		font-family: "QuicksandLight";
		color: white;
		position: absolute;
		right: 0px;
		width: 423px;
		bottom: 0px;
		padding: 10px 20px;
		background: rgba(0, 0, 0, 0.8);
		z-index: 100;
		a{
					color: white;
					text-decoration: none;
				}
		.content{
			width: 100%;
			overflow: auto;
			img{
				width: 180px;
				margin: 18px 10px 18px 10px;
				border: solid 1px #333;
				padding: 1px;
				float: left;
			}
			p.adresse{
				margin: 30px 0 0 10px;
			}
			p.contact{
				clear: both;
				margin: 8px 0 20px 10px;
			}
		}
	}
	
	#modulo, #curling_tournement, #entrack {
		position: absolute;
		top: 40px; 
		left: 0px;
		right: 530px;
		bottom: 0px;
		background: rgba(0, 0, 0, 0.8);
		z-index: 100;
		.content{
			width: 100%;
			height: 100%;
			overflow: hidden;
			iframe, object, object embed {
				width: 100%;
				height: 100%;				
			}
		}
	}
	
	#googleMaps{
		position: absolute;
		top: 40px; 
		left: 0px;
		right: 510px;
		bottom: 0px;
		background: rgba(0, 0, 0, 0.8);
		z-index: 100;
		.content{
			width: 100%;
			height: 100%;
			overflow: auto;
		}
		#map_canvas{
			width: 100%;
			height: 100%;
		}
		#info-marker {
			strong {
				font-family: QuicksandBold, sans-serif;
			}
			font-family: QuicksandLight;
			font-weight: bold;
		}
	}
}