@font-face 
{
    font-family: 'frutiger_lt_std65_bold';
    src: url('font/frutigerltstd-bold-webfont.eot');
    src: url('font/frutigerltstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/frutigerltstd-bold-webfont.woff') format('woff'),
         url('font/frutigerltstd-bold-webfont.ttf') format('truetype'),
         url('font/frutigerltstd-bold-webfont.svg#frutiger_lt_std65_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'frutiger_lt_std55_roman';
    src: url('font/frutigerltstd-roman-webfont.eot');
    src: url('font/frutigerltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/frutigerltstd-roman-webfont.woff') format('woff'),
         url('font/frutigerltstd-roman-webfont.ttf') format('truetype'),
         url('font/frutigerltstd-roman-webfont.svg#frutiger_lt_std55_roman') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'frutiger_lt_std56_italic';
    src: url('font/frutigerltstd-italic-webfont.eot');
    src: url('font/frutigerltstd-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/frutigerltstd-italic-webfont.woff') format('woff'),
         url('font/frutigerltstd-italic-webfont.ttf') format('truetype'),
         url('font/frutigerltstd-italic-webfont.svg#frutiger_lt_std56_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    @font-face 
	{
        font-family: 'frutiger_lt_std65_bold';
        src: url('font/frutigerltstd-bold-webfont.svg#frutiger_lt_std65_bold') format('svg');
    }
	 @font-face 
	 {
	    font-family: 'frutiger_lt_std55_roman';
	    src: url('font/frutigerltstd-roman-webfont.svg#frutiger_lt_std55_roman') format('svg');	
	}
	 @font-face 
	 {
	    font-family: 'frutiger_lt_std56_italic';
	    src: url('font/frutigerltstd-italic-webfont.svg#frutiger_lt_std56_italic') format('svg');
	}
}

/*
 * Generic
 */

html, body{ height: 100% }
	body{ font-family: 'frutiger_lt_std55_roman'; margin: 0; background:#000; font-size:10px }
	
.table{ display: table; width: 100%; height: 100% }
	.table .td{ display: table-cell; width: 100%; height: 100%; vertical-align: middle }

ul{ padding: 0; margin: 0; list-style: none }
/*body *{ opacity: 0.9 }*/


/*
 * Intro
 */

article#intro { background: url('../image/mobile/intro0.jpg') no-repeat center #000; background-size: cover; position: absolute; top: 0; left: 0; right:0; bottom: 0; text-align: center; color: #fff; text-transform: uppercase; font-size: 255%; padding: 0 4%; z-index:100000; }
	article#intro .table { opacity:0.01 } 
	article#intro img{ vertical-align: middle; width: 50%  }	
	article#intro  b{ background: rgba(0,0,0,0.7); text-transform: lowercase; padding: 2px 8px; padding-top: 6px; font-size: 85%; display: inline-block; margin-top: 5px }	


/*
 * Header
 */

header{ background: url('../image/mobile/background.header.png') repeat-x center; background-size: auto 100%; left:0; right:0; height:50px; position:absolute; width:100%; z-index:2000;}
	header table{ width: 100%; height:100%; }
	header .logo{ width: 65%;padding-left:10px; }
		header .logo img{ display: block; width: 100%; height: auto; }
	header .buttons{ text-align: right; padding-right:5px;  }
		header .buttons a{ display: inline-block; height: 80%  }
			header .buttons a img{ display: inline-block; height: 100% }
			header .buttons a.search img{ background: url('../image/mobile/button.search.png') no-repeat center bottom; background-size: 100% auto; height: 40px; width: 40px }
			header .buttons a.search.active img{ background-position: center top }
			header .buttons a.plus img{ background: url('../image/mobile/button.plus.png') no-repeat center bottom; background-size: 100% auto; height: 40px; width: 40px }
			header .buttons a.plus.active img{ background-position: center top }

/*
 * Search
 */

#searchbox { background: url('../image/mobile/background.header.png') repeat-x center; background-size: auto 100%; height:90px; position:absolute; top:-40px;z-index:1000; width:100%; position:relative; }
   #searchbox table { width:100%; height:100%; }
   #searchbox table td { text-align:center; }
   #searchbox input.search { background:url(../image/search.png) no-repeat 5px 50%; background-color:#aaa; border-radius:5px; border:0px; width:180px; height:18px; padding-left:40px; font-size:14px; color:#000; font-family: frutiger_lt_std65_bold; vertical-align: top; margin-top:3px; padding-top:8px; }
   #searchbox input.search:focus { outline: none; background-color: #fff }
   ::-webkit-input-placeholder { color:#000; }
   #searchbox .result { position:absolute; top:0; left:0; width:100%; color:white; top:70px; text-align:left; padding-left: 30px; display:none; }
   #searchbox .result img{ vertical-align: middle }
   #searchbox .noresult { position:absolute; top:0; left:0; width:100%; color:white; top:70px; text-align:left; padding-left: 20px; display:none; 
}

/* CarouselMedias */

.template { display:none; }

#carouselMedias { position:absolute; top:50px; bottom:50px; overflow:hidden; width:100%; left:0; right:0; }
.iphone4 #carouselMedias { top:45px; bottom:45px; }

#carouselMedias .scroller { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0); width: 2400px; top:0; bottom:0; }
#carouselMedias ul { list-style: none; width: 100%; padding: 0;margin: 0; }

#carouselMedias .media { float:left;  width: 100px; overflow: hidden; text-align:center; opacity: 0.6; -webkit-transition-property: opacity; -webkit-transition-duration: 2s; -moz-transition-property: opacity; -moz-transition-duration: 2s; transition-property: opacity; transition-duration: 2s; position:relative; }
#carouselMedias .media .content { display:inline-block; position:relative; }
#carouselMedias .media .preview { display:inline-block; }
#carouselMedias .media.current { opacity:1; }
#carouselMedias .media .meta-bottom { left:0; right:0; bottom:15px; height:35px; position: absolute; z-index: 1002; text-align:center;  }
#carouselMedias .media.current .meta-bottom { display:block; }
#carouselMedias .media .meta-bottom .sharing { display:inline-block; color:white; position: relative; padding-left: 35px; 1position:relative; top:-10px; font-size:100%; }
#carouselMedias .media .meta-bottom .sharing span { background:url(../image/share.png) no-repeat 0px 50%; position:absolute; left:10px; top:8px; width:18px; height:10px; }

#carouselMedias .media .meta { left:0; right:0; top:0px; height:30px; background-color:#000; background-color:rgba(0, 0, 0, 0.7); padding:8px; position: absolute; z-index: 1002; opacity:0; }
#carouselMedias .media.current .meta { opacity:1; -webkit-transition-property: opacity; -webkit-transition-duration: 2s; -moz-transition-property: opacity; -moz-transition-duration: 2s; transition-property: opacity; transition-duration: 2s; }
  #carouselMedias .media .meta .picture { height:30px; float:left; margin-right:10px; margin-left:2px; }
  #carouselMedias .media .meta .full-name { color:#b4b4bc; font-size:11px; font-weight:bold; margin-left:4px; margin-top:3px; text-align:left; }
  #carouselMedias .media .meta .legend { color:#b4b4bc; font-size:10px; text-align:left; margin-left:40px; position:static; margin-top:3px; }
  	#carouselMedias .media .meta .legend .location { background:url(../image/location.png) no-repeat; padding-left:15px; padding-right:5px; padding-bottom:5px; padding-top:3px; }
  	#carouselMedias .media .meta .legend .date { background:url(../image/time.png) 0px 1px no-repeat; padding-left:20px; padding-bottom:5px; padding-top:3px;  }


/* UserMedias */

#userMedias { position: absolute; top: 0px; bottom: 0px; z-index: 3000; width:100%; display:none; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 1); text-align:center; }
#userMedias .wrapper .close { margin-right: 20px; z-index: 2000; position:relative; float:right; background:url(../image/close.png) 100% 0px no-repeat; font-family:frutiger_lt_std65_bold; font-weight:normal; color:white; text-decoration:none; text-transform:uppercase; font-size:11px; padding-right:20px; margin-top:30px; cursor: pointer;  }
#userMedias .wrapper .media { left:0; width:100%; top:0; position:absolute; bottom:0; z-index: 1; display: none }
#userMedias .wrapper .media img { width:100%; top:50%; display: block; height: auto }
#userMedias .wrapper video { left:0; width:100%; height:80%; margin-top:45px; position:absolute; z-index: 1; }

/*
 * How to
 */

.howto{ text-align: center; position: absolute; bottom: 0; left: 0; right: 0; background-color: #181818; height:50px }
.iphone4 .howto{ height:45px; }
    .howto table { height:100%; width:100%; }
	.howto .button{ padding-left: 13px; font-size: 110%; padding-left:50px; padding-top:9px; position:relative; box-shadow:0px 0px 10px #461d0b; } 
	.howto .button span{ position:absolute; background: url('../image/mobile/picto.sharephoto.png') no-repeat; background-size:auto 100%; width: 43px; height: 17px; top:5px; left:6px; }


/*
 * Plus
 */

 #plus{ background: url('../image/mobile/background.variations.jpg') no-repeat center #000; background-size: 100% auto; position: absolute; top: 50px; bottom: 0; width: 100%; z-index: 10; display: none }
	#plus table{ padding-top: 10px; padding-bottom: 20px; font-size: 80%; width: 100%; background: url('../image/mobile/background.buttons.png') no-repeat center; background-size: 100% 100% }
	#plus table td{ padding: 0 10px; text-transform: uppercase; font-family: 'frutiger_lt_std55_roman';  color: #fff; text-align: center; text-align: center;
border-left: 1px solid #303030; }
	#plus table td:first-child{ border-left: 0 }
	#plus table img{ display: inline-block; width: 30%; height: auto; margin-bottom: 5px }

	#plus div{ font-size: 140%; font-family: 'frutiger_lt_std55_roman'; color: #fff; text-align: center; position: absolute; bottom: 20px; width:100%; }
	#plus div strong{ font-family: 'frutiger_lt_std65_bold';  }
	#plus div i{ font-family: 'frutiger_lt_std56_italic';  }
	#plus .button{ padding: 5px 30px; box-shadow: 0px 0px 10px #461d0b; margin-top: 10px; }


	#language{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0,0,0,0.9); display: none; color:#fff }
		#language .wrapper{ display: table; height: 100%; width: 100% }
		#language .text{ text-align: center; display: table-cell; height: 100%; width: 100%; vertical-align: middle }
		#language select { width: 50%; padding: 2%;font-size:130%; background:url('../image/mobile/background.select.png') no-repeat top center; background-size:100% 100%; -webkit-appearance:none; margin: auto; margin-bottom: 10px }
			#language select::-ms-expand { display: none; }
		#language p { font-size: 110%; width: 60%; text-align: center; margin: auto; margin-bottom: 5% }
		#language .close { background: url( '../image/mobile/picto.close.png' ) no-repeat center; width: 6%; height: 6%; right: 10px; top: 10px; position: absolute; background-size: contain }


/*
 * How to
 */

 #howto{ background:#000; position: absolute; top: 50px; bottom: 0; left: 0; right:0; z-index: 10; display: none; color: #fff; text-align: center }
 	#howto .instructions { padding-top:30px;  }
 	#howto h2{ padding: 0 20px }
 	#howto h2 span{ font-family: 'frutiger_lt_std65_bold'; background:#fff; color: #000; padding-top: 2px; padding-left: 5px; padding-right: 5px; }
 	#howto h2 img{ width: 30%; vertical-align: middle; }
 	#howto h3{ text-align: left; padding: 0 20px }
 		#howto h3 b, #howto h3 strong{ font-family: 'frutiger_lt_std65_bold' }
 		#howto h3 span{ font-family: 'arial' }
 	#howto .td > p{ padding: 0 20px }

 		#howto .close{ background: url( '../image/mobile/picto.close.png' ) no-repeat center; right: 10px; top: 10px; position: absolute; background-size: 50%; padding: 20px }

 		#howto .wrapper{ overflow: auto; width:100%; position: relative;  -webkit-overflow-scrolling:touch; height: 180px; }
 		#howto .wrapper .scroller{ width:200%; position: absolute; }
 		#howto ul{ }
 		#howto li{ padding: 0 2%; width: 25%; vertical-align: top; display: inline-block  }
 		#howto li > img{ width: 60% }
 		#howto li p img{ width: 30%; vertical-align: middle; }
 		#howto li b{ font-family: 'frutiger_lt_std65_bold' }
 		#howto li i { font-family: 'frutiger_lt_std56_italic'; }


/* Section button */

.button { position: relative; background: #777777; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzMzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: #303032; /* Old browsers */
background: -moz-linear-gradient(top,  #303032 0%, #101011 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303032), color-stop(100%,#101011)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #303032 0%,#101011 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #303032 0%,#101011 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #303032 0%,#101011 100%); /* IE10+ */
background: linear-gradient(to bottom,  #303032 0%,#101011 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303032', endColorstr='#101011',GradientType=0 ); /* IE6-9 */
border:1px solid #161413; border-radius:5px; display: inline-block; padding: 14px; color:#fff; margin-left:5px; font-size:12px; cursor: pointer; text-decoration:none; font-family:frutiger_lt_std65_bold; padding-top: 8px; padding-bottom: 6px }

@media screen and (orientation:landscape) and (min-width: 400px)
{ 
	body{ background: url('../image/mobile/background.rotate.png') no-repeat center #000; background-size: 50% }
	body *{ visibility: hidden; }
}


html[dir=rtl] header .buttons{ text-align: left }
html[dir=rtl] header .logo{ padding-right:10px; padding-left: 0 }

html[dir=rtl] #carouselMedias .media .meta .picture{ float: right; margin-right: 2px; margin-left: 10px;}
html[dir=rtl] #carouselMedias .media .meta .full-name{ text-align: right }
html[dir=rtl] #carouselMedias .media .meta .legend{ text-align: right }
html[dir=rtl] #carouselMedias .media .meta .legend .location { background-position: right top; padding-left: 5px; padding-right: 10px; margin-right: 10px; }
html[dir=rtl] #carouselMedias .media .meta .legend .date { background-position: right top; padding-left: 0; padding-right:20px }
html[dir=rtl] #carouselMedias .media .meta-bottom .sharing{ padding-right: 35px; padding-left: 15px }
html[dir=rtl] #carouselMedias .media .meta-bottom .sharing span{ left: auto; right: 10px; background: url(../image/share_rtl.png) no-repeat 0px 50% }
html[dir=rtl] .howto .button{ padding-right: 55px; padding-left: 13px }
html[dir=rtl] .howto .button span{ right: 6px; left: auto; background: url('../image/photo_rtl.png') no-repeat }
html[dir=rtl] #plus table td{ border-left: 0; border-right:1px solid #303030  }
html[dir=rtl] #plus table td:first-child{ border-right:0 }
html[dir=rtl] #language select{ background:url('../image/mobile/rtl.background.select.png') no-repeat top center; background-size: 100% 100%; }
html[dir=rtl] #language .close{ left: 10px; right: auto }
html[dir=rtl] #searchbox input.search{ background-position: 99% 50%; padding-right: 40px; padding-left: 0 }
html[dir=rtl] #userMedias .wrapper .close{ margin-right: 0; margin-left: 20px; background-position: left center; padding-left: 20px; padding-right: 0; float: left }
html[dir=rtl] #howto h3{ text-align: right }