/* CSS pour le site : HLDStudio.com */
/* Auteur : Pierre-Yves Moisan, intégrateur WEB */

* {
   padding:0;
   margin:0;
   font-family:"Lucida Grande" sans-serif;
}

#conteneur {
   width:710px;
   margin:0 auto;
   background-color:#ffffff;
   position:relative;
   top:0;
   left:0;
   text-align:left;
   font-family:"Lucida Grande" sans-serif;
}

#header {
   background-image: url(../images/fond.jpg);
   background-repeat:repeat-x;
   height:234px;
   width:100%;
}

body {
   background-image: url(../images/fond.jpg);
   background-repeat:repeat-x;
   height:234px;
   width:100%;
   text-align:center;
}

#gauche  {
   float:left;
   width:450px;
   margin:15px 0 0 0;
   
}
#gauche .portfolioInfos {
   padding:0 0 10px 8px;
   border-bottom:1px solid #f9f9f9;
   margin:0 0 20px 0;
   
}
#gauche .portfolioInfos p {
   width:430px;
   margin:10px 0 10px 0;
}
#gauche .portfolioInfos .apercuWebImage {
   margin:10px 0 10px 0;
}

#droite {
   margin:15px 0 0 0;
   margin-left:460px;
   width:230px;
   border-left:1px solid #bababa;
   padding-bottom:5px;
}
#droite a {
   font-size:9pt;
   color:#535353;
   _position:relative;
   _top:-6px;
   _left:5px;
}
#droite a:hover {
   color:#42aa3f;
}
#droite li {
   list-style-image: URL(../images/listImage.jpg);
   line-height:140%;
   position:relative;
   top:0;
   left:20px;
   _left:0px;
   
}
#droite ul {

}
.remove {
   display:none;
}

h3 {
   color:#42aa3f;
}


ul {
   list-style-type:none;
   display:inline;
}
ul#menuPortfolio li {
   float:left;
   margin-right:25px;
}
#logo {
   margin-top:109px;
   
}

/* ********************************************************************************** */
/* ******************************** Menu Principal ********************************** */

#zoneMenuPortfolio {
   margin-top:15px;
}

#web {
   background-image: url(../images/btnWeb.jpg);
   height:33px;
   width:102px;   
   cursor:pointer;

}
#web:hover {
   background-image: url(../images/btnWeb_on.jpg);
   height:33px;
   width:102px;   
   cursor:pointer;

}

#anime {
   background-image: url(../images/btnAnime.jpg);
   height:33px;
   width:125px;   
   cursor:pointer;
}
#anime:hover {
   background-image: url(../images/btnAnime_on.jpg);
   height:33px;
   width:125px;   
   cursor:pointer;
}

#graph {
   background-image: url(../images/btnGraph.jpg);
   height:33px;
   width:116px; 
   cursor:pointer;
}
#graph:hover {
   background-image: url(../images/btnGraph_on.jpg);
   height:33px;
   width:116px;  
   cursor:pointer;
}

#video {
   background-image: url(../images/btnVideo.jpg);
   height:33px;
   width:116px;
   cursor:pointer;
}
#video:hover {
   background-image: url(../images/btnVideo_on.jpg);
   height:33px;
   width:116px; 
   cursor:pointer;
}

#stage {
   background-image: url(../images/btnStage.jpg);
   height:33px;
   width:100px;   
   cursor:pointer;
   
}
#stage:hover {
   background-image: url(../images/btnStage_on.jpg);
   height:33px;
   width:100px;
   cursor:pointer;
   
}



/* ************************************************************************************ */

#menuPortfolio {
   position:absolute;
   top:190px;
   left:-10px;
}
div#infos {
   float:left;
   margin-top:8px;
   padding-right:15px;
} 
p {
   font-family:"Lucida Grande";
   color:#686868;
   font-size:9pt;
   text-align:left;
   width:500px;
   line-height:150%;
   margin:10px 0 0 0;
}

span.hldstudio {
   color:#42aa3f;
   font-weight:bold;
}

a.contact {
   color:#686868;
   text-decoration:underline;
}
a {
   
   color:#42aa3f;
   text-decoration:none;
}
a:hover {
   color:#42aa3f;
   text-decoration:underline;
}
a.title {
   border:none;
}

/* ********************************************************************************* */
/* ********************************** Sections ************************************* */

.note {
   margin:50px 0 0 0;
   font-style:italic;
   font-size:7pt;
   text-align:left;
   color:bababa;

}

#graphLink {
   margin:5px 0 0 0;
   position:relative;
   top:0;
   left:430px;
   
}
#stageLink {
   margin:5px 0 0 0;
   position:relative;
   top:0;
   left:565px;
   width:200px;
   
}


#animeLink {
   margin:5px 0 0 0;
   position:relative;
   top:0;
   left:285px;

}

#videoLink {
   margin:5px 0 0 0;
   position:relative;
   top:0;
   left:140px;

}
#webLink {

   margin:5px 0 0 0;
   position:relative;
   top:0;
   left:15px;
}

.portfoliolink {
   font-size:8pt;
   letter-spacing:1px;

}
.portfoliolink li {
   line-height:1.8em;
}

.portfoliolink a:hover {
   color:#686868;
}

/* ********************************************************************************* */
/* ******************************** Pied de page *********************************** */
#footer {
   position:absolute;
   bottom:0;
   left:0;
   float:none;
   clear:both;
   background-image: url(../images/fondfoot.jpg);
   width:100%;
   height:60px;
   padding:10px 0 0 0;
   color:#686868;
   text-decoration:none;
}
#footer a  {
   font-size:9pt;
   color:#686868;
   text-decoration:none;
}
#footer a:hover  {
   color:#42aa3f;
   text-decoration:underline;
}
#footer li {
   float:left;
}
#footerCopyrights {
   width:200px;
   margin:0 auto;
}