/* @group reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,menu,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}a{text-decoration:none;}a:hover{text-decoration:none;}a,a img{border:0;outline:none;}header,section,footer,aside,nav,article,figure {display: block;} 
/* @end */

/* @group font-face */
@font-face {
    font-family: myriad;
    src: url(./fonts/MyriadPro.otf);
}
@font-face {
    font-family: myriadbold;
    src: url(./fonts/MyriadPro-B.otf);
}
@font-face {
    font-family: myriaditalic;
    src: url(./fonts/MyriadPro-It.otf);
}

@font-face {
    font-family: myriadsemibold;
    src: url(./fonts/MyriadPro-Sb.otf);
}
@font-face {
    font-family: onetrick;
    src: url(./fonts/OneTrick.ttf);
}
/* @end */

/* @group body */

body {
	background:url('./img/bg.png');
	height: 100%;
}
#conteneur em {
	font-family: myriaditalic;
}
#conteneur strong {
	font-family: myriadsemibold;
}
.lt {
	font-family: myriaditalic;
	text-decoration: line-through;
	text-shadow: 0px 1px 0px hsla(0,0%,0%,0);
	color: hsla(20,20%,90%,1);
}
.me {
	margin-left: 2px;
	text-transform: lowercase;
	font-family: OneTrick;
	font-size: 15px;
	vertical-align: 10%;
}
h2 {
	font-family: myriadbold;
	text-transform: uppercase;
	font-size: 20px;
	color: white;
	letter-spacing: 0px;
	text-shadow: 0px 1px 0px hsla(0,0%,0%,0.5);
	margin-bottom: 5px;
}

/* @end */

/* @group base */

#englobe {
	background:url('./img/bghl.png') repeat-y center, url('./img/bg.png');
	background-position: center center;
	width: 100%;
	height: 100%;
	position: absolute;
	min-height: 533px;
	min-width: 900px;
	overflow: hidden;
}

#main { 
	width:900px;
	height: 500px;
	position:absolute; 
	top:50%;
	left:50%;
	margin:-255px 0px 0px -450px; 
}

#conteneur { 
	padding: 1px 1px 1px 1px;
	height:420px; 
}
header {
	width: 100%;
	height: 100px;
}
#hi {
	position: absolute;
	left: 50%;
	margin: 0px 0 0 -163px;
}
#contentlcr {
	width: 100%;
	height: 283px;
	margin-top: 37px;
}
#left {
	margin: 0px 0px 0px 50px;
	float: left;
	width: 232px;
	height: 232px;
}
#center {
	margin: -1px 45px 0px 45px;
	padding: 3px 2px 2px 2px ;
	float: left;
	width: 240px;
	height: 240px;
}


#wrap img{
	position: absolute;
}

#right {
	margin: 0px 50px 0px 0px;
	float: left;
	width: 232px;
	height: 232px;

}
#available {
	height: 40px;
	margin: 0px 0px 10px 0px;
	overflow: hidden;
	background:hsla(0,0%,00%,0.5);
	background: 
		-webkit-gradient(
		linear,
		left top, left bottom,
		color-stop(0%,rgba(35,18,13,1)),
		color-stop(75%,rgba(50,26,19,0.75))
		);
	background:	-moz-linear-gradient(
		top,rgba(35,18,13,1)0%, 
		rgba(50,26,19,0.6) 75%
		);
	border-radius:8px;
	-moz-border-radius: 8px;
	-webkit-box-shadow: 
	inset 0px 1px 0px hsla(0,0%,00%,0.3),
	inset 0px -1px 0px hsla(0,0%,00%,0.15),
	inset -1px 0px 0px hsla(0,0%,00%,0.15),
	inset 1px 0px 0px hsla(0,0%,00%,0.15),
	0px 1px 0px hsla(0,0%,100%,0.05),
	0px -1px 0px hsla(0,0%,100%,0.03),
	1px 0px 0px hsla(0,0%,100%,0.02),
	-1px 0px 0px hsla(0,0%,100%,0.02);
	-moz-box-shadow:
	inset 0px 1px 0px hsla(0,0%,00%,0.3),
	inset 0px -1px 0px hsla(0,0%,00%,0.15),
	inset -1px 0px 0px hsla(0,0%,00%,0.15),
	inset 1px 0px 0px hsla(0,0%,00%,0.15),
	0px 1px 0px hsla(0,0%,100%,0.05),
	0px -1px 0px hsla(0,0%,100%,0.03),
	1px 0px 0px hsla(0,0%,100%,0.02),
	-1px 0px 0px hsla(0,0%,100%,0.02);
}

