/* !group reset css */

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* @end */

/* !group layout */

body {  
    background: #fff url(../images/background.gif) repeat-x;
    font: 62.5%/1.5 Helvetica, Verdana, Arial,sans-serif;
    -webkit-text-size-adjust: none;
    text-align: center;
    color: #333;
}

#wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
}

/* @end */

/* !group typography */

a {
    text-decoration: none;
    color: #58CBDB;
}

a:hover {
    color: #DB429D;
}

h1 { 
    font-size: 1.3em;
    font-weight: normal; 
    line-height: 1;
}
h2 { 
    margin: 5px 0;
    font-size: 3em; 
    line-height: 1; 
    color: #6A7476;
    letter-spacing: -0.1em;
}
h3 { 
    font-size: 1.6em; 
    line-height: 1.25; 
    font-weight: normal;
    text-align: justify;
    margin-bottom: 0.5em; 
    color: #A3B3B5;
}
h4 { 
    font-size: 1.4em; 
    line-height: 1.25; 
}
h5 { 
    font-size: 1.2em; 
}

p { 
    font-size: 1.2em; 
    text-align: justify;
    margin-bottom: 10px;
}

strong {
    color: #000;
}

#easyTooltip{
    border: 1px dotted #ccc;
    background: #ffffcc;
    padding: 2px 5px;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    font-size: 1.3em;
    font-style: italic;
    color: #aaa;
}

#smallTooltip{
    border: 1px dotted #58CBDB;
    background: #DDF2F5;
    padding: 2px 4px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #069;
}

/* @end */

/* !group header */


h1 {
    color: #A3B3B5;
    display: block;
    width: 300px;
    height: 40px;
    background: transparent url(../images/logo.png) no-repeat;
    text-indent: -9999px;
}

#nav_language {
    float: right;
    margin-top: 10px;
}

#nav_language li {
    float: left;
    margin-left: 10px;
    font-size: 1.2em;
    color: #6A7476;
}

#nav_language li a {
    color: #A3B3B5;
    font-variant: small-caps;
    font-weight: bold;
}

#nav_language li a:hover {
    color: #58CBDB;
}

/* @end */

/* !group main menu */

#nav_main {
    clear: both;
    float: right;
    margin: 40px 0;
}

#nav_main li {
    float: left;
    margin-left: 10px;
    font-size: 1.7em;
}

/* @end */

/* !group branding */

#branding {
    clear: both;
    overflow: auto;
    height: 440px;
    width: 960px;
}

#illustration {
    float: left;
    display: block;
    width: 355px;
    height: 380px;
    color: #58CBDB;
    background: transparent url(../images/illustration.png) no-repeat;
    text-indent: -9999px;
}

#animation {
    float: right;
    display: block;
    width: 570px;
    height: 380px;
    font-size: 2em;
    text-indent: -9999px;
}

body.en #animation {
    background: transparent url(../images/animation.png) no-repeat;
}

body.fr #animation {
    background: transparent url(../images/animation_fr.png) no-repeat;
}

body.nl #animation {
    background: transparent url(../images/animation_nl.png) no-repeat;
}

/* @end */

/* !group services */

#services {
    clear: both;
    float: left;
    margin-bottom: 60px;
    width: 355px;
}

#services h2 {
    display: block;
    width: 355px;
    height: 50px;
    text-indent: -9999px;
}

body.en #services h2 {
    background: transparent url(../images/services.png) no-repeat;
}

body.fr #services h2 {
    background: transparent url(../images/services_fr.png) no-repeat;
}

body.nl #services h2 {
    background: transparent url(../images/services_nl.png) no-repeat;
}

#nav_services li {
    float: left;
    display: inline;
    margin-left: 15px;
    font-size: 1.7em;
}

#nav_services li a {
    color: #A3B3B5;
    font-weight: bold;
}

#nav_services li a:hover, #nav_services li a.actif {
    color: #6A7476;
}

#services div.tab {
    clear: both;
}

/* @end */

/* !group work */

#work {
    float: right;
    width: 570px;
    margin-bottom: 60px;
}

#work h2 {
    display: block;
    float: right;
    width: 260px;
    height: 80px;
    text-indent: -9999px;
}

body.en #work h2 {
    background: transparent url(../images/work.png) no-repeat;
}

body.fr #work h2 {
    background: transparent url(../images/work_fr.png) no-repeat;
}

