html {
    height: 100%;
}

body {
    height: 100%;
    background-color: #909090;
    margin: 0;
    font-size: 10pt; 
    font-family: Arial, Helvetica, Verdana; 
    text-align: justify;
}

div.clear {
    clear: both;
}

div.annonce, div.announce { 
    float: right; 
    width: 30%; 
    margin-left: 1em; 
    border-left: 1px solid #d0d0d0; 
    padding: 0 .5em 0 .5em;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    height: 100%;
    background-color: #909090;
}

#header {
    background-color: #000033;
    color: #ffffff;
    font-size: 12pt;
    font-weight: bold;
    padding: 1ex;
    margin-bottom: 2px;
    position: relative;
}

#header #title { 
    position: relative;
    display: inline-block;
    width: 60%;
}

#header #title img {
    float: left;
    margin-right: 5px;
}


#footer {
    background-color: #000033;
    color: #ffffff;
    clear: both;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-top: 2px solid #909090}

#footer a {
    color: #ffffff;
    text-decoration: none;
}

#wrapper {
    background-color: #d0d0d0;
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    left: 22%;
    width: 100%;
}

#wrapper2 {
    background-color: #104060;
    overflow: hidden;
    float: left;
    position: relative;
    width: 100%;
    margin-top: 0;
    padding: 0;
}


#aside_primary {
    float: left;
    padding: 1ex;
    width: 21%;
    position: relative;
    right: 21%;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

#main {
    float: left;
    position: relative;
    right: 22%;
    width: 77%;
}

ul {
    margin-top: 0px;
    text-align: left;
}


ul.menu {
    list-style: none;
    padding: 0;
    margin-left: 1ex;
    text-align: left;
}

ul.menu li {
    margin-left: 1ex;
}

ul.menu li a {
    color: #ffffff;
    text-decoration: none;
}

ul.menu ul.menu li {
    font-weight: normal;
}

body.accueil ul.menu li#accueil:before,
body.welcome ul.menu li#welcome:before,
body.technical-knowledge ul.menu li#technical-knowledge:before,
body.acquis-techniques ul.menu li#acquis-techniques:before,
body.cursus-des-etudes ul.menu li#cursus-des-etudes:before,
body.schooling-and-education ul.menu li#schooling-and-education:before,
body.autres-realisations ul.menu li#autres-realisations:before,
body.other-achievements ul.menu li#other-achievements:before,
body.contact-et-coordonnees ul.menu li#contact-et-coordonnees:before,
body.contact--coordinates ul.menu li#contact--coordinates:before,
body.experiences-de-travail ul.menu li#experiences-de-travail:before,
body.work-experiences ul.menu li#work-experiences:before,
body.gsd5-inc ul.menu li#gsd5-inc:before,
body.college-de-maisonneuve ul.menu li#college-de-maisonneuve:before,
body.savoir-faire-linux ul.menu li#savoir-faire-linux:before,
body.larochelle-groupe-conseil ul.menu li#larochelle-groupe-conseil:before,
body.logistec-corporation ul.menu li#logistec-corporation:before,
body.transports-quebec ul.menu li#transports-quebec:before,
body.ets ul.menu li#ets:before,
body.gereq ul.menu li#gereq:before,
body.pi-digital-inc ul.menu li#pi-digital-inc:before,
body.webmotion-inc ul.menu li#webmotion-inc:before,
body.hrdc-drhc2 ul.menu li#hrdc-drhc2:before,
body.industrie-canada ul.menu li#industrie-canada:before,
body.industry-canada ul.menu li#industry-canada:before,
body.hrdc-drhc ul.menu li#hrdc-drhc:before
{
    content: "\00BB\0020";
    margin-left: -1.6ex;
}

a img {
    border: none;
}

img.logo {
    float: left;
    margin: 1em;
}

#language-selector {
    color: white;
    font-size: 9pt;
    position: absolute;
    float: right;
    bottom: 0;
    right: 0;
    padding: 1ex;
}

#header a {
    color: white;
    font-size: bold;
    text-decoration: none;
}

#main a {
    color: #104060;
    font-weight: bold;
    text-decoration: none;
}

#main a.definition {
    text-decoration: none;
    border-bottom: 2px dotted #d0d0d0;
}