/* @end */

/* @group content index */


#conteneur p {
	font-family: myriad;
	font-size: 11px;
	color: hsla(17,10%,96%,1);
	text-align: justify;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px hsla(0,0%,0%,0.8);
	line-height: 18px;
}
#left p {
	line-height: 24px;
}
#left a {
	font-size: 11px;
}

#center nav {
	position: absolute;
	height: 35px;
	margin: -40px 0px 0px 44px ;
}
#center nav li {
	display: block;
	float: left;
}
#center nav a {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0px 5px;
	background: url('./img/nav.png')no-repeat center;

}
#center nav a:hover {
	background: url('./img/nav-hover.png')no-repeat center;
}
#center nav a.select {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0px 5px;
	background: url('./img/nav-select.png')no-repeat center;
}

#right li, a {
	font-family: myriad;
	font-size: 10.4px;
	color: white;
	text-align: justify;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px hsla(0,0%,0%,0.8);
	line-height: 2.2;
}

#available p {
	display: block;
	height: 27px;
	padding: 13px 0px 0px 55px ;
	font-family: myriad;
	font-size: 10.4px;
	color: white;
	text-align: justify;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px hsla(0,0%,0%,0.8);
}

#sinocv {
	padding-top: 11px;
	-webkit-transform:translate(0px, 0px);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transform:translate(0px, 0px);
	-moz-transition: all 0.5s ease-in-out;
	-o-transform:translate(0px, 0px);
	-o-transition: all 0.5s ease-in-out;
}
/*#sinocv:hover {
	-webkit-transform:translate(0px,-40px);
	-moz-transform:translate(0px,-40px);
	-o-transform:translate(0px,-40px);
}*/
#si{
	margin: 0px 0px 0px 20px ;
	padding: 0px 0px 0px 30px;
	width: 212px;
	height: 40px;
	background: url('./img/ico/si.png')no-repeat 0px 0px;
}
#no{
	margin: 0px 0px 0px 15px ;
	padding: 0px 0px 0px 30px;
	width: 212px;
	height: 40px;
	background: url('./img/ico/no.png')no-repeat 0px 0px;
}
#cv{
	margin: 0px 0px 0px 20px ;
	padding: 0px 0px 0px 30px;
	width: 212px;
	height: 40px;
	background: url('./img/ico/cv.png')no-repeat 0px 0px;
}

#steaw {
	margin: 0px 0px 0px 15px ;
	padding: 0px 0px 0px 30px;
	width: 212px;
	height: 40px;
	background: url('./img/ico/steaw.png')no-repeat 0px 0px;
}

#getintouch {
	display: block;
	height: 15px;
	margin: 15px 0px 0px 0px;
}
#mailvc {
	display: block;
	height: 50px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 20px 0px ;
}
#mailvc li {
	height: 20px;
	width: 110px;
	margin: 10px 0px 0px 20px ;
	padding: 0px 0px 0px 0px ;

}
#mailvc a {
	display: block;
	height: 18px;
	width: 150px;
}
#vCard {
	position: relative;
	left: 0px;
	background: url('./img/ico/vCard.png')no-repeat;
 	-webkit-transition: all 0.1s ease-in-out;
 	text-indent: 30px;
}
#vCard:hover {
	position: relative;
	left: 2px;
}
#vCard:active {
	position: relative;
	left: 2px;
	top: 1px;
}
#mail {
	position: relative;
	left: 0px;
	background: url('./img/ico/mail.png')no-repeat;
 	-webkit-transition: all 0.1s ease-in-out;
 	text-indent: 30px;
}
#mail:hover {
	position: relative;
	left: 2px;
 	-webkit-transition: all 0.1s ease-in-out;
}
#mail:active {
	position: relative;
	left: 2px;
	top: 1px;
}
#follow {
	height: 15px;
}
#social {
	display: block;
	height: 18px;
	margin: 10px 0px 0px 3px;
}
#social li{
	position: relative;
	bottom: 0px;
	padding: 0px 0px 0px 0px ;
	float: left;
 	-webkit-transition: all 0.1s ease-in-out;
 	text-indent: 22px;
}
#social li:hover {
	position: relative;
	bottom: 2px;
 	-webkit-transition: all 0.1s ease-in-out;
}
#social li:active {
	position: relative;
	bottom: 1px;
}
#social li a {
	display: block;
	width: 100%;
	min-width: 100%;
	height: 20px;
}
#linkedin {
	margin: 0px 10px;
	background: url('./img/ico/in.png')no-repeat;
}
#twitter {
	background: url('./img/ico/tw.png')no-repeat;
}
#facebook {
	background: url('./img/ico/fb.png')no-repeat;
}
#behance {
	margin: 0px 0px;
	background: url('./img/ico/behance.png')no-repeat;
}

