/* NOTICE : This CSS file is the core CSS for mfaa.asia website. Please keep space between each parameters and before opening tag! */

::-webkit-scrollbar {
  background-color: #e5e4e2;
  -webkit-border-radius: 8px;
  width: 10px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {

  background: rgba(54,54,54,0.8);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{background: rgba(54,54,54,1);}



/* Development area */
.devalert { position: absolute; left:23%; top:35%; color: white; font-size: 25px; background-color: red; z-index: 1000;}
.footer-project { float: left; font-size: 15px; padding-top: 3px; margin-top: 16px; line-height: 20px; text-align: center; width: 860px; font-variant: small-caps; margin-top: 50px; position: relative; z-index: 99;}
.wrapper { float: left;}
#preload { position:absolute;top:0;left:3000px; display: none;}

/* The basics */
html, body { height: 100%}
body { font-family: "Helvetica Neue", Arial; color: #7a7a7a; font-size: 13px; margin: 0 auto; padding: 0; unicode-bidi: embed; overflow: hidden; overflow-x: auto; overflow-y: auto }
:focus { outline: none;}
a { color: #7a7a7a; text-decoration: none;}
a:hover { color: #7a7a7a}
ul, ol, li { margin: 0; padding: 0; list-style-type: none;}
img { border: 0;}
#ajax {position: relative; overflow: hidden; clear: left}
.container, .heavy { clear: left; width: 910px; margin: 0 auto; position: relative;}
.distance { position: relative; width: 1px; float: left; height: 50%; margin-bottom: -320px;}
.ajaxbuffer { display: none;}
.left {float: left;}
.right {float: right;}
.last, #last { margin-right: 0 !important;}
.clearer {clear: both;}
.footer { float: left; line-height: 16px; text-align: left; width: 910px; position: absolute; bottom: 0; text-align: center; border-top: 1px solid #c5c5c5; padding-top: 10px; }
.home .footer { border-top-color: transparent}
.footer .footer-title { font-weight: bold; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; }
.footer table { width: 910px; text-align: center;}
.footer table td { margin: 0; padding: 0;}
.footer table td a { font-size: 11px}
.footer table td.left { text-align: left;}
.footer table td.last { text-align: right;}
/*
.footer .social { background: url(../css_imgs/social.jpg) no-repeat; width: 15px; height: 15px; display: inline-block; margin-right: 10px; text-indent: -999em;}
.footer .social.last { margin-right: 0;}
.footer .social.fb { background-position: 0 0;}
.footer .social.tw { background-position: -20px 0;}
.footer .social.lk { background-position: -39px 0;}
*/
.footer .social { position: absolute; right: 0; top: 9px;}
.footer .social img { height: 16px; margin-left: 5px;}

/* Elements using jQuery */
#ajaxcontainer li, #bigimg, #preload, #album, .index .container a, .presentation .container { opacity: 0; filter: alpha(opacity=1); zoom: 1;}
.container .loader { position: absolute; z-index: 1000; background: url(../css_imgs/ajax-loader.gif) center center no-repeat white; height: 543px; width: 910px; top:0; left: 0;}
.container .loader.loaded { background: white;}
#album { position: relative; padding-bottom: 40px;}
#album.hd { position: inherit;}
#imgs-container { overflow: hidden;}
#pages { float: left;}


/* Everything about logo parameters is here */
.world { background: url(../css_imgs/world.png) center center no-repeat; height: 530px; width: 910px;}
.big-logo { background-position: -742px top; width: 750px; height: 267px; margin-left: 12px}
.logo { background-position: -413px top; width: 300px; height: 91px; margin-left: 240px; margin-bottom: 14px;}
.home .logo, .presentation .logo, .credits .logo, .mentions .logo { margin-top: 25px;}


/* Navigation */
.header { background: url(../css_imgs/header.jpg) left bottom no-repeat; width: 910px; padding: 46px 0 0 0; position: relative;}
.header .where { position: absolute; left: 120px; top: 0px; line-height: 46px; height: 46px; font-size: 20px; font-weight: normal; margin: 0; padding: 0; font-family: "Helvetica Neue Light", Arial; width: 770px;}
.header.front { background-position: left top;}
.header.front h1 { font-size: 14px; font-weight: bold; width: 770px; text-align: right; color: #303030;}
.header .mfaa { position: absolute; z-index: 1; top: 0; left: 0; width: 104px; height: 46px; display: block; text-indent: -999em;}
.header .global { position: absolute;  font-size: 14px; font-weight: bold; width: 200px; text-align: right; color: #303030; right: 0; top: 0;}
.title { font-size: 20px; color: #7a7a7a; width: 910px; padding-bottom: 10px; margin: 0; font-weight: normal}
.title.artistName { width: auto; float: left; letter-spacing: 2px; padding-right: 10px;}
.title.albumName { width: auto; float: left; padding-left: 15px; background: url(../css_imgs/arrows_big.png) left 17px no-repeat; font-size: 17px; line-height: 48px;}
.title.menuArtist { text-align: right; padding-right: 0; width: 340px; float: right;}
.title.menuArtist a { position: relative; left: 8px; font-size: 20px;}
.menu-container {float: left; width:910px; height: 30px; margin-bottom: 5px;}
.menu-wrapper { padding: 0; margin: 2px 0 0 0; height: 30px; width: 910px; position: relative; z-index: 1000; display: -webkit-box; -webkit-box-pack: justify; display: -moz-box; -moz-box-orient: horizontal; border-bottom: 1px solid #c5c5c5;}
.layer { background: rgba(255,255,255,0.9); width: 3000px; height: 630px; float: left; position: absolute; z-index: 100; top: 83px; display: none;}
.menu-wrapper .center { float: left; margin: auto;}
.menu-wrapper .left { text-align: left; float: none;}
.menu-wrapper .right { text-align: right; float: none;}
.menu-wrapper ol, .menu-wrapper ul { font-size: 14px; text-align: left; width: auto; padding: 0; color: #7a7a7a; list-style-type: none; position: relative; z-index: 200; -moz-box-flex: 1;}
.menu-wrapper ol { }
.menu-wrapper ol li { cursor: default; }
.menu-wrapper ol li a.level0 { color: #7a7a7a; line-height: 28px; text-shadow: 0 0 1px #eee; display: block; font-size: 13px; text-align: center;}
.menu-wrapper ol.left li a.level0 { text-align: left; margin-right: -10px;}
.menu-wrapper ol.right li a.level0 { text-align: right; margin-left: -10px}
.menu-wrapper ol li.on a.level0 { color: #000 !important}
.menu-wrapper ol li.over a.level0, .menu-wrapper ol li.on a.level0 { color: #7a7a7a; text-shadow: 0 0 3px #fff}
.menu-wrapper ol li.over a.level0 { color: #000; }
.menu-wrapper ol.on a.level0 { color: #000 !important; }
.menu-wrapper ol.right { margin-right: 0;}
.menu-wrapper ol ul { position: absolute; left: -9999px; z-index: 100; padding: 10px 20px 20px 20px; background: url(../images/pic.png)}
.menu-wrapper ol li.over ul { position: absolute; left: -20px;}
.menu-wrapper ol ul li { white-space: nowrap; margin-bottom: 7px; height: 18px; line-height: 18px;}
.menu-wrapper ol li ul li a { font-size: 14px; }
.menu-wrapper ol li ul li.on a, .menu-wrapper ol ul li a:hover { font-size: 16px;}

.submenu { background: #fff; width: 100%; float:left; height: 20px; margin-bottom: 14px; padding-left: 0px; list-style-type: none; position: relative; top: 0px; text-align: center;}
.submenu li { display: inline-block; margin-right: 15px; line-height: 24px; padding: 0; }
.submenu li a { color:#838383; text-transform: lowercase; float: left; font-size: 13px;}
.submenu li.on a.level0 { color: #000; font-weight: bold}
.submenu li #pager { float: left; line-height: 18px; margin-top: 2px;}
.submenu li #pager a { margin-right: 2px; padding: 2px 2px; font-size: 12px; }
.submenu li #pager a:hover { background: #ddd; }
.submenu li #pager .activeSlide, .submenu li #pager .activeSlide:hover {  color: #000; }
.submenu li a:hover { color: #7a7a7a}
.submenu li.artist, .title.album { background: #fff; color: #7a7a7a; font-size: 26px; position: relative; padding: 1px 10px 0 0; position: relative; top: 1px; float: left; text-align: left;} 
.title.album { font-size: 18px; letter-spacing: normal; width: 450px; padding-right: 10px; float: right; line-height: 36px; white-space: nowrap;}
.title.album .client { text-transform: uppercase;}
.title.album.hd { float: left; padding: 5px 10px 0px 0; position: fixed; width: 100%; background: rgba(255,255,255,0.9) !important; line-height: 25px; height: 55px;}
.title.album.hd .back { float: left; background: #000; height: 60px; margin-right: 10px; color: #fff; line-height: 60px; padding-right: 10px; position: absolute; left: 0; top: 0;}
.title.album.hd h1 { float: left; margin-top: 0px; margin-left: 90px}
.title.album.hd h2 { position: absolute; right: 40px; top: 14px;}
.title.album.hd span { font-size: 18px; font-weight: normal; line-height: 18px; padding: 0; margin: 0;}
#titleContainer { position: fixed; width: 100%; height: 50%; z-index: 100;}

.go { width: 860px; margin: auto; clear: both; position: relative; top: 635px; margin-bottom: -15px; height: 15px; text-align: center; direction: ltr; z-index: 100;}
.go-project { width: 40px; margin: auto; clear: both; position: absolute; top: 647px; margin-bottom: -15px;  height: 15px;}
.accueil { margin: auto; }


/* Navigation tools */
.arrow { float: left; width: 28px; height: 16px; text-indent: -9999px; position: absolute; cursor: pointer;}
.arrow.left { background-position: left top; left: 0; top: 220px; display: none;}
.arrow.left:hover { background-position: left -28px;}
.arrow.right { background-position: -40px top; right: 0; top: 220px; display: none;}
.arrow.right:hover { background-position: -40px -28px;}
.arrow.top, .arrow.bottom { text-indent: 0; width: 140px; text-align: center; position: absolute; text-transform: uppercase; font-size: 13px; left: 323px; }
.arrow.top { background-position: -85px -85px; padding-top: 24px; top: -19px;}
.arrow.top:hover { background-position: -187px -85px;}
.arrow.bottom { background-position: -85px 20px; padding-bottom: 20px; top: 430px}
.arrow.bottom:hover { background-position: -187px 20px;}
.arrow.back { background-position: left -56px; left: 0; width: 29px; height: 16px; display: none; text-transform: lowercase}
.arrow.back:hover { background-position: left -84px;}
.arrow.album { top: 428px;}
.arrow.right.show, .arrow.left.show { display: block;}


/* Specific parameters for page : INDEX */
.index .go { top: 17px;}
.index a { font-size: 14px; margin-top: 27px; margin-right: 33px}
.index a.fr { margin-left: 33px;}
.index .distance { margin-bottom: -160px;}
.col2-layout .col { float: left;}
.col2-layout .col-left { width: 315px; text-transform: uppercase; font-size: 14px;}
.col2-layout .col-right { width: 314px; height: 412px; background-position: -1585px top; float: right;}
.col2-layout .col-left span { float: left; clear: both; width: 314px; text-align: right; font-size: 12px;}
.col2-layout .col-left span.first-line { margin-bottom: 10px; font-size: 13px; letter-spacing: 1.1px}
.col2-layout .col-left span.first-line strong { font-size: 17px;}
.col2-layout .col-left span.second-line { margin-bottom: 4px; letter-spacing: 1.4px}
.col2-layout .col-left span.third-line { margin-top: 8px; font-size: 13px; letter-spacing: 1.1px}
.col2-layout .col-left span.third-line strong { font-size: 17px;}
.col2-layout .col-left span.signature { text-transform: capitalize; font-style: italic; font-size: 16px; margin-top: 10px;}
.col2-layout .col-left p { font-size: 12px; text-align: justify; float: left; padding: 0; margin: 0; line-height: 20px; letter-spacing: 0.2px; #line-height: 18px}
.col2-layout .col-left p strong, .col2-layout .col-left span strong { font-size: 16px; width: inherit; font-weight: 100;}


/* Slideshow parameters */
.line.album li { margin-right: 14px;  }
.line.album li .pic { position: absolute; display: block; width: 100%; height: 100%; z-index: 1; background: url(../css_imgs/pic.png)}
#ajaxcontainer { float:left; text-align: center; width: 910px; margin: auto; position: relative;}
#ajaxcontainer ul { list-style-type: none;}
#ajaxcontainer li { float: left; text-align: center;}
#ajaxcontainer ul.dynamic { width: 840px; margin: auto; position: relative;}
#ajaxcontainer img { margin: 0 20px 0 0;}
#ajaxcontainer .coupures img { margin: 0 ;}
#ajaxcontainer .dynname2 img { margin: 0 15px;}
#ajaxcontainer .dynname { width:180px; margin: auto; color:#484848; font-size: 15px;}
#ajaxcontainer .dynname2 { width:250px; margin: auto; position:relative; color:#484848; font-size: 15px;}
#ajaxcontainer .dynname3 { margin: auto; position: relative; color: #484848; font-size: 19px; margin-top: 15px;}
.container { height: 564px;}
.container .coming { width: 910px; float: left; height: 50px; font-size: 30px; text-align: center; margin-top: 190px; font-weight: normal;}
/* Specific parameters for page : HOME */
#album { width: 910px !important; float: left; margin-top: 7px; overflow: visible !important; height: 433px; }
#album .element { margin: 0 auto; width: 910px; text-align: center;}
/* Specific parameters for page : ARTIST BIOGRAPHY */
.biography { text-align: left; width: 910px; font-size: 14px; float: left; position: relative;}
.biography .img-container { float: left; height: 450px; margin: 0 30px 5px 0 !important;}
.biography .text-container { text-align: justify; float: left;}
.biography .text-container .real { width: 100%; height: 50px; float: left; clear: both;}
.biography .flou, .blog .flou { position: absolute; bottom: 47px; width: 873px; height: 119px; background: url(../css_imgs/bio.png) no-repeat;}
#bio { float: left; width: 100%; height: 450px; padding-bottom: 20px;	overflow: auto; }
#bio p { height: 100%; padding: 0; padding-right: 20px; margin: 0; }


/* Specific parameters for page : GALLERY VIEW */
.gallery { padding-left: 40px; width: 895px; margin: 0 0 0px 0; float: left; }
.gallery li { width: 162px; height: 114px; float: left; margin: 0 11px 11px 0; color: #fff; position: relative; font-size: 14px; text-align: center;}
.gallery li a { color: #fff; width: 162px; height: 114px; position: absolute; left: 0; top: 0;}
.gallery li .layer { width: 162px; height: 114px; position: absolute; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1; display: none; top: 0; left: 0; text-align: center; }
.gallery li .client, .gallery li .name { position: relative; z-index: 2; float: left; clear: both; width: 162px;}
.gallery li .client { margin-top: 39px; text-transform: uppercase; }

/* Specific parameters for page : PHOTOS */
.photos .title { color: #eee}


/* Specific parameters for page : HD ALBUM */
.hd-album { height: 100%; white-space: nowrap}
.hd-album img { margin-right: 15px; height: 100%; width: auto}
.picHD { width: 100%; height: 100%; position: fixed;}


/* Specific parameters for page : CONTACT */


.contact .container .text { text-align: center; font-size: 14px; height: 505px; overflow: hidden; overflow-y: auto; float: left; width: 320px; margin: 100px 80px 0 40px; padding-right: 40px; text-align: justify}
.contact .container .text h1 { font-size: 25px; margin: 0;}
.contact h3 { text-align: center}
.contact .container .agency { text-align: center;}
.contact .jobs { margin-top: 53px; text-align: left}

.contact .container .contacts { float: left; width: 430px; text-align: left; font-size: 13px; padding-top: 140px; text-align: center;}
.contact .container .contacts h1 { font-size: 25px; margin: 0;}
.contact .container .contacts a {  color: #000;}
.contact .container .contacts table { width: 100%;}
.contact .container .contacts table td { vertical-align: middle; line-height: 20px;}
.contact .container .contacts table td img { position: relative; top: 6px;}
.contact .container .contacts table td.left { text-align: left;}
.contact .container .contacts table td.right { text-align: right;}

.production .container .text { text-align: center; font-size: 18px; padding: 115px 80px 0}
.production .container .text h1 { font-size: 25px; margin: 0;}
.production .container .text a { color: #303030;}


/* Specific parameters for page : BLOG */
.widget_search { margin-bottom: 10px; float: left}
#searchform #s { float: left; width: 150px}
#searchsubmit { background: url(../css_imgs/search.png) no-repeat; width: 16px; height: 16px; border: none; text-indent: -9999px; float: left; margin: 3px 0 0 4px; }

/* AJOUT PREZ */
.prev-container, .next-container, a#prev, a#next { background: url(../css_imgs/arrows.png) no-repeat; height: 11px; width: 19px; float: left; text-indent: -9999px;}
.prev-container { background-position: 3px bottom;  margin: 7px 0 0 7px;}
.next-container { background-position: -24px bottom;  margin: 7px 0 0 0px;}
a#prev {float: left; margin-left:10px;cursor: pointer; background-position: 3px top; margin: 0 !important; display: none;}
a#next {float: left; margin-left:5px; cursor: pointer; background-position: -24px top; margin: 0 !important; display: none;}
.good { background: red}

#goLeft, #goRight {height: 100%; width: 118px; float: left; position: fixed; right: 0%; z-index: 2; text-indent: -9999px;}
#goLeft {left: 0%; background: url(../css_imgs/prevp.png) left top; }
#goRight { background: url(../css_imgs/nextp.png) right top; }

.window {float:left; }



.space {overflow: hidden; position: relative;  } 
.space ul { white-space: nowrap;  }
.space li { display: inline-block; position: relative; width: auto}
.space li.description { background: #434343; color: #fff; height: 360px; padding: 15px 30px;}
.space li.description div { display: block; height: 390px; float: left;}
.space li.description div h3 { font-style: italic; margin-bottom: 0; display: block; padding: 0; margin: 0;}
.space li.description div h2 { padding: 0;margin: 0;}
.space li.description div .section { margin: 60px 0 0; display: block; width: 100%; clear: both; float: left; height: auto;}

.collection {float: left;}
.conteneur { float: left;}

.video-container { min-width: 390px;}
.videodiv { position: relative; z-index: 1}
.player { position: relative; z-index: 1}

.playButtonContainer { position: absolute; float: left; top: 164px;}
.playButton { background: url(../css_imgs/playButton.png) left top no-repeat; width: 70px; height: 64px; text-indent: -9999px; cursor: pointer; margin: 0 auto}


.sliderContainer { width: 910px; height: 12px;  position: absolute; padding: 0 1px; top: 475px; clear: both; margin: 0 auto; /* -moz-box-shadow: 0 0 10px #838383 inset; -webkit-box-shadow: 0 0 10px #838383 inset; -moz-border-radius: 8px; -webkit-border-radius: 8px; */}
.slider { width: 460px; height: 12px; position: relative; z-index: 2; margin: 0 auto;}
.sliderContainer span.btn-left { float: left; width: 12px; height: 12px; cursor: pointer; }
.sliderContainer span.btn-right { float: right; width: 12px; height: 12px; cursor: pointer; left: 8px; }
.ui-slider-handle { width: 40px; height: 10px; position: absolute; top: 1px; background: url(../css_imgs/sliderHandle.png); /* border-radius: 8px; -moz-border-radius: 8px; */ cursor: move; margin: 0 -20px; z-index: 1000; z-index: 20}

/* Vertical version */
.sliderContainerV { width: 12px; height: 448px;  position: absolute; right: 0; top: 0; padding: 1px 0px; clear: both; margin: 0 auto; /* -moz-box-shadow: 0 0 10px #838383 inset; -webkit-box-shadow: 0 0 10px #838383 inset; -moz-border-radius: 8px; -webkit-border-radius: 8px; */ background: url(../css_imgs/sliderContainerV.png) no-repeat;}
.sliderContainerV .bioslider { width: 12px; height: 408px; position: relative; z-index: 2; margin: 0 auto;}
/*
.sliderContainerV span.btn-left { position: relative; top: 0; width: 12px; height: 12px; cursor: pointer; }
.sliderContainerV span.btn-right { position: relative; bottom: 0; width: 12px; height: 12px; cursor: pointer; }
*/
.sliderContainerV .ui-slider-handle { width: 10px; height: 40px; position: absolute; left: 1px; background: #7a7a7a; border-radius: 8px; -moz-border-radius: 8px; cursor: move; margin: 0px -0px; z-index: 1000; z-index: 20;}

.sliderContainer .viewHD { width: 13px; height: 13px; white-space: nowrap; float: left; padding-left: 18px; background: url(../css_imgs/viewHD.png) left top no-repeat; position: absolute; right: 163px; top: 1px; font-size: 10px;}
.sliderContainer .back { float: left; padding-left: 18px; text-transform: uppercase; text-transform: lowercase; width: 175px; font-size: 10px;  display: block; text-align: right; line-height: 16px; font-size: 12px; position: absolute; left: 0; bottom: -2px;}
.sliderContainer .back span { display: inline-block;}
.sliderContainer .back span.arrowBack { background: url(../css_imgs/arrows_big.png) left bottom no-repeat; width: 9px; height: 12px; margin: 0 4px 0 0; position: relative; top: 2px; }


/* ScrollPane  */
/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 200px;
	height: 16px;
	z-index: 1000
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	position: relative;
	background: url(../css_imgs/sliderContainerV.png) no-repeat;
	width: 12px; height: 450px; 
}



.jspDrag
{
	width: 10px; height: 40px; position: absolute; left: 1px; background: #434343;
	position: relative;
	top: 0;
	left: 1px;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
	display: none
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
	display: none
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

.jspHorizontalBar .jspCap
{
	width: 188px;
	height: 100%;
	display: block;
}


/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}

#album .jspContainer { overflow: visible !important; width: 100%; height: 433px !important}
#album .jspTrack { background: url(../css_imgs/sliderContainer.png) left no-repeat; width: 510px !important; height: 12px !important; top: 1px; float: left }
#album .jspHorizontalBar { width: 510px !important; height: 12px !important;}