#main a.definition:hover {
    border-bottom: 2px dotted;
}
body.acquis-techniques .article-content,
body.technical-knowledge .article-content {
    float: left;
}


div.article h1 {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1px;
    padding: 4px;
    display: inline-block;
    font-size: 10pt;
    background-color: #ffffff;
    outline: 1px solid #000033;
}

div.article h2 {
    color: #000033;
    font-size: 11pt;
}


div.article {
    margin: 1em;
    clear: both;
}


div.article-content, div.experience {
    padding: 1em;
    display: block;
    background-color: #ffffff;
    border: 1px solid #000033;
}


ul.domaines-d-expertise, 
ul.areas-of-expertise {
    float: left;
    width: 100%;
}


ul.domaines-d-expertise li,
ul.areas-of-expertise li {
    float: left;
    width: 50%;
}

div.materiel, div.languages, div.bases-de-donnees, div.produits, div.systemes, div.reseautique,
div.hardware, div.databases, div.products, div.systems, div.networking {
    float: left;
    width: 45%;
    margin-right: 5%;
}

div.materiel ul, div.languages ul, div.bases-de-donnees ul, div.produits ul, div.systemes ul, div.reseautique ul,
div.hardware ul, div.databases ul, div.products ul, div.systems ul, div.networking ul {
    width: 100%;
}

div.materiel li, div.languages li, div.bases-de-donnees li, div.produits li, div.systemes li, div.reseautique li,
div.hardware li, div.databases li, div.products li, div.systems li, div.networking li {
    float: left;
    width: 33%;
}

div.competition, div.formation, div.ecole, div.conference,
div.training, div.school {
    margin: 1em;
}

.cursus-des-etudes div.date,
.schooling-and-education div.date {
    float: left; 
    text-align: right;
    width: 15%;
    margin-right: 1em;
}

/* work experiences */
div.poste, div.position {
    margin-left: auto;
    margin-right: auto;
    clear: both;
    margin-top: 1em;
    position: relative;
    padding-bottom: 3em;
    border-bottom: 1px solid #000033;
    width: 80%;
}

div.poste .duree, div.position .term {
    float: left; 
    text-align: right;
    width: 35%;
    margin-right: 1em;
}

div.poste .employeur, div.position .employer {
    float: left;
    width: 60%;
    font-weight: bold;
}

div.poste .fonction, div.position .function {
    font-style: italic;
    position: absolute;
    top: 1.2em;
    left: 37%;
    width: 50%;
}

div.poste .details, div.position .details {
    width: 25%;
    float: right;
    text-align: right;
}

/* jobs */
div.experience .fonction,
div.experience .function {
    font-weight: bold;
    font-style: italic;
}

div.experience .description {
    text-align: justify;
}

div.experience .environnement-technologique,
div.experience .technological-environment {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: bold;
    width: 85%;
}

img#logo-gsd5 {
    margin-bottom: 3em;
}

/* realisations */

body.autres-realisations hr,
body.other-achievements hr {
    clear: both;
    width: 75%;
}

div.realisation, div.achievement {
    clear: both;
    float: left;
    padding: 1em;
    margin-bottom: 1em;
}

div.realisation .image, div.achievement .image {
    float: left;
    margin: 4px;
    border: 1px solid #000033;
    padding: 1em;
}

div.realisation .description, div.achievement .description {
    text-align: justify;
}

div.realisation .title, div.achievement .title {
    font-weight: bold;
}

/* contact form */

form#contact {
    position: relative;
    width: 90%;
    margin-bottom: 2ex;
    margin-top: 2ex;
}

form#contact label {
    width: 15%;
    text-align: right;
    float: left;
    clear: both;
    margin-top: .7em;
    margin-right: 1em;
    font-weight: bold;
    color: #000033;
}

form#contact input {
    width: 50%;
    margin-top: 1ex;
    float: left;
    border: 1px solid #000033;
}

form#contact textarea {
    float: left;
    margin-top: 1ex;
    width: 81%;
    height: 20em;
    border: 1px solid #000033;
}

form#contact #send {
    clear: both;
    margin-left: 18%;
    width: 200px;
}

form#contact fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

form#contact fieldset legend {
    display: none;
}

.phone, .telephone {
    float: right;
    width: 70%;
}

/* definitions */

div.definition {
    padding: 1em;
}

.definition h1 {
    font-size: 12pt;
    color: #000033;
}