/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


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

body{font-size:0.625em;line-height:1.4;font-family:"helvetica_neuelight";  /* 16x.0,625=10px ;1em = 10px*/}
html{ background: url(../img/bck2.png) repeat center  }
p, pre {margin: 0.5em 0}
p{ font-size:1.4em; color:#5b5a5a}
.fLeft{ float:left; }
.fRight{ float:right }
.marg1{ margin:0 0 10px 22px ; height: 150px;overflow: auto;}

/* blocs */
.bloc1, .popin{ background-color: #e7e7e7; border:4px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 861px; height:510px; margin:0 auto  }
.bloc4{ border:3px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

::-webkit-input-placeholder, :-moz-placeholder {color: #0a81dd;}
*{ outline:none; }

/* listes */
li{ list-style: none }
a{ text-decoration: none}
.list3 li{ border-bottom:1px solid #c5c4c4; width:100%; margin:0 0 12px 0 }/*login*/
.list1 li{ border-bottom:1px solid #c5c4c4; width:48%; margin:0 15px 12px 0; float:left;  }
.list2{ width: 860px }
.list2 li{ position:relative; overflow:hidden; }
.list2 li a, .wC a{ display:block; width:100%; height: 100% }
.list2 .hover, .wC .hover{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.list2 .hover2, .wC .hover2{ position:absolute; left:0; bottom:0; width:212px; height:80px; margin:0; padding:15px 30px 0 30px; background-color:rgba(0,0,0,.5); opacity:0; }
.list2 .hover2 p, .wC .hover2 p{ margin:0 }
.list2 .box1, .wC .box1{ width:100%; height:125px; text-align:center;}
.list2 .play, .wC .play{ display:inline-block; width:82px; height:82px; margin-top:31px; background:transparent url(../img/sprite.png) no-repeat -191px -2px  }
.list2 .highlight, .wC .highlight{ width:266px; height:214px; border:3px solid #0a81dd; position:absolute; left:0; top:0; display:none; }
.list2 .selected .highlight{ display:block }

/* header */
.header .content{ width:780px; margin: 0 auto }
.wrapper > .header{ background-color: #fff; height: 100px; margin: 0 0 50px 0; }
.logo{ display:inline-block; padding-top:30px; float:left }

/* input */
.placeholder { color: #0a81dd }
label.error{ display:none !important }
textarea{ resize:none } 
.input, .textArea1, .textArea2 { font-size:1.6em; border:0 none; background-color: transparent; color:#0a81dd }
.textArea1, .textArea2 { width: 100%; height: 98px }
.textArea2{ height: 30px }
#nom, #prenom {width:100%;}
/* login */
.login .bloc1{ width:570px; height: 345px  }
.login .bloc1 .content{ width: 261px; margin:50px auto; text-align: center; }
.login .bloc1{ width: 572px; height: 350px }
.login .bckWhite{ margin:0 0 15px 0; height: 38px; }
.login .bckWhite .txt1 { float:right }
.login .bt1{ margin: 53px 0 0 }
.login .list1 input{ width:100% }
.login .list3 input[type="text"] { width:260px  }

/* textes*/
.txt1{ font-size:1.8em; color:#737373 }
.txt2{ color:#5a5a5b; font-size:1.6em }
.txt3{ font-size:1.8em; line-height:1.2; color:#fff }
.txt4{ font-size:1.4em; line-height:1.2; color:#5b5a5a }
.txt5{ font-size:1.4em; line-height:1.2; color:#4c4c4c;  }
.txt6{ color:#00a0e2; font-family: Arial; font-weight:bold }
.txt7{ color:#4c4c4c; font-family: Arial; }

.txtC{ text-align:center }
.txtL{ text-align:left }
.txtR{ text-align:right }

/* buttoms */
.bt1{ border:0; font-family:"helvetica_neuelight"; font-weight: normal; background-color: #999; font-size: 2.4em; color:#fff; padding:8px 20px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
a.bt1{ margin-right: 15px; }
.btClose{ display:block; width:10px; height:10px; background:transparent url(../img/sprite.png) no-repeat 0px -251px }
.bt2 { background-color: #999999; border: 0 none; border-radius: 8px;color: #FFFFFF;font-family: "helvetica_neuelight"; font-size: 1.4em;font-weight: normal; padding: 5px 16px;margin-top: -4px;}
#file {float:left;margin-right:20px;}
/* titres */
.title1{ font-family:"helvetica_neuelight"; font-size:3.4em; color:#000; display:inline; float:left; margin:25px 0 0 25px; font-weight: normal; }
.title3{ font-size:1.6em; color:#5b5a5a !important;  }

/* popin */
.popin{ position:absolute; top:200px; left:50%; z-index:450; padding:0 20px; display:none }
.popin1{ width:220px; height:140px; margin-left:-130px }
.popin1 .inner{ height:140px; line-height:140px }
.popin2{ width:260px; height:160px; margin-left:-150px }
.popin2 .inner{ height:160px; line-height:160px }
.popin .txt{ width:100%; display:inline-block; vertical-align:middle; text-align:center; line-height:1.2; *display:inline; *zoom:1 }
.popin .btClose{ position:absolute; top:7px; right:7px; }

.bckWhite{ background: #fff }

.bloc1 .header{ overflow:hidden; border-bottom:1px solid #a8a8a8; }
.bloc1 .header .bt1{ float:right; font-size:1.4em; margin: 3px 8px 0 0; padding: 5px 10px; }
.breadcrum{ padding:6px 0 6px 35px; float: left; }
.breadcrum li{ float:left; padding:0 2px 0 0; color:#999; font-size:1.4em; font-weight:normal }
.breadcrum li.current{ font-weight:bold; }
.visu{ background: url(../img/sprite.png) no-repeat 0 5px; width:15px; height: 15px; display:inline-block; margin-left:5px }


/* steps */
.step{ display:none; height: 470px; position:relative;  }
.step2 .content{ height: 389px; overflow:auto }
.step2{ display:block }
.step2 .content{ height: 325px }
.step2 .return{ display:none }

.step .list2 li{ float:left; width: 272px; height: 220px; margin:0 0 9px 9px; background-color: #fff }
.wC{ width: 272px; height: 220px; margin:0 auto; position: relative; overflow: hidden; }
.bts{ position:absolute; bottom:0; left:0; width:100%; border-top:1px solid #a8a8a8; text-align:center;  }

.listMails{ margin: 7px 4px 4px 5px; }
.listMails .marg1 .txt{ /*float:right;*/ margin: 0 5px 0 0; position: relative; bottom: -18px; /*bottom:-10px*/ } 
.destMailInput{ display:inline; width:215px; font-size:12px; /*background-color: #bebbbb;*/ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; text-align: center; }
.destMail{margin: 0 3px 3px 0;padding: 3px 7px 3px 9px; float:left; font-size:12px; background-color: #bebbbb; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; text-align: center; } 
.downloadCsv{ color:#fff; font-size:14px; text-decoration: none; background: url(../img/sprite.png) no-repeat -250px -155px #999999; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding:5px 7px 5px 30px }
.importCsv{ color:#fff; font-size:14px; text-decoration: none; background: url(../img/sprite.png) no-repeat -250px -155px #999999; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding:5px 7px 5px 30px;margin-left:20px }

.destMail a.delete{ margin: 0 -7px 0 5px; text-indent:-9999px; float:left; background: url(../img/sprite.png) no-repeat -259px -112px; width: 17px; height: 17px; }
.destMail span{ float:left; color:#fff;font-size:14px  } 
input.error,textarea.error{ border:1px solid red;border-radius: 8px; }
.content2{ padding: 5px 20px 0 37px; }
.step .bts{ height: 25px; }
.step2 .bts{ height: auto }
.step3 .bts, .step4 .bts, .step5 .bts, .step6 .bts { bottom:25px; padding-top: 28px }

.step3 label.txt4{ display:block; margin:0 0 9px 10px }

.step{ display:none }
.step2{ display:block }

.z1, .z2, .z3{ position:relative }

.step4 .left{ width:300px; float:left; padding-top: 116px; margin-left: 30px; }
.step4 .left p{ width:200px; margin:0; color:#999; text-align:left; font-size:15px }
.step4 .right{ margin:38px 15px 0 0; border:1px solid #999999; width: 819px; height: 300px; float:right; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 6px; }
.step4 .right > div > div{ position:relative; padding-bottom:30px }
.step4 .numTextArea{ position:absolute; right:0; bottom:0 }

.step5 .header1{ margin: 10px 35px 60px 38px }
.step5 .header1 .fRight{ color:#0A81DD }

.step6 .content{ margin:20px }
.step6 .bts{ padding-top: 30px }
.step6 .title3{ margin-bottom:50px }
.step6 p{ color:#787777 }

.globalVideoWrapper.popinPrev{ display:none; background: url(../img/bck_previsu.png) no-repeat 0 0; width: 960px; height: 540px; top:0; left:0; margin:0  }
.popinPrev .content{ margin: 203px 179px 0 }
#globalVideoWrapper.preview{ display:block !important } 

.step{ display:none }
.step4{ display:block }

/* selects */
.customSelectWrapper{ position:relative; }
.customSelectWrapper.bckWhite{ height: 38px; }
.customSelectWrapper .legend{ position:absolute; z-index:5; top:0; left:0; display:inline-block; background: transparent url(../img/sprite.png) no-repeat 100% -201px; margin:8px 0 0 15px; padding-right:15px; color:#0a81dd }
.customSelectWrapper .dk_container{ position:relative; z-index:10 }
.cardSelector{ padding:9px; }
.dkSelect2 .dk_toggle{ width:392px !important }

.overlay{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:400; background: rgba(0, 0, 0, .7); display:none; }
.globalVideoWrapper{ position:absolute; top:178px; left:50%; z-index:500; width:960px; margin-left:-480px; display:none }
.globalVideoWrapper .btClose{ position:absolute; top:-12px; right:0; }

/**
 * Default DropKick theme
 *
 * Feel free to edit the default theme
 * or even add your own.
 *
 * See the readme for themeing help
 *
 */
.dk_container{background-color:transparent;font-family:"helvetica_neuelight",'Helvetica',Arial,sans-serif;font-size:16px;/*font-weight:bold*/;margin-bottom:18px;/*border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;*/}
 .dk_container:focus{outline:0;}
 .dk_container a{cursor:pointer;text-decoration:none; text-align:right;}

.dk_toggle{width:236px !important; color:#5a5a5a;padding:8px 15px 8px 10px;background:transparent url(../img/spacer.gif) repeat 0 0;/*text-shadow:#fff 1px 1px 0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;*//*-webkit-transition:border-color .5s;-moz-transition:border-color .5s;-o-transition:border-color .5s;transition:border-color .5s;*/position:relative;}
 .dk_toggle:hover{/*border-color:#8c8c8c;*/}
 /*.dk_toggle:after{position:absolute;top:45%;right:10px;content:'';border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #4B4B4B;}*/

/* Applied when the dropdown is focused */
.dk_focus .dk_toggle{/*border-color:#40b5e2;box-shadow:0 0 5px #40b5e2;-moz-box-shadow:0 0 5px #40b5e2;-webkit-box-shadow:0 0 5px #40b5e2;*/}

/* Applied whenever the dropdown is open */
.dk_open{/*box-shadow:0 0 5px #40b5e2;-moz-box-shadow:0 0 5px #40b5e2;-webkit-box-shadow:0 0 5px #40b5e2;*/ /**
 * Help:Dropdown menu is covered by something
 * Try setting this value higher
 */
 z-index:10;}
 .dk_open .dk_toggle{/*background-color:#fff;border-color:#c5c4c4;*/border-bottom:1px solid #c5c4c4;color:#5a5a5a;/*box-shadow:inset 0 -2px 5px #ccc;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;*/}

/* The outer container of the options */
.dk_options{background:#fefefe;/* Removes transparent background on iOS5+ scroll */
top:40px !important;
 /*box-shadow:rgba(0,0,0,0.2) 0 2px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0 2px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0 2px 8px;border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;*/}
 .dk_options a{background-color:#fff;border-bottom:1px solid #c5c4c4;/*font-weight:bold;*/padding:8px 15px;}
 .dk_options a:hover,
 .dk_options .dk_option_current a{/*background-color:#0084c7;border-bottom-color:#004c72;*/color:#0a81dd;text-decoration:none;/*text-shadow:rgba(0,0,0,0.5) 0 1px 0;*/}
 .dk_options li:last-child a{border-bottom:none;}
 .dk_options .disabled{cursor:default;}
 .dk_options .disabled a{color:#5a5a5a;}
 .dk_options .disabled:hover,.dk_options .disabled:hover a{cursor:default;/*background-color:#fff;border-bottom-color:#999;text-shadow:none;*/}

/* Inner container for options,this is what makes the scrollbar possible. */
.dk_options_inner{max-height:320px;/*border:1px solid #8c8c8e;border-bottom-width:2px;border-bottom-color:#999;*/color:#5a5a5a;/*text-shadow:#fff 0 1px 0;border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;*/}

/****** End Theme ******/
/***** Critical to the continued enjoyment of working dropdowns ******/
.dk_container{display:none;float:left;}
 .dk_container a{outline:0;}

.dk_toggle{display:-moz-inline-stack;display:inline-block;*display:inline;position:relative;zoom:1;}

.dk_open{position:relative;}
 .dk_open .dk_options{display:block;}
 .dk_open .dk_label{color:inherit;}

.dk_options{display:none;margin-top:-1px;position:absolute;right:0;width:100%;}
 .dk_options a,.dk_options a:link,.dk_options a:visited{display:block;}

.dk_options_inner{overflow:auto;position:relative;-webkit-overflow-scrolling:touch;}

/* Hides only dropkick <select> instances */
.dk_container select{position:absolute;top:-99999em;visibility:hidden;}

/* nativeMobile override */ 
.dk_mobile{position:relative;}
 .dk_mobile select{display:block;width:100%;height:100%;top:0;left:0;visibility:visible;opacity:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;}
/***** End Critical to the continued enjoyment of working dropdowns ******/

/* 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;width:16px;height:100%;}
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:16px;}
.jspCap{display:none;}
.jspHorizontalBar .jspCap{float:left;}
.jspTrack{background:transparent;position:relative;}
.jspDrag{background:#c5c0c0;position:relative;top:0;left:0;cursor:pointer;-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{float:left;height:100%;}
.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;padding:0;margin:0;}
.jspArrow.jspDisabled{cursor:default;background:#80808d;}
.jspVerticalBar .jspArrow{height:16px;}

.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%;}
.jspVerticalBar .jspArrow:focus{outline:none;}
.jspCorner{background:#eeeef4;float:left;height:100%;}

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


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-device-width: 767px) {
	/*.globalVideoWrapper{ top: 0; left: 0; width:100%; margin-left: 0; }
    .globalVideoWrapper.popinPrev{ width: 640px; height: 320px }*/
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}