/*
  HTML5 ✰ Boilerplate based stylesheet
*/

/*** RESET ***/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/*** FONTS ***/
body { font:13px/1.231 sans-serif; *font-size:small; } /* YUI fonts */
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/*** BASE STYLE ***/
body, select, input, textarea {
  color: #444;
  font-family: Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

textarea { overflow: auto; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
button, input, select, textarea { margin: 0; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
button {  width: auto; overflow: visible; }

/*** HELPERS ***/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*** ACTUAL STYLE OF THE SITE -- LET'S GO! ***/
body{
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), color-stop(0.07, #fff), color-stop(0.93, #fff), to(#ddd)); /* for webkit browsers */
  background: -moz-linear-gradient(top, #ddd,#fff 7%, #fff 93%, #ccc);
  line-height: 1.35em;
}
header{
  height: 80px;
  background-color: #333;
  color: #fff;
  border-bottom: 1px #fff solid;
  padding: 6px 50px;
}
header h1 { background: url('/img/logo.png') top left no-repeat;width: 200px; height: 76px;text-indent: -99em}
header h1 a{ display:block;width: 100%; height: 100%;}
header ul{ list-style-type:none; position: absolute; top: 15px ;right: 50px; width: 230px;}
header ul li{ display: block; float: left; width: 48px; height: 48px;margin-right: 28px; margin-top: 3px;}
header ul li a{ display: block; width: 100%; height: 100%; margin-top: 3px;}
header .facebook{ background: transparent url('/img/facebook.png') top center no-repeat;}
header .twitter{ background: transparent url('/img/twitter.png') top center no-repeat;}
header .linkedin{ background: transparent url('/img/linkedin.png') top center no-repeat;}
header em{ display: block; position: absolute;font-size:14px; font-style:normal; font-weight: bold;top:54px;}
#main{
  width: 960px;
  margin: 2em auto;
  position: relative;
}
#letter{
  width: 560px;
  padding: 2em 20px;
}
#letter h1{
  border-bottom: 2px #999 solid;
  padding: 0.5em;
  font-size: 24px;
  line-height: 1.2em;
  font-family: Georgia, serif;
  font-style: italic;
  text-align: center;
}
#letter h2{
  font-weight: normal;
  font-style: italic;
  text-align: center;
  margin: 1em 0 3em 0;
  font-family: Georgia, serif;
}
#letter p{
  text-indent: 2em;
  text-align: justify;
  margin-bottom: 2em;
}
#letter p.signature{ text-indent:0; padding-left: 2em; margin-top: 2em; font-style: italic;}
#letter table{
  margin: 50px auto;
  border: 1px #999 solid;
}
#letter td{ padding: 0.3em 0.5em; border: 1px #ccc dotted}
aside{
  width: 280px;
  padding: 50px 20px 50px 60px;
  position: absolute;
  top: 0;
  right: 20px;
}
#back a{
  display: block;
  width: 192px;
  height: 47px;
  margin: 20px auto;
  background: url('/img/button-sprite.png') top left no-repeat;
}
#back a:hover{ background-position: 0 -47px; }
#back a:active{ background-position: 0 -94px; }

#backing { padding-top: 0.5em;}
#backing h1{position:relative; text-align: center;margin-bottom: 1.5em; border: 1px #999 solid; padding: .5em;}
#backing h1 a{ display: block; width: 100%; height: 100%; text-decoration:none; color: #444;}
#backing h1 em{ display: block; padding: 15px; font-style: normal; font-size: 48px;}
#backing ul{margin-left:0; list-style-type: none;}
#backing li{ border-bottom: 1px #999 solid; padding-bottom: 0.5em; margin-bottom: 0.5em;}
#backing .nom{ font-weight: bold; text-transform: uppercase}
#backing .prenom{ font-weight: bold}
#backing .promo:before{ content: '-- '; }
#backing .job{ display: block; font-style: italic; text-align: right;}

footer{
  height: 18px;
  background-color: #333;
  color: #fff;
  border-top: 2px #fff solid;
  padding: 6px;
  text-align: center;
  font-style: italic;
  font-family: Georgia, serif;
}

/*** FORMS STYLING ***/
/* Thanks to Blueprint CSS */
form        { width: 330px; margin: 24px auto;}
label       { font-weight: bold; display:block; margin-top: 1em;}
input       { display:block; }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset{ padding-top:1.4em; }
legend{ margin-top:0; margin-bottom:0; }

input[type=text], input[type=password],
input.text, input.title,
textarea {
  background-color:#fff;
  border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text, input.title { width: 300px; padding:5px; }

.error,.alert,.success { padding-left: 10px!important; margin-bottom: 1em; border: 2px solid #ddd; width: 298px}
.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a{ color: #8a1f11; }

#submit{display: block; width: 300px; height: 30px; margin-top: 1.7em; margin-left: 5px;}

/*** PRINT STYLE ***/
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}