body.nl #work h2 {
    background: transparent url(../images/work_nl.png) no-repeat;
}

#work h3 {
    margin-top: 15px;
    width: 290px;
}

#slider {
  clear: both;
  position: relative;
  border: 1px solid #DDF2F5;
}
	
#slider li { 
	width:570px;
	height:400px;
	overflow:hidden; 
}	

#work div.legend {
    width: 570px;
    background-color: #DDF2F5;
}

#work div.legend p {
    margin: 5px;
    color: #6A7476;
}

#work div.legend p.link {
    text-align: right;
}

#work div.legend a {
    color: #DB429D;
    font-weight: bold;
}

#work ol#controls{
    margin:1em 0;
    padding:0;
    height:16px;	
}
#work ol#controls li{
    margin:0 10px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:16px;
    line-height:16px;
    font-size: 11px;
}
#work ol#controls li a{
    float:left;
    height:16px;
    line-height:16px;
    border:1px solid #ccc;
    background:#DDF2F5;
    color:#555;
    padding:0 5px;
    text-decoration:none;
}
#work ol#controls li.current a{
    background:#5DC9E1;
    color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* @end */

/* !group contact */

#contact {
    clear: both;
}

#contact h2 {
    display: block;
    float: left;
    width: 160px;
    height: 230px;
    text-indent: -9999px;
}

body.en #contact h2 {
    background: transparent url(../images/contact.png) no-repeat;
}

body.fr #contact h2 {
    background: transparent url(../images/contact_fr.png) no-repeat;
}

body.nl #contact h2 {
    background: transparent url(../images/contact_nl.png) no-repeat;
}

#address {
    display: block;
    float: left;
    margin: 10px 0 40px 35px;
    width: 365px;
}

#address p {
    font-size: 1.4em;
}

p.vcard-download {
    margin-top: 20px;
}

p.vcard-download a {
    display: block;
    background: transparent url(../images/vcard.png) no-repeat;
    padding-left: 20px;
    font-family: Verdana, Arial,sans-serif;
    font-size: 10px;
    line-height: 16px;
    color: #ccc;
}

#contact_form {
    display: block;
    float: right;
    width: 365px;
    margin-bottom: 40px;
    background: #DDF2F5 url(../images/top.gif) no-repeat;
}

#contact_form p {
    margin: 15px 10px 10px 10px;
    text-align: left;
    clear: both;
}

#contact_form h3 {
    margin: 15px 10px 10px 10px;
    text-align: center;
}

#contact_form ul.errors li {
    margin: 0 10px;
    color: #c00;
    font-weight: bold;
}

#contact_form p.submit, #contact_form h3.submit {
    margin: 0;
    padding: 0 10px 15px 0;
    background: #DDF2F5 url(../images/bottom.gif) no-repeat left bottom;
    text-align: right;
}

label {
    display: block;
    float: left;
    width: 120px;
    color: #A3B3B5;
    font-size: 1.3em;
}

input, textarea {
    border: 0;
    font-size: 1.2em;
    width: 220px;
    color: #666;
}

input:focus, textarea:focus {
    background-color: #ffc;
}

textarea {
    clear: both;
    margin-top: 5px;
    width: 340px;
    font-family: Helvetica, Verdana, Arial,sans-serif;
}

input#submit {
    cursor: pointer;
    width: 120px;
    margin-right: 5px;
    background-color: #58CBDB;
    border: 2px solid #fff;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
}

/* @end */

/* !group footer */

#footer {
    clear: both;
    padding: 50px 10px 10px 10px;
    background: #DDF2F5 url(../images/footer.png) repeat-x;
    color: #A3B3B5;
}

#footer p {
    margin: 0;
}

#footer a {
    color: #A3B3B5;
}

#nav_links {
    float: right;
}

#nav_links li {
    float: left;
    margin-left: 10px;
    font-size: 1em;
}

#nav_links li a {
    display: block;
    color: #666;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-image: url(../images/social.png);
    text-indent: -9999px;
}

#nav_links li a#delicious {
    background-position: 0 0;
}

#nav_links li a#delicious:hover {
    background-position: 0 -24px;
}

#nav_links li a#facebook {
    background-position: -24px 0;
}

#nav_links li a#facebook:hover {
    background-position: -24px -24px;
}

#nav_links li a#twitter {
    background-position: -48px 0;
}

#nav_links li a#twitter:hover {
    background-position: -48px -24px;
}

/* @end */