* {margin: 0 ; padding: 0 ; border: none ;}

body {  font-family: "Times New Roman", Times, serif; 
    font-size : 17px ; 
    color: #000; 
    background-color: #ccc; }

li {list-style-type: none; }
a {
    font-weight: bold ;
   text-decoration : none; }
a:link,a:visited {
   color : #000 ; }
a:hover, a:active {
   color : #ccc ; }

h1 {    
    font-size : xx-large; 
    font-weight: bold ;
    text-align: center ; }
h2 {    
    font-size : 21px; 
    font-weight: bold ;
    text-align: left ; }
h3 { 
    font-size : 19px ; 
    font-weight: bold ;
    text-align: left ; }
select, input {
 font-family: "Times New Roman", Times, serif;
 font-size: small ;
 width: 320px;
 background-color: #ccc ; }

input.date {
 width: 60px; } 
 
// .ico_midi { width: 20px ; height: 20px ; }
.ico_nav { width: 10px ; height: 10px ; }

#photo {
    float: left ;
    width :400px ; }
   
@media screen {
#nav {
    width: 780px ;
    height: 15px ;
    font-size : small ; 
    color : #ccc ;
    background-color: #800 ; }
#nav a:link, #nav a:visited {
   color : #ccc ; }
#nav a:hover, #nav a:active {
   color : #fff ; }
#nav li {
    display: inline ;
    margin: 0 20px 0 0 ; }  
#contenu {
    width: 780px ;
    height: 460px ;
    margin: 15px 0 ;
    background-image: url(images/tlfond.gif); }
#photo, #redac, .liens {
    overflow: auto ;
    margin: 40px 0px ;
    padding: 0 10px ;
    height:300px ; }
#telech {
 width: 380px ;
 height: 20px ; }
.partoche {
 clear : both ;
 float : left ;
 overflow: auto ;
 width: 380px ;
 height: 250px ; }
#photo .mid {
 float : left ;
 width: 20px;
 height: 20px;
 background: url(images/midi_out.gif) no-repeat ; }
#photo .mid:hover {
 background: url(images/midi_on.gif) no-repeat ; }
#photo .mp3 {
 float : left ;
 width: 340px;
 height: 20px; }
#photo .vect {
 float : left ;
 width: 20px;
 height: 20px;
 background: url(images/vect_out.gif) no-repeat ; }
#photo .vect:hover {
 background: url(images/vect_on.gif) no-repeat ; }

#redac {
    float: right ;
    width: 340px ;
    text-align: justify; }

.liens {
    float: left ;
    width: 240px ;
    font-size: 16px ; 
    text-align: left ; }
.note_prn {
   display: none ; }
}


@media print {
#nav {
   display: none ; } 
#contenu {
    width: 1024px ;
    height: 1200px ;
    margin:10px ;
    background: transparent ; }
#photo, #redac, .liens {
    overflow: visible ;
    margin: 40px 0px ;
    padding: 0 10px ;
    height: 1040px ; }
#photo .mid, #photo .mp3, #photo .vect {
    display: none ; }
#photo .partoche {
 overflow: visible ;
 width: 600px ; }
 
#redac {
    float: right ;
    width: 300px ;
    text-align: justify; }

.liens {
    float: left ;
    width: 320px ;
    font-size: 16px ; 
    text-align: left ; }
.note_prn {
   display: inline ; }
}

#titre {
    width: 100% ;
    height:40px ;
    border-bottom: 2px solid #800 ;
}

#redac li, .liens li {
    background-image: url(images/droite.gif);
    background-repeat:no-repeat;
    background-position:0px 5px ;
    padding-left:20px; 
    text-align: left ; }

#pdp {
    clear: both ;
    width: 100% ;
    height:40px ;
    border-top: 2px solid #800 ;}
#pdp em {
    font-size: x-small ; }  
#pdp ul {
    margin-top: 10px ;
    font-style: italic ; }
#pdp li {
    display: inline ;
    margin: 0 5px ;
    font-size: 15px ; } 
#pdp a span {
    display: none ; }
#pdp a:hover span {
    display: inline ;
    position: absolute ;
    top: 40px; 
    left: 40px ;
    width: 400px ;
    color: #000 ;
    text-align: left ; 
    background-color: #ccc ; }