/****** CSS Portefolio // Scripted and Performed by Benoît Dietrich ©******/


/**Bases**/

a{text-decoration: none; color:#fff;}
a img{border: none;}
*{margin: 0;padding: 0;font-family: arial, sans-serif;}
.clear{clear: both;margin-top: -21px;}


/**Le background général**/

body{
    background: url('../img/bkg.jpg') top center no-repeat #000;
}

/**Le haut**/

#header{
    width: 950px;
    margin: 0 auto;
    background: url('../img/bkg_content.png') repeat-y;
}

    #coloneLeft{
        width: 210px;
        height: 125px;
        padding-bottom: 40px;
    }
    
        h1{
            padding-left: 29px;
            padding-top: 40px;
        }

/**Le contenu et les jobs**/

#content{
    width: 950px;
    margin: 0 auto;
    background: url('../img/bkg_content.png') repeat-y;
    padding-bottom: 0px;
}

    /*Ce qui sert à voir les traveaux, + slider*/
    .opener{
        position: relative;
        padding-top: 20px;
    }
    
        h2{
            width: 207px;
            height: 60px;
            float: left;
            background-color: #412a20;
        }
    
                .thisImage{
                float: left;
            }    
        
        .jobico{
            height: 60px;
            width: 740px;
            float: left;
            position: relative;
            overflow: hidden;
            background-color: #4f3a32;
        }
    
        
            .slider{
                position: relative;
                width: 2000px;
                height: 60px;
            }
            
                .slider a{
                    display: block;
                    height: 60px;
                    float: left;
                }
        
        
            .suiv{
                position: absolute;
                z-index: 100;
                height: 60px;
                width: 60px;
                right: 0;
                top: 0;
            }
            
            .prec{
                position: absolute;
                height: 60px;
                width: 60px;
                z-index: 100;
                left: 0;
                top: 0;
            }
    
    /*Ce qui s'ouvre ouvert*/
    .ouvert{
        width: 950px;
        height: 477px;
        position: relative;
    }
    
        .textJob{
            width: 207px;
            height: 410px;
            float: left;
            color: #fff;
            padding-top: 30px;
            font-size: 11px;
            background-color: #412a20;
        }
        
            .textJob h3{
                padding-left: 40px;
                margin-bottom: 10px;
            }
        
            .textJob p{
                padding-left: 40px;
                padding-right: 10px;
                line-height: 16px;
            }
            
            .textJob a {
                color: #94d6f6;
            }
        
        .contentJob{
            float: left;
            position: relative;
            width : 740px;
            background-color: #4f3a32;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        
            .fleches{
                width: 80px;
                height: 80px;
                float: left;
                position: absolute;
                left: 330px;
            }
            
                .suivante{
                    position: absolute;
                    z-index: 100;
                    top: 170px;
                    left : 320px;
                }
                
                .precedente{
                    position: absolute;
                    z-index: 100;
                    top: 170px;
                    left: -305px;
                }
            
            .job{
                width: 660px;
                height: 400px;
                float: left;
                position: relative;
                margin-left: 40px;
                text-align: center;
            }
            
                .job img{
                    margin : auto;
                }
            
                #jobVideo{
                    width: 600px;
                    height: 400px;
                    margin-left: 70px;
                	text-align: center
                }
                
            
    #toutprofil{
        position: relative;

    }

    #linkProfil{
        padding-left: 52px;
        height: 40px;
        width: 155px;
        float: left;
        background-color: #412a20;
        margin-top: 20px;
    }
    
    #linkProfil img{
        margin-top: -15px;
        margin-right: 10px;
    }
    
    #profil{
        margin-top: 20px;
        width: 740px;
        float: left;
    }
    

		#profil div{
			padding: 0 10px;
            float: left;
            margin-top: 10px;
            font-size: 11px;
            line-height: 16px;
		}
		
        #laBarre{
            width: 740px;
            height: 60px;
            background-color: #412a20;
            margin-top: 0 !important;
            padding: 0 !important;
        }

        .textProfil{
            width: 190px;
        }
        
        	label{
        		display: block;
        		width: 60px;
        		float: left;
        	}
        	
        	input{
        		width: 80px;
        		float: left;
        	}
        	
        	textarea{
        		font-size: 11px;
        	}
        	
        	input[type='submit']{
        		margin-left: 60px;
        		background-color: #fff;
        		border: 1px solid #000;
        		width: 80px;
        	}
        	
        	




/**Le bas du site – Profil**/
            
/*#footer{
    width: 950px;
    height: 430px;
    margin: 0 auto;
}*/
    
    
/**Pour l'ouverture d'autres site webs**/
.banner{
    height: 60px;
    width: 100%;
    position: fixed;
    position: relative;
    top: 0;
    background-color: #4f3a32;
}

    .banner h1{
        float: left;
        height: 60px;
        margin: 0;
        padding: 0;
    }
    
    .banner h2{
        float: left;
    }
    
    .banner h3{
        color: #fff;
        float: left;
    }
    
    #flashAnnim{
        margin-top: 100px;
        width: 950px;
        height: 600px;
    }