/**** FEUILLE DE STYLE ALEXIS RAULT By USEWEB ************************************************************************************/

/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'Libel';
    src:  url('http://www.alexisrault.com/fonts/libel-webfont.eot');
    src:  url('http://www.alexisrault.com/fonts/libel-webfont.eot?#iefix') format('embedded-opentype'),
          url('http://www.alexisrault.com/fonts/libel-webfont.woff') format('woff'),
          url('http://www.alexisrault.com/fonts/libel-webfont.ttf') format('truetype'),
          url('http://www.alexisrault.com/fonts/libel-webfont.svg#LibelSuitRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

section, article, header, footer, nav, aside, hgroup  { display:block; }

/**** GENERAL ************************************************************************************/
body, h1, h2, h3, h4, h5, h6, form, ul, li, dl, dd, dt, img, input		    { margin:0; padding:0; }
*                             { font-family:Arial, Helvetica, sans-serif; }
body							            { margin:0; padding:0; font-size:12px; color:#000; width:100%; height:100%; text-align:center; background-color:#fff; }
td								            { font-size:12px; color:#000; }
h1, h2, h3, h4, h5, h6		    { margin:0; padding:0; }
img								            { border:0; }
p								              { margin:10px 0; text-align:justify; }
form							            { margin:0; padding:0; }
input[type=text],
select, textarea				      { font-size:12px; color:#777; vertical-align:middle; border:1px solid #cdcdcd; }
input[type=text]:focus,
select:focus, textarea:focus	{ color:#000; border:1px solid #3fc; }
input[type=submit]            { color:#000; text-decoration:none; font-weight:bold; padding:2px 10px; text-transform:uppercase; background-color:#eee; border:2px solid #fff; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -o-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 2px #aaa; -moz-box-shadow:0 0 2px #aaa; -khtml-box-shadow:0 0 2px #aaa; -o-box-shadow:0 0 2px #aaa; box-shadow:0 0 2px #aaa; }
input[type=submit]:hover			{ color:#fff; text-decoration:none; background-color:#000; }

/* couleurs */
.color							          { color:#3fc; }

/* liens */
a								              { color:#000; text-decoration:underline; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -khtml-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; }
a:hover							          { color:#3fc; text-decoration:underline; }

/* listes */
ul								            { margin:10px 0; padding:0; }
ul li							            { list-style-type:none; margin:0 0 10px 0; padding:0; text-align:justify; }

/* Alignements */
.align_right					        { text-align:right; }
.align_left						        { text-align:left; }
.align_center					        { text-align:center; }
.left							            { float:left; }
.right							          { float:right; }
.clear							          { clear:both; }
.clearleft                    { clear:left !important; }
.clearright                   { clear:right !important; }

.toppage						          { text-align:right; margin-top:20px; }
.toppage a						        { text-decoration:none; font-size:10px; padding:1px 15px; color:#999; background-color:#fff; border:1px solid #ccc; }
.toppage a:hover				      { background-color:#3fc; color:#fff; }

/**** STRUCTURE ************************************************************************************/
#wrap							            { position:absolute; left:50%; top:50%; width:854px; height:560px; margin-top:-280px; margin-left:-427px; }
#wrap h1						          { font:normal 10px Arial, Helvetica, sans-serif; color:#000; text-align:right; }

#inner						            { width:842px; height:500px; padding:4px; overflow:hidden; border:2px solid #000; text-align:left; } /* 850px de large */

/**** HEADER ************************************************************************************/
#header							          { width:210px; height:410px; padding:10px; position:relative; float:left; clear:left; }
#logo a							          { font:normal 120px 'Libel', Arial, Helvetica, sans-serif; line-height:90px; text-transform:uppercase; text-decoration:none; }

/**** MENU ************************************************************************************/
#nav							            { margin-top:60px; }
#nav ul, #nav ul li			      { margin:0; padding:0; }
#nav ul li						        { list-style-type:none; }
#nav ul li a					        { color:#000; font:normal 24px 'Libel', Arial, Helvetica, sans-serif; line-height:18px; text-transform:uppercase; text-decoration:none; }
#nav ul li a:hover,
#nav ul li a.actif				    { color:#3fc; text-decoration:none; }

/**** FOOTER ************************************************************************************/
#footer							          { position:relative; background-color:#000; color:#fff; padding:10px; height:50px; }
#footer section               { float:left; }
#footer section + section     { margin-left:10px; }
#footer section.clearleft     { width:240px; padding-left:30px; background:url(../img/deuxminutestrente.gif) no-repeat 0 50%; }
#footer section.clearleft a   { color:#fff; }
#footer section article       { width:300px; padding-right:50px; background:url(../img/quot.gif) no-repeat 100% 0; }
#footer section article p     { padding:5px 0; margin:0; text-align:left; }
#footer section.clearright    { width:170px; }
#footer section.clearright ul,
#footer section.clearright ul li { margin:0; padding:0; text-align:right; }
#footer section.clearright ul li a { color:#555; text-decoration:none; }
#footer section.clearright ul li a:hover { color:#fff; }

#socialbar ul							    { margin:5px 0 0 0; }
#socialbar ul li					    { list-style-type:none; list-style-image:none; display:inline; }
#socialbar li a						    { float:right; margin-left:1px; width:18px; height:18px; text-indent:-5000px; overflow:hidden; background-image:url(../img/socialbar.png); background-repeat:no-repeat; }
#socialbar .fb a				      { background-position:0 0; }
#socialbar .fb a:hover		    { background-position:0 -18px; }
#socialbar .yt a				      { background-position:-18px 0; }
#socialbar .yt a:hover			  { background-position:-18px -18px; }
#socialbar .sc a				      { background-position:-36px 0; }
#socialbar .sc a:hover		    { background-position:-36px -18px; }

/**** CONTENT ************************************************************************************/
#content						          { float:right; clear:right; width:600px; height:430px; overflow:hidden; position:relative; }
#content-inner-right          { display:block; float:right; overflow:hidden; }
#content-inner-left           { display:block; float:left; overflow:hidden; }
.inc							            { height:410px; padding:10px; }

#content h2						        { font:normal 36px 'Libel', Arial, Helvetica, sans-serif; text-transform:uppercase; }

small, small a					      { font-size:10px; }

.colLeft						          { width:400px; float:left; }
.colRight						          { margin-left:450px; }

/**** ACCUEIL ************************************************************************************/
#home                         { z-index:0; background-color:#000; /*background:#fff url(../img/visuels/alexisrault-home.jpg) no-repeat 100% 0;*/ width:600px; height:430px; }
#home .jspDrag                { background:#3fc; }
#home .jspTrack               { background:#333; }
#home #scroll                 { position:absolute; right:20px; top:60px; width:250px; height:300px; padding-right:10px; overflow:auto; text-align:right; }
#home #scroll p,
#home #scroll a:hover         { text-align:right; color:#fff; }
#home #scroll a               { color:#3fc; }
#home #scroll em              { display:block; font-size:10px; color:#555; font-style:normal; }

/**** A PROPOS ************************************************************************************/
#bio                          { padding-top:90px; background:#fff url(../img/visuels/alexisrault-sidebar.jpg) no-repeat 100% 0; }
#bio #scroll                  { width:260px; height:290px; padding-right:60px; overflow:auto; }
#bio a                        { text-decoration:none; }

/**** FILMO / DISCO ************************************************************************************/
#work .pwi_photo              { margin:0 10px 10px 0; display:none; }
#work .pwi_photo em           { display:block; font-size:16px; font-style:normal; color:#fff; }

#navwork                      {  }
#navwork ul                   { margin:20px 0 30px 0; padding:0; }
#navwork ul li                { margin:0; padding:0; display:inline; }
#navwork ul li a              { padding:10px; font:normal 24px 'Libel', Arial, Helvetica, sans-serif; color:#fff; background-color:#000; text-decoration:none; }
#navwork ul li a:hover,
#navwork ul li a.actif        { color:#000; background-color:#3fc; }

/**** CONTACT ************************************************************************************/
.default                      { padding:95px 0 0 65px; background:#fff url(../img/visuels/texture.jpg) no-repeat 100% 0; }
#contact ul                   { margin:0; }
#contact ul li                { margin:0 0 25px 0; }

/**** STUDIO ************************************************************************************/
#studio                       { background:#000 url(../img/visuels/studio.jpg) no-repeat 100% 0; }
#studio #soundcloud           { position:absolute; top:90px; right:10px; }

/**** POPIN ************************************************************************************/
#popin                        { width:450px; /*height:410px; overflow:auto;*/ padding:10px; text-align:left; }
#popin article                {  }
#popin article header         { padding:10px; background-color:#eee; margin-bottom:10px; }
#popin article header h1      { font:normal 40px 'Libel', Arial, Helvetica, sans-serif; color:#000; text-transform:uppercase; }
#popin article header h2      { font:normal 12px Arial, Helvetica, sans-serif; }

#popin article h1             { font:normal 14px Arial, Helvetica, sans-serif; color:#3fc; margin-bottom:5px; }
#popin article h2,
#popin section h2             { font:normal 24px 'Libel', Arial, Helvetica, sans-serif; }
#popin article img            { float:left; margin:0 20px 10px 0; }
#popin article p              { margin:0 0 10px 0; }
#popin table th               { width:180px; font-weight:normal; }
#popin ul li							    { list-style-type:square; margin:0 0 3px 20px; text-align:left; }
#popin ul li strong				    { font-weight:normal; color:#3fc; display:block; }

#popin section                { margin:30px 0 0 0; clear:both; display:block; }