/* CSS Document */

/* ------------Boujour dans le CSS d'oprick Media--------------*/
/*---- 
				Si vous aimez ce que vous voyez  vous pouvez me contacter 
					Tommy Saucier Plourde 
					Étudiants en mutimedia au cegep de matane  (finissant)
					lifegimmer@hotmail.com 
				
-----*/

/* Annule les marges intérieures et extérieures */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td{ 
	margin : 0;
	padding : 0; 
}

/* Initialise les grosseurs de titres */
h1,h2,h3,h4,h5,h6 { 
	font-size : 100%; 
}

/* Initialise le list-style des listes */
ol,ul { 
	list-style : none; 
}

/* Initialise les font-style et font-weight a normal */
address, caption, cite, code, dfn, em, strong, th, var{ 
	font-style : normal; 
	font-weight : normal;
}

/* Initialise les bordures de tableaux */
table { 
	border-collapse : collapse;
	 border-spacing : 0;
}

/* Enleve les bordures aux img et aux fieldset */
fieldset,img { 
	border : 0; 
}

/* Aligne a gauche caption et th */
caption,th { 
	text-align : left; 
}

/* Enleve les guillemets des citations q */
q:before, q:after { 
	content :''; 
}

/* =si_clear_children */
.pc,.sc { position : absolute; top: 0; left: 0; }
.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVIENT UN BOGUE DANS SAFARI */

body{
	background-color: #000000;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.1em;  
}

.Conteneur{
	background-color: #000000;
	margin: 0 auto;
	width: 950px;
	height: 100%;
	position: relative;
}

.contenantA{
	background: url(../img/opti/OMbox-vo1.png) no-repeat;
	width: 640px;
	height: 240px;
	margin-left: 45px;	
}

.vide{
	width: 640px;
	height: 165px;
	margin-left: 45px;	
}

.img a{
	width: 310px;
	height: 144px;
	margin-top: 40px;
	margin-left: 280px;
	position: absolute;
	border-top: 4px solid #CCCCCC;
	border-left: 4px solid #666666;
	border-bottom: 4px solid #CCCCCC;
	border-right: 4px solid #666666;
	
}

.img a:hover{
	border-top: 4px solid #666666;
	border-left: 4px solid #CCCCCC;
	border-bottom: 4px solid #666666;
	border-right: 4px solid #CCCCCC;
}


.separation{
	width: 15px;
	height: 152px;
	margin-top: 40px;
	margin-left: 250px;
	position: absolute;
	border-right: 1px dotted #ffffff;
	
}

.titre { 
	position: absolute;
	width: 215px;
	margin-top: 40px;
	margin-left: 45px;
	text-align:  center;
	font-size: 21px;
	font-weight: bold;
}

.titre2 { 
	position: absolute;
	width: 215px;
	margin-top: 40px;
	margin-left: 315px;
	text-align:  center;
	font-size: 21px;
	font-weight: bold;
}

.texto{
	position: absolute;
	width: 195px;
	height: 110px;
	margin-top: 65px;
	margin-left: 50px;
	text-align: left;
	font-size: 12px;
}

.date {
	text-align: right;
	width: 200px;
	padding-top: 1px;
	position: absolute;
}


.underline {
	text-decoration: underline;
}

.infoSupp {
	width: 310px;
	height: 144px;
	margin-top: 65px;
	margin-left: 280px;
	position: absolute;
	font-size: 12px;	
}

.infoSupp1 {
	width: 310px;
	height: 144px;
	margin-top: 64px;
	margin-left: 433px;
	position: absolute;
}

.infoSupp2 {
	width: 310px;
	height: 144px;
	margin-top: 83px;
	margin-left: 435px;
	position: absolute;
}

.infoSupp3 {
	width: 310px;
	height: 144px;
	margin-top: 102px;
	margin-left: 436px;
	position: absolute;
}

.infoSupp4 {
	width: 310px;
	height: 144px;
	margin-top: 119px;
	margin-left: 436px;
	position: absolute;
}

.infoSupp5 {
	width: 310px;
	height: 144px;
	margin-top: 136px;
	margin-left: 437px;
	position: absolute;
}

.infoSupp6 {
	margin-top: 155px;
	margin-left: 437px;
	position: absolute;
}

.infoSupp7 {
	margin-top: 173px;
	margin-left: 438px;
	position: absolute;
}

#texte{
	padding-top: 500px;
	text-align: center;
}

a{
	text-decoration: none;
	color: #666666;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 2px dotted #333333;
}

a:hover{
	color: #333333;
	border-bottom: 1px dotted #333333;
}

#link1{	
	margin-top: 173px;
	margin-left: 40px;
	width: 215px;
	position: absolute;
	text-align: center;

}

#link2{	
	margin-top: 173px;
	margin-left: 40px;
	width: 215px;
	position: absolute;
	text-align: center;

}

