@import url('reset.css');

body { font-family : arial; background : white; }

#header { background : #1b1b1c; width : 100%; position : absolute; top : 409px; height : 86px; z-index : 2;}
#header h1 { position : absolute; top : 16px; left : 37px;}
#header .tagline { text-transform : uppercase; color : #949494; position : absolute; bottom : 19px; left : 390px; width : 230px; font-size : 12px; line-height : 16px; text-align : right; font-weight : normal;}
#cartouche { width : 140px; padding-right : 10px; position : absolute; top: 18px; left : 0; height : 391px; z-index : 1;}
#cartouche h2 { width : 70px; font : normal 12px/14px arial; color : #fff; padding : 10px; }
#cartouche #clock { width : 26px; height : 26px; display : block; position : absolute; top : 16px; left : 101px;}
#widgets { background-image : url(../images/fond_top_cartouche.gif); position : absolute; top : 60px; height : 331px; width : 140px;}
#legende { position : absolute; top : 494px; left : 0; width : 178px; background : url(../images/legende_ombre2.png); height : 338px; z-index : 1;}
#footer { height : 314px; /*background-image : url(../images/footer_ombre.png); */background-repeat : no-repeat; width : 100%; position : relative; margin-top : -314px;}
#footer #presenceweb { background : #e5e5e5 no-repeat; /* url('../images/fond_footer.png') */ width : 100%; position : absolute; bottom : 0; height : 32px;}
.day{ width : 480px; background-repeat : repeat-x; }

