html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: Helvetica; 
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.1;
	width:800px;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

b {
font-weight:bold;
}

i {
font-style:italic;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {margin: 0; padding: 0; position:relative;}

body { 
  margin: 0; /* pour éviter les marges */ 
  text-align: left;
  behavior: url("csshover3.htc");
  margin: auto;
  color:#5c5b5c;
}

a {color:#5c5b5c; text-decoration: none; position:relative;}
a:hover {color:#5c5b5c; text-decoration:underline; position:relative;}

hr {color: #D6E7F2; background-color: #D6E7F2; height: 1px; width: 700px; border: 0;} /* Couleur de fond X2 */

input[type=text]{border: solid 1px #CCCCCC;}
input[type=password]{border: solid 1px #CCCCCC;}
textarea{border: solid 1px #CCCCCC;}







.top {
background-color:#b9b7b8;
border-left: 1px solid #a7a9ac;
border-right: 1px solid #a7a9ac;
border-bottom: 1px solid #a7a9ac;
padding-top:12px;
padding-bottom:12px;
padding-left:20px;
padding-rigt:20px;
margin-bottom:20px;
height:200px;
width:800px;
}


.sylvainpic {
left:20px;
top:12px;
position:absolute;
}


.sylvainname {
font-size:24px;
left:194px;
top:30px;
position:absolute;
letter-spacing:3px;
text-shadow: 1px 1px 0 #c8c8c8;
}

.sylvainname span {
color:#fe3d3d;
}

.sylvaindescription {
font-size:14px;
left:194px;
top:80px;
position:absolute;
}

.badge {
right:20px;
top:12px;
position:absolute;
}


.contactbox {
height: 56px;
width:400px;
background-color:#c8c8c8;
border: 1px solid #a7a9ac;
right:20px;
bottom:12px;
position:absolute;
}

.contacttext {
font-size:36px;
color:#FFFFFF;
left:12px;
top:9px;
position:absolute;
text-shadow: 1px 1px 0 #989898;
}

.contactmail {
font-size:18px;
color:#5c5b5c;
right:12px;
bottom:12px;
position:absolute;
}


.mailicon {
z-index:0;
right:210px;
bottom:30px;
position:absolute;
}

.bio {
background-color:#f1f2f2;
border: 1px solid #a7a9ac;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-rigt:20px;
margin-bottom:20px;
width:800px;
}

.bio p {
font-size:14px;
line-height: 1.5;
}

.portfolio {
margin-bottom:6px;
}

.portfolio p {
font-size:24px;
left:40px;
top:4px;
position:absolute;
}

.website {
background-color:#f1f2f2;
border: 1px solid #a7a9ac;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-rigt:20px;
margin-bottom:20px;
width:800px;
}

.screenshot {
text-align:right;
margin-right:20px;
}

.websitetitle {
width:460px;
font-size:24px;
left:20px;
top:20px;
position:absolute;
z-index:1;
}

.websitetitle span {
font-size:14px;
line-height: 1.6;
}