/* @end */
/* @group content work */

#contentwork { 
	padding: 1px 1px 1px 1px;
	height:420px; 
	background:hsla(0,0%,00%,0.25);
	background: 
		-webkit-gradient(
		linear,
		left top, left bottom,
		color-stop(0%,rgba(35,18,13,1)),
		color-stop(15%,rgba(50,26,19,0.6))
		);
	background:	-moz-linear-gradient(
		top,rgba(35,18,13,1)0%, 
		rgba(50,26,19,0.6) 15%
		);
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: 
	inset 0px 1px 0px rgba(0,0,0,0.3),
	inset 0px -1px 0px rgba(0,0,0,0.15),
	inset -1px 0px 0px rgba(0,0,0,0.15),
	inset 1px 0px 0px rgba(0,0,0,0.15),
	0px 1px 0px rgba(255,255,255,0.05),
	0px -1px 0px rgba(255,255,255,0.03),
	1px 0px 0px rgba(255,255,255,0.02),
	-1px 0px 0px rgba(255,255,255,0.02);
	-moz-box-shadow:
	inset 0px 1px 0px rgba(0,0,0,0.3),
	inset 0px -1px 0px rgba(0,0,0,0.15),
	inset -1px 0px 0px rgba(0,0,0,0.15),
	inset 1px 0px 0px rgba(0,0,0,0.15),
	0px 1px 0px rgba(255,255,255,0.05),
	0px -1px 0px rgba(255,255,255,0.03),
	1px 0px 0px rgba(255,255,255,0.02),
	-1px 0px 0px rgba(255,255,255,0.02);
}

/* @group navigation */
#arrowl {
	display: block;
	position: absolute;
	height: 30px;
	width: 29px;
	background: url('./img/navarrow.png') top left;
	margin: 13px 0px 0px -35px;
	cursor: default;
}
#arrowl a {
	cursor: default;
}
#arrowr {
	display: block;
	position: absolute;
	height: 30px;
	width: 29px;
	right: -35px;
	background: url('./img/navarrow.png') bottom right;
	margin: 13px 0px 0px 0px;
	cursor: pointer;
}
#arrowr a {
	cursor: pointer;
}
#wrapnav {
	overflow: hidden;
}
#contentwork nav {
	width: 2000px;
	height: 55px;
	margin-top: 1px;
}
#contentwork ol {
	padding: 0px 0 0 15px ;
	height: 35px;
	width: 100%;
	-webkit-transition:all 0.75s ease-in-out;
	-moz-transition:all 0.75s ease-in-out;
	-o-transition:all 0.75s ease-in-out;
	-transition:all 0.75s ease-in-out;
}
#contentwork nav li {
	margin: 0 35px 0 0 ;
	display: block;
	float: left;
}
#contentwork nav li a {
	display: block;
	height: 31px;
	padding: 22px 0 0 0px ;
	margin: 2px 0 0 35px;
	font-family: Georgia, serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
	color: white;

	background: url('./img/navhover.png') center top no-repeat;
	-webkit-transition: background 0.5s ease-in-out; 
}
#contentwork nav li a:hover {
	background: url('./img/navhover.png') center bottom no-repeat;
}
#contentwork nav li a.selected {
	background: url('./img/navhover.png') center bottom no-repeat;
}
#nav1 {
	height: 50px;
	background: url('./img/li/antarctic.png')0px 22px no-repeat;
}
#nav2 {
	height: 50px;
	background: url('./img/li/zm.png')0px 22px no-repeat;
}
#nav3 {
	height: 50px;
	background: url('./img/li/ehockey.png')0px 22px no-repeat;
}
#nav4 {
	height: 50px;
	background: url('./img/li/iceranking.png')0px 22px no-repeat;
}
#nav5 {
	height: 50px;
	background: url('./img/li/doodlink.png')0px 22px no-repeat;
}
#nav6 {
	height: 50px;
	background: url('./img/li/wisnag.png')0px 22px no-repeat;
}
#nav7 {
	height: 50px;
	background: url('./img/li/nighconnect.png')0px 22px no-repeat;
}
#nav8 {
	height: 50px;
	background: url('./img/li/exa.png')0px 22px no-repeat;
}
#nav9 {
	height: 50px;
	background: url('./img/li/mystis.png')0px 22px no-repeat;
}
#nav10 {
	height: 50px;
	background: url('./img/li/smb.png')0px 22px no-repeat;
}
#nav11 {
	height: 50px;
	background: url('./img/li/polaris.png')0px 22px no-repeat;
}