#cartouche.nuit, #filler.nuit, .nuit .blogs, #spacer_timeline.nuit { background : #2a2d40 url(../images/ciel/23-6_nuit.jpg) repeat-x ; }
.nuit .blogs a { color : #626363; text-decoration : none; }
.nuit .blogs cite { color : #ababab; }

#cartouche.matin, #filler.matin, .matin .blogs, #spacer_timeline.matin { background : #fff792 url(../images/ciel/6-11_matin.jpg) repeat-x; }
.matin .blogs a { color : #6f6f6f; text-decoration : none; }
.matin .blogs cite { color : #e98f8f; }

#cartouche.midi, #filler.midi, .midi .blogs, #spacer_timeline.midi { background : #c6e9fc url(../images/ciel/11-15_midi.jpg) repeat-x; }
.midi .blogs a { color : #444444; text-decoration : none; }
.midi .blogs cite { color : #747373; }

#cartouche.apresmidi, #filler.apresmidi, .apresmidi .blogs, #spacer_timeline.apresmidi { background : #fff792 url(../images/ciel/15-19_apres-midi.jpg) repeat-x; }
.apresmidi .blogs a { color : #444444; text-decoration : none; }
.apresmidi .blogs cite { color : #919191; }

#cartouche.soir, #filler.soir, .soir .blogs, #spacer_timeline.soir { background :  #71bfc9 url(../images/ciel/19-23_soir.jpg) repeat-x; }
.soir .blogs a { color : #c4c5c5; text-decoration : none; }
.soir .blogs cite { color : #efefef; }

#cartouche #stats { margin-top : 7px; margin-left : 7px; display : block; width : 127px; height : 156px; position : relative; }
#cartouche #operations { margin-top : 7px; margin-left : 7px; display : block; width : 127px; height : 156px; position : relative; }

/* #stats, #operations {  overflow-x : hidden; } */
#stats .control, #operations .control { position : absolute; width : 127px; bottom : 15px; display : none; z-index : 3; }
#stats .control .previous, #operations .control .previous { cursor : pointer; }
#stats .control .next, #operations .control .next { position : absolute; right : 0; cursor : pointer; }

#stats .container, #operations .container { width : 127px; height : 156px; position : relative; overflow-x : hidden; }
#stats .container div, #operations .container div{ width : 3000px; height : 156px; overflow-x : hidden; }
#stats .container img, #operations .container img { width : 127px; height : 156px; float : left;}

#expertises { text-align : left; width : 130px; padding-top : 35px; padding-left : 10px;}
#expertises h3 { font : normal 11px/11px arial; color : #000;}
#expertises a { font : normal 11px/11px arial; text-decoration : underline; color : #6f6f6f;  }
#expertises a:hover { text-decoration : underline; color : black;  }

#credits { text-align : left; width : 130px; padding-top : 35px; padding-left : 10px; background : white; padding-bottom : 100px;}
#credits, #credits a { font : normal 11px/11px arial; color : #6f6f6f; }
#credits a:hover { text-decoration : underline; color : black;  }

.day .date { background : url('../images/heures.jpg') repeat-x; width : 450px; height : 18px; font : italic 11px/18px arial; color : #676767; padding-left : 30px; }
/*
#before { position : absolute; left : 950px; top : 0; }
#today { position : absolute; left : 150px; top : 0; }
#blog { position : absolute; top : 18px; left : 620px; }
#footer { position : absolute; top : 3000px; }
*/
#timeline_container { position : absolute; width : 100%; overflow-x : hidden; z-index : 0; left: 0; top : 0;}
#timeline_control .droite { position : absolute; top : 358px; left : 140px;  z-index : 1; cursor : pointer; }
#timeline_control .gauche { position : absolute; top : 358px; right : 0; z-index : 1; cursor : pointer; }

#timeline {  width : 10000px; padding-left : 150px;}
.day { float : left; }
#blog { margin-left : 630px; position : relative; }

.tranche_horaire { float : left; width : 160px; }
.tranche_horaire li { margin-bottom : 20px; word-wrap: break-word; }
.tranche_horaire .blogs li:hover a, .tranche_horaire .blogs li a:hover { text-decoration : underline; }
.tranche_horaire .bruit li:hover a, .tranche_horaire .bruit li a:hover { /* text-decoration : underline; */ color : black; }

.tranche_horaire cite { text-transform : uppercase; }

.tranche_horaire .blogs { font : bold 10px/14px arial; text-align : center; }
.tranche_horaire .blogs li { height : 50px; padding : 0px 10px; }

.tranche_horaire .bruit { padding-top : 10px; }
.tranche_horaire .bruit li { padding : 0px 10px; }
.tranche_horaire .bruit .time { font : normal 11px/14px arial; text-decoration : none; color : #a8a8a8; padding-right : 2px;}
.tranche_horaire .bruit a { font : normal 11px/14px arial; text-decoration : none; color : #6f6f6f; }
.tranche_horaire .bruit a.ange_link { text-decoration : underline; }
.tranche_horaire .bruit a.twitter_at_link { border-bottom: 1px dashed #a8a8a8; }
.tranche_horaire .bruit a:hover.twitter_at_link { border-bottom: 1px dashed black; }
.tranche_horaire .bruit a.twitter_tag_link { border-bottom: 1px dashed #a8a8a8; }
.tranche_horaire .bruit a:hover.twitter_tag_link { border-bottom: 1px dashed black; }

.tranche_horaire .blogs cite, .tranche_horaire .bruit cite { display : block; font-style : normal;}

.tranche_horaire .bruit cite { font : normal 11px/14px arial; text-transform : uppercase; color : #a8a8a8;}
.tranche_horaire .bruit cite a { color : #a8a8a8; }

.bruit li				{ list-style : disc inside; font : normal 12px/14px arial; }
.bruit li span			{ color : #6f6f6f; }
.bruit li.twitter		{ color : #6f6f6f; }
.bruit li.facebook		{ color : #000000; }
.bruit li.delicious		{ color : #0066cc; }
.bruit li.lastfm		{ color : #0099cc; }
.bruit li.vimeo			{ color : #009900; }
.bruit li.youtube		{ color : #ff9933; }
.bruit li.dailymotion	{ color : #e3004a; }
.bruit li.flickr		{ color : #6600cc; }
.bruit li.googlereader	{ color : #ffee00; }


#legende .images { margin-left : 6px; margin-top : 7px;}
#legende .bruit { padding-left : 35px; padding-top : 75px; background : white;width : 105px;}

#legende .images:hover { cursor : pointer; }
#legende .bruit:hover { cursor : pointer; }

#legende .images li { width : 134px; height : 15px; background : url('../images/bouton_images.gif') no-repeat; margin-bottom : 1px; text-align : center; color : white; text-transform : uppercase; font : normal 10px/15px arial;}
#legende .images #anges.on { background : url('../images/bouton_images_on.gif') no-repeat; }
#legende .images #flickr.on { background : url('../images/bouton_photos_on.gif') no-repeat; }

.tranche_horaire .spacer { display : block; height : 84px; }

#blog { width : 300px; padding : 18px 10px 0 10px; /* margin : 0 10px;  */ background : white; z-index : 3;}
#blog .article { margin-bottom : 40px; overflow : hidden;}
#blog h3 { font : bold 25px/26px georgia; color : #131313; margin-bottom : 15px; }
#blog h3 a { color : #131313; text-decoration : none; }
#blog h3 a:hover { color : #131313; text-decoration : underline; }
#blog h4 { font : normal 10px/14px arial; margin-bottom : 2px; }
#blog .content { font : normal 12px/16px arial; color : #131313; width : 300px;}
#blog .content a { color : #131313;}
#blog .content p { margin-bottom : 1em; }
#blog .content img { max-width : 300px; padding : 5px 0;}
#blog .content object { width : 300px;}
#blog .content embed { width : 300px; }

#blog .feedback { margin-top : 12px; }
#blog .feedback a { font : normal 10px/17px arial; color : #131313; }
#blog .feedback em { font : bold 15px/17px georgia; color : #131313; text-decoration : none; }

#presenceweb ul { padding-left : 10px; padding-top : 75px; width : 130px; text-align : center; background : white; padding-bottom : 75px; }

#presenceweb ul li { display : inline; }
#presenceweb ul li a { display : block; width : 16px; height : 16px; background : url('/images/webpresence/pw_sprites.png'); float : left; margin-right : 6px;}

#presenceweb ul li.twitter a { background-position : -10px -10px;}
#presenceweb ul li.twitter a:hover { background-position : -10px -36px;}
#presenceweb ul li.facebook a { background-position : -36px -10px;}
#presenceweb ul li.facebook a:hover { background-position : -36px -36px;}
#presenceweb ul li.flickr a { background-position : -62px -10px;}
#presenceweb ul li.flickr a:hover { background-position : -62px -36px;}
#presenceweb ul li.youtube a { background-position : -114px -10px;}
#presenceweb ul li.youtube a:hover { background-position : -114px -36px;}
#presenceweb ul li.dailymotion a { background-position : -140px -10px;}
#presenceweb ul li.dailymotion a:hover { background-position : -140px -36px;}

/* #presenceweb ul li { display : inline; padding-right:6px;}
#presenceweb ul li a img.over { display : none; }
#presenceweb ul li a:hover img { display : none; }
#presenceweb ul li a:hover img.over { display : inline; } */


hr.clearer { visibility : hidden; clear : both; }

#poles { margin-top : 35px; padding-bottom : 20px; padding-left : 10px; background : white; width : 130px;}
#poles li { margin-bottom : 4px; font : normal 11px/11px arial; text-decoration : none; color : #6f6f6f; }
#poles li img { padding-right : 5px; }
#poles li span { vertical-align : 100%; font : normal 11px/11px arial; }
#poles a { text-decoration : none; color : #6f6f6f;}
#poles a span { text-decoration : underline; }
#poles a:hover span { color : black; }

#contacts { padding-top : 5px; padding-left : 10px; padding-right : 10px; background : white; font : normal 11px/14px arial;  color : #6f6f6f; width : 120px; }
#contacts p { margin-top : 10px; }
#contacts a { color : #6f6f6f; }
#contacts a:hover { color : black; }

#anges_trombi { position : absolute; left : 140px; top : 501px; z-index : 4; width : 490px; height : 31px; display : none;}
#anges_trombi .control .prev { position : absolute; top : 0; left : 0;   cursor : pointer; }
#anges_trombi .control .next { position : absolute; top : 0; right : 0;  cursor : pointer; }
#anges_trombi .control .close { position : absolute; top : 0; right : 0;  cursor : pointer; }
#anges_trombi .slideshow { margin : 0px 30px 0 18px; padding : 0; width : 438px; background : black; height : 104px; overflow:hidden;  border-left : 2px solid black; border-right : 2px solid black;}
#anges_trombi .slideshow ul { width : 30000px; }
#anges_trombi .slideshow li { padding : 2px 1px; float : left; }
#anges_trombi .slideshow img { height : 100px; /*27px; */ }

#anges_status div { display : none; margin-left : 18px; padding : 6px 4px; width : 434px; background : black; font : normal 11px/12px arial; color : white;}

#photos { position : absolute; left : 140px; top : 501px; z-index : 4; width : 490px; height : 31px; display : none;}
#photos .control .prev { position : absolute; top : 0; left : 0; cursor : pointer;  }
#photos .control .next { position : absolute; top : 0; right : 0;  cursor : pointer; }
#photos .control .close { position : absolute; top : 0; right : 0;  cursor : pointer; }
#photos .slideshow { margin : 0px 30px 0 18px; padding : 0; width : 438px; background : black; height : 104px; overflow:hidden;  border-left : 2px solid black; border-right : 2px solid black; }
#photos .slideshow ul { width : 30000px; }
#photos .slideshow li { padding : 2px 1px; float : left; }
#photos .slideshow img { height : 100px; }

#spacer_timeline { display : block; width : 320px; height : 409px; float : left; margin-top : 18px; }

#filler { width : 100%; height : 400px; position : absolute; top : 18px; }

#cartouche h2, #clock, #clock_uberlayer { cursor : pointer; }
#clock, #clock_uberlayer { display : block; width : 26px; height : 26px; z-index : 100; }
#clock_uberlayer { z-index : 999; position : absolute; top : 0; left : 0; background : transparent;}
#clock object { z-index : 101; }