/************************  Artifice     *******************/
#logoSkull{
	background: url(../img/opti/skul-vo1.jpg); 
	width: 220px;
	height: 220px;
	top: 0px;
	left: 60px;
	position: absolute;
	z-index: 1100;
}


#tapis{
	width: 792px;
	height: 370px;
	margin-left: 60px;
}

#portfolio{
	background: url(../img/opti/OM_head-vo6.png) -2px 0px;
	width: 845px;
	height: 355px;
	top: 22px;
	left: 45px;
	position: absolute;

}

#special{
	background: url(../img/opti/bordure-vo1.png) 0px 0px;
	width: 32px;
	height: 103%;
	position: absolute;
}

#special2{
	background: url(../img/opti/bordure-vo3.png) -12px 0px;
	width: 32px;
	height: 103%;
	left: 900px;
	position: absolute;
}

#contourBas{	
	background: url(../img/opti/bordure-vo2.png) 0px -10px;
	margin-left: 10px;
	width: 900px;
	height: 22px;
	padding-top: 15px;
	color: #666666;
	font-size: 10px;
	font-weight: bold;
	text-align: center;

}

#contourHaut{	
	background: url(../img/opti/bordure-vo4.png) 0px -10px;
	left: 32px;
	width: 868px;
	height: 23px;
	position: absolute;
	font-size: 12px;
	font-weight: bold;
	color: #999999;
}

#menuTop{	
	right: 14px;
	position: absolute;

}



/************************  Artifice     *******************/
.le{
	width: 220px; 
	height: 120px;

}
.txtGras {
	font-weight: bold;
	height: 50px;
	width: 88px;
	margin-top: 25px;
	margin-left: 50px;
	padding: 25px 0px 0px 0px; 
	padding-left: 10px;
}

.linka a{
	text-decoration: none;
	color: #cccccc;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px dotted #cccccc;
}


.linka a:hover{
	color: #333333;
	border-bottom: 1px dotted #333333;
}

.linkb a{
	text-decoration: none;
	color: #333333;
}


.linkb a:hover{
	color: #666666;

}

.linkc a{
	border-bottom: 1px dotted #333333;
	text-decoration: none;
	color: #333333;
	font-size: 12px;
	font-weight: bold;
}


.linkc a:hover{
	border-bottom: 1px dotted #999999;
	text-decoration: none;
	color: #999999;

}

.linkd a{
	border-bottom: 1px dotted #999999;
	text-decoration: none;
	color: #999999;
	font-size: 12px;
	font-weight: bold;
}


.linkd a:hover{
	border-bottom: 1px dotted #333333;
	text-decoration: none;
	color: #333333;

}

#contourHaut a{
	text-decoration: none;
	color: #999999;
	font-size: 14px;
	font-weight: bold;
}

#contourHaut a:hover{
	text-decoration: none;
	color: #333333;
}

/***************************************************/
/******************---Menu---***********************/
/***************************************************/

#menu{
	background: url(../img/opti/OMMenu-vo2.png) no-repeat;
	position:absolute;
	width: 200px;
	height: 715px;
	left: 688px;
	top: 365px;
}

ul#menu, ul#menu ul {
	list-style-type:none;
	margin: 0;
	padding: 0;
	width: 202px;
}

ul#menu a {
	display: block;
	text-decoration: none;	
	height: 72px;
	width: 122px; 
}

ul#menu li ul li a {
	background: #666666;
	color: #000;
	margin-top: 3px;
	margin-left: 50px;
	height: 32px;
	width: 100px;
}

ul#menu li ul li a:hover {
	background: #aaa;
}


#blobA a{
	background: url(../img/opti/btnOMprofil-Nvo3.png) 0px 0px no-repeat;
	margin-top: 48px;
	margin-left: 40px; 
}

#blobA a:hover{
	background: url(../img/opti/btnOMprofil-Ovo3.png) 0px 0px no-repeat;
}

#blobB a {
	background: url(../img/opti/btnOMweb-Nvo3.png) 0px 0px no-repeat;
	margin-top: 20px;
	margin-left: 40px; 
}

#blobB a:hover {
	background: url(../img/opti/btnOMweb-Ovo3.png) no-repeat;
}

#blobC a {
	background: url(../img/opti/btnOMvisual-Nvo3.png) no-repeat;
	margin-top: 20px;
	margin-left: 40px;
}

#blobC a:hover {
	background: url(../img/opti/btnOMvisual-Ovo3.png) no-repeat;
}

#blobD a {
	background: url(../img/opti/btnOMvideo-Nvo3.png) no-repeat;
	margin-top: 20px;
	margin-left: 40px;
}

#blobD a:hover {
	background: url(../img/opti/btnOMvideo-Ovo3.png) no-repeat;
}


#blobE a {
	background: url(../img/opti/btnOMgadgets-Nvo3.png) no-repeat;
	margin-top: 20px;
	margin-left: 40px;
}

#blobE a:hover {
	background: url(../img/opti/btnOMgadgets-Ovo3.png) no-repeat;
}

#menu span {
	 visibility: hidden;
}