body { margin: 0; padding: 0; color: #6B6B6B; font: 0.75em Arial, Verdana, Geneva, sans-serif; background: #2D2D2D url(images/bg.jpg); }
#c1 label { display: block; margin: 13px 0 0; }
a { outline: none; }
img { border: 0; }
ul, li { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; padding: 0; }
h1 { color: #3F3F3F; margin-bottom: 10px; padding-bottom: 3px; font-size: 1.8em; font-weight: normal; background: url(images/noir_2_50.png) repeat-x bottom left; }

/*COLORATION AGES*/
h1.categorie, div.title { color: #3F3F3F; font-size: 1.8em; font-weight: normal; margin-bottom: 10px; padding-bottom: 3px; -moz-border-radius: 5px; margin-left: -22px; padding: 5px 0px 5px 22px; width: 645px; background-image: none; background: #E5E5E5; }
#a0et3ans h1.categorie { background: #92D125; color: #FFF; text-shadow: 1px 1px 1px #222222; }
#a3et6ans h1.categorie { background: #34B5E4; color: #FFF; text-shadow: 1px 1px 1px #222222; }
#a6et8ans h1.categorie { background: #EA6CA5; color: #FFF; text-shadow: 1px 1px 1px #222222; }
#a8et12ans h1.categorie { background: #FFC600; color: #FFF; text-shadow: 1px 1px 1px #222222; }
#a8et12ans h1.categorie { background: #FFC600; color: #FFF; text-shadow: 1px 1px 1px #222222; }
#atouslesages h1.categorie { background: #8C8CDF; color: #FFF; text-shadow: 1px 1px 1px #222222; }

/*LIBRARY*/
.clear { clear: both; display: block; height: 1px; margin: 0; padding: 0; overflow: hidden; }
.hid { display: none; }
.mt10 { margin-top: 10px; }

/*GLOBAL*/
#global { width: 980px; margin: 0 auto 20px; position: relative; }
#top { position: relative; width: 100%; height: 195px; }

#logo { display: block; position: absolute; top: 32px; left: -10px; width: 240px; height: 100px; text-indent: -1000em; background: url(images/logo.png) no-repeat; overflow: hidden; }

#logo { top: 10px; left: 0; width: 202px; height: 127px; background: url(images/logo_jds.png); }
#logo_hack { display: block; position: absolute; top: 96px; left: 78px; width: 73px; height: 35px; text-indent: -1000em; background: url(images/spacer.gif); overflow: hidden; }



#top .pub_mega { position: absolute; top: 25px; right: 0; width: 728px; height: 90px; padding: 5px; background: url(images/pub_mega.png); }
#clouds { background: url(images/clouds.jpg) no-repeat center top; }

/*MENU*/
#menu { position: absolute; bottom: 0; left: 15px; width: 540px; height: 57px; }
#menu ul { display: block; width: 100%; height: 60px; }
#menu ul li { display: block; float: left; width: 102px; height: 60px; margin-right: 6px; font-size: 1.3em; font-weight: bold; overflow: hidden; }
#menu ul li a { font-size: 0.8em; display: block; width: 102px; height: 42px; padding-top: 15px; text-align: center; color: #FFF; text-decoration: none; text-shadow: 1px 1px 1px #222; background: url(images/menu.png); }
#menu ul li a strong { display: block; height: 22px; font-size: 1.5em; }
#menu ul li.on a, #menu ul li a:hover { height: 52px; padding-top: 5px; }
#menu ul li a.menu_1 { background-position: 0 -60px; }
#menu ul li a.menu_2 { background-position: -102px -60px; }
#menu ul li a.menu_3 { background-position: -204px -60px; }
#menu ul li a.menu_4 { background-position: -306px -60px; }
#menu ul li a.menu_5 { background-position: -407px -60px; }
#menu ul li.on a.menu_1, #menu ul li a.menu_1:hover { background-position: 0 0px; }
#menu ul li.on a.menu_2, #menu ul li a.menu_2:hover { background-position: -102px 0px; }
#menu ul li.on a.menu_3, #menu ul li a.menu_3:hover { background-position: -204px 0px; }
#menu ul li.on a.menu_4, #menu ul li a.menu_4:hover { background-position: -306px 0px; }
#menu ul li.on a.menu_5, #menu ul li a.menu_5:hover { background-position: -407px 0px; }

/*RECHERCHE*/
#recherche { position: absolute; top: 153px; right: 0; width: 420px; height: 37px; background: url(images/recherche.png); overflow: hidden; }
#recherche form { display: block; position: relative; width: 420px; height: 37px; }
#recherche form #search { position: absolute; top: 10px; left: 41px; width: 228px; color: #3F3F3F; font-size: 1.2em; background: url(images/spacer.gif); border: 0; }
#recherche form label { position: absolute; top: 5px; left: 5px; display: block; width: 30px; height: 27px; background: url(images/spacer.gif); }
#recherche form #btn { position: absolute; top: 5px; right: 5px; display: block; width: 46px; height: 27px; color: #FFF; font-weight: bold; text-shadow: 1px 1px 1px #222; text-transform: uppercase; background: url(images/spacer.gif); border: 0; cursor: pointer; }
.content_top { width: 980px; height: 5px; display: none; overflow: hidden; }
.content_mid { width: 970px; padding: 0 5px; background: #FFF; -moz-border-radius: 10px; background: #FFF url(images/sidebar.png) repeat-y right top; }
.content_foot { width: 980px; height: 5px; display: none; background: url(images/global_top_foot.png) 0 -5px; overflow: hidden; }
#c1 { float: left; width: 635px; padding: 10px 0 10px 10px; }
#c1 .submit input { background: url(images/button.jpg) no-repeat left top; width: 142px; height: 33px; color: #FFF; font-size: 14px; font-weight: bold; text-align: center; border: none; }
#c1 .input .error-message { display: none; }
#c1 .input.error .error-message { display: block; color: #C90B0B; }
#c1 .input textarea { width: 100%; border: 1px solid #BFBFBF; }
#c1 .input input { border: 1px solid #BFBFBF; -moz-border-radius: 2px; -webkit-border-radius: 2px; padding: 5px; }
#c1 .input.error input, #c1 .input.error textarea { border-color: #F16D6D; }
#c2 { float: right; width: 310px; }

/*BLOC 300*/
.bloc_300_top { width: 310px; height: 5px; background: url(images/bloc_300_top_foot.png) 0 0; overflow: hidden; }
.bloc_300_mid { width: 300px; padding: 0 5px; background: url(images/bloc_300_mid.png) repeat-y; }
.bloc_300_foot { width: 310px; height: 5px; background: url(images/bloc_300_top_foot.png) 0 -5px; overflow: hidden; }

/*BLOC 635*/
.bloc_635_top { width: 635px; height: 5px; background: url(images/bloc_635_top_foot.png) 0 0; overflow: hidden; }
.bloc_635_mid { width: 625px; padding: 0 5px; background: url(images/bloc_635_mid.png) repeat-y; }
.bloc_635_foot { width: 635px; height: 5px; background: url(images/bloc_635_top_foot.png) 0 -5px; overflow: hidden; }

/*SLIDER*/
#slider { cursor: pointer; overflow: hidden; background: url(images/carrousel.png) no-repeat left top; width: 625px; height: 220px; position: relative; }
#slider img { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 5; }
#slider .navigation { z-index: 8; }
#slider .slide { display: block; top: 0px; left: 0px; position: absolute; width: 625px; height: 220px; overflow: hidden; }
#slider span { text-indent: 15px; background: url(images/mask.png); z-index: 9; left: 0; bottom: 0; position: absolute; height: 32px; line-height: 32px; display: block; color: #FFFFFF; font-weight: bold; width: 100%; }
#slider a { text-decoration: none; }
#slider ul.navigation { display: block; bottom: 38px; right: 14px; position: absolute; }
#slider ul.navigation li { margin-right: 3px; list-style: none; background: url(images/carrousel-nav.png) no-repeat left top; height: 12px; width: 12px; float: left; text-indent: -9999px; cursor: pointer; }
#slider ul.navigation li:hover, #slider ul.navigation li.active { background: url(images/carrousel-nav.png) no-repeat right top; }

/*LIST VIDEOS*/
.list_videos { width: 635px; margin: 0; }
.listrelative { width: 206px; float: left; margin-right: 8px; line-height: 18px; }
.listrelative li { list-style: disc; margin-left: 15px; }
.listrelative li a { color: #6B6B6B; text-decoration: none; }
.listrelative li a:hover { text-decoration: underline; color: #000; }
.listrelative.last { margin-right: 0; }
ul.mosaic li.first { margin-left: 0; clear: both; }
ul.mosaic li { display: block; position: relative; float: left; width: 140px; margin-left: 25px; overflow: hidden; }
ul.mosaic li h2 { font-size: 1.2em; margin-bottom: 7px; text-align: center; margin-top: 5px; }
ul.mosaic li img { height: 101px; display: block; }
ul.mosaic li h2 a { text-decoration: none; color: #686868; }
ul.mosaic li .cadre { position: absolute; top: -1px; left: -1px; display: block; width: 140px; height: 105px; background: url(images/item.png) top left; }
ul.mosaic li:hover .cadre { background: none; width: 133px; height: 98px; border: 5px solid #DBDBDB; top: -2px; left: -2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*LIST VIDEOS + descr
ul.mosaicdescr li { display: block; position: relative; float: left; width: 310px; height: 90px; margin:0;  }
ul.mosaicdescr li .img{ float:left; width:100px; display:block; margin-right:10px;  }
ul.mosaicdescr li .img img{ float:left; width:100px; display:block; }
ul.mosaicdescr li h2{ float:left; display:block; width:200px; font-size:1.1em; margin-bottom:7px;  }
ul.mosaicdescr li h2 a{ text-decoration:none; color:#000;  }
ul.mosaicdescr li .cadre { position: absolute; top: 0; left: 0; display: block; width: 140px; height: 105px; background: url(images/item.png) top left; }
ul.mosaicdescr li .cadre { background-position: top right; }

LIST VIDEOS + descr DailyStyle*/
ul.mosaicdescr li.first { margin-left: 0; clear: both; }
ul.mosaicdescr li { display: block; position: relative; float: left; width: 140px; margin-left: 25px; overflow: hidden; }
ul.mosaicdescr li h2 { font-size: 1.1em; margin: 7px 0; }
ul.mosaicdescr li img { height: 101px; display: block; }
ul.mosaicdescr li h2 a { text-decoration: none; color: #000; }
ul.mosaicdescr li .cadre { position: absolute; top: -1px; left: -1px; display: block; width: 140px; height: 105px; background: url(images/item.png) top left; }
ul.mosaicdescr li:hover .cadre { background-position: top right; }
ul.mosaicdescr li .desc { padding-bottom: 25px; display: block; }

/*Colorisation par catégories*/
#a0et3ans ul.mosaic li .cadre { border-color: #92D125; }
#a3et6ans ul.mosaic li .cadre { border-color: #34B5E4; }
#a6et8ans ul.mosaic li .cadre { border-color: #EA6CA5; }
#a8et12ans ul.mosaic li .cadre { border-color: #FFC600; }
#atouslesages ul.mosaic li .cadre { border-color: #8C8CDF; }

/*LIST CATS*/
.list_cats { width: 300px; margin: 0 0 10px; padding: 0 10px 0 15px; overflow: hidden; }
.list_cats ul { display: block; width: 300px; }
.list_cats ul li { display: block; width: 300px; border-bottom: 1px solid #BFBFBF; }
.list_cats ul li a { display: block; padding: 10px 7px; color: #6B6B6B; font-size: 1.2em; text-decoration: none; }
.list_cats ul li a:hover { background: url(images/spacer_blanc_30.png) repeat; color: #000; }

/*TITRE HERITAGE*/
.list_videos .titre, .list_cats .titre { color: #3F3F3F; margin: 10px 0 0; padding-bottom: 3px; font-size: 1.6em; font-weight: normal; background: url(images/noir_2_50.png) repeat-x bottom left; }
.list_videos .titre { margin-bottom: 10px; }

/*PUBS*/
.pub_mega .pub_content { width: 728px; height: 90px; background: #CCC; }
.pub_pave .pub_content { width: 300px; height: 250px; background: #CCC; }
#pub_sky { background: none; top: 500px; height: 600px; position: absolute; right: -160px; width: 160px; }

/*ARIANE*/
#ariane { margin-bottom: 5px; font-size: 0.9em; }
#ariane strong { font-size: 1.2em; }
#ariane a { color: #000; text-decoration: none; }
#ariane a:hover { text-decoration: underline; }
#desc { margin: 0 0 20px; font-size: 1.2em; }

/*PLAYER*/
#player { width: 625px; }

/*TAGS*/
#tags { padding: 10px 0 10px 40px; font-size: 1.2em; background: url(images/ico_tags.png) no-repeat 0 0; }
#tags a { color: #000; text-decoration: none; }
#tags a:hover { text-decoration: underline; }

/*FOOT*/
#foot { padding: 10px 0; text-align: center; }
#foot a { color: #000; text-decoration: none; }
#foot a:hover { text-decoration: underline; }

/*MULTIPAGE*/
.pager { clear: both; width: 100%; height: 30px; margin: 5px 0 0; padding: 10px 0 0; }
.pager ul { text-align: right; }
.pager ul li { display: inline; margin: 0 5px; font-size: 1.2em; }
.pager ul li a { color: #6B6B6B; text-decoration: none; padding: 5px 7px; border: 1px solid #CCC; }
.pager ul li.pager_on a, .pager ul li a:hover { color: #FFFFFF; background: #FEB032 url(images/spacer_blanc_30.png) repeat-x; }

/*NEXT / PREV*/
.next, .prev { width: 300px; margin-bottom: 10px; color: #000; font-size: 1.3em; text-decoration: none; }
.next { float: right; text-align: right; }
.prev { float: left; }

/*Uploader*/
#uploadBar { position: relative; width: 635px; height: 11px; background: #f2f2f2; border: 1px solid #bfbfbf; }
#uploadBar .progress { position: absolute; top: 0; left: 0; width: 0%; height: 11px; color: #FFF; background: url(images/loader.gif) repeat-x; overflow: hidden; border-right: 1px solid #fde0ed; }
#uploadBar .progress span { width: 600px; text-indent: 22px; display: block; }

/*DEBUG*/
.cake-sql-log { width: 100%; background-color: #000; color: #FFF; border-collapse: collapse; }
.cake-sql-log caption { background: #900; color: #FFF; }
.cake-sql-log:hover { top: auto; bottom: 0; }
.cake-sql-log td { padding: 3px; border: 1px solid #999; background-color: #EEE; color: #000; }


#VideoUploadForm .text { width: 250px; }



.btn_bleu { display: inline; margin: 0; padding: 0; color: #fff; font-weight: bold; background: none; border: 0; cursor: pointer; }
.btn_bleu .span1 { display:block; float:left; height:26px; margin:0; padding:0 0 0 5px; text-decoration:none; background: url(images/btn-left.gif) no-repeat top left; border: 0; }
.btn_bleu .span2 { position: relative; display:block; float:left; height:22px; padding: 4px 10px 0 5px; background: url(images/btn-right.gif) no-repeat top right; }
.btn_bleu .videocam { position: absolute; top: -9px; left: 0; display: block; float: left; width: 37px; height: 32px; background: url(images/btn-cam.png); }
.btn_bleu .flechesave { position: absolute; top: -9px; left: 0; display: block; float: left; width: 37px; height: 34px; background: url(images/btn-fleche.png); }