/* @end */

/* @group content */
#slidecontainer {
	position: relative;
	width: 890px;
	height: 360px;
	margin: 1px 0px 0px 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#preview {
	position: absolute;
	width: 1000px;
	-webkit-transition:all 0.75s ease-in-out;
	-moz-transition:all 0.75s ease-in-out;
	-o-transition:all 0.75s ease-in-out;
	-transition:all 0.75s ease-in-out;
}
#preview img {
	z-index: 2;
	position: absolute;
	padding: 0;
	margin: 0;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 
	0px 1px 0px rgba(00%,00%,00%,0.5),
	1px 0px 0px rgba(00%,00%,00%,0.5),
	-1px 0px 0px rgba(00%,00%,00%,0.5),
	0px -1px 0px rgba(00%,00%,00%,0.5);
	-moz-box-shadow: 
	0px 1px 0px rgba(00%,00%,00%,0.5),
	1px 0px 0px rgba(00%,00%,00%,0.5),
	-1px 0px 0px rgba(00%,00%,00%,0.5),
	0px -1px 0px rgba(00%,00%,00%,0.5);

}
#preview a {
	padding: 0;
	margin: 0;
}

/* @end */

/* @end */



/* @group content photos */

#contentp { 
	padding: 1px 1px 1px 1px;
	height:420px; 
}

#comingsoon {
	margin: 90px 0px 0px 250px ;
	width: 413px;
	height: 288px;
}

/* @end */

/* @group menu */

menu {
	margin: 10px 0 0 0;
	position: absolute;
	width: 900px;
	height: 60px;
	background:hsla(0,0%,00%,0.75);
	background: -moz-linear-gradient(
		top,
		hsla(0,0%,00%,0.75),
		hsla(0,0%,00%,0.9)
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(rgba(12,12,12,0.75)),
		to(hsla(0,0%,00%,0.9))
	);
	border:1px solid hsla(0,0%,00%,1);
	-moz-border-radius: 4px;
	border-radius: 4px; 
	-webkit-box-shadow: 
	inset 0px 1px 0px hsla(0,0%,100%,0.05),
	inset 1px 0px 0px hsla(0,0%,100%,0.04),
	inset -1px 0px 0px hsla(0,0%,100%,0.04),
	inset 0px -1px 0px hsla(0,0%,100%,0.03);
	-moz-box-shadow: 
	inset 0px 1px 0px hsla(0,0%,100%,0.05),
	inset 1px 0px 0px hsla(0,0%,100%,0.04),
	inset -1px 0px 0px hsla(0,0%,100%,0.04),
	inset 0px -1px 0px hsla(0,0%,100%,0.03); 
}

menu {
	color: white;
	z-index: 20;
}
menu ul {
	width: 600px;
	position: absolute;
	height: 20px;
	vertical-align: middle;
}

menu li {
	display: block;
	float: left;
	height: 60px;
	background: url('./img/sep.png') no-repeat;
	background-position: center right;
}
menu li a {
	background: url('./img/menuhover.png')no-repeat bottom center;
	line-height: 1;
	padding: 25px 30px 25px 25px;
	display: block;
	float: left;
	height: 10px;
	font-family: Georgia, serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px hsla(0,00%,00%,1);
	color: white;
}
menu li a:hover {

}
menu li a:active {
	position: relative;
	top: 1px;
}
menu li:last-child {
	background: none;
}
#lang {
	position: absolute;
	right: 10px;
	bottom: 0px;
	z-index: 10;
}
#logo {
	position: absolute;
	right: 0px;
	margin: -20px -70px 0 0;
	z-index: 1;
}

/* @end */

/* @group footer */

footer {
	z-index: 1;
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin: 0 0 0 -450px;
	width: 900px;
	height: 30px;
	font-family: Georgia, serif;
	color: hsla(1,0%,0%,1);
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 1px 0px hsla(0,0%,100%, 0.05);
}
#ftleft {
	position: absolute;
	left: 0px;
}
#ftright {
	position: absolute;
	right: 0px;
}

/* @end */	height: 50px;