/* Les éléments HTML en général
-------------------------------- */
* {
	margin:0;
	padding:0;
	outline:none;
	box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
}

@viewport {width:device-width; zoom:1;}
@-ms-viewport {width:device-width;}

html, body {
	width:100%;
	margin:0;
	padding:0;
	background:rgba(255,255,255,0) url('site/body-bg.png') no-repeat 5% 155px fixed;
	border-top:1px solid #1B6AA4;
	font-family:Arial, Sans-Serif;
	font-size:10pt;
	font-weight:normal;
	text-align:center;
	color:#333;
}

@font-face {
		font-family:'Roboto';
		src:url('font/Roboto-Regular.ttf') format('truetype');
		font-weight:normal;
		font-style:normal;
}
@font-face {
		font-family:'Roboto';
		src:url('font/Roboto-Italic.ttf') format('truetype');
		font-weight:normal;
		font-style:italic;
}
@font-face {
		font-family:'Roboto';
		src:url('font/Roboto-Bold.ttf') format('truetype');
		font-weight:bold;
		font-style:italic;
}
@font-face {
		font-family:'Roboto';
		src:url('font/Roboto-BoldItalic.ttf') format('truetype');
		font-weight:bold;
		font-style:italic;
}

@font-face {
		font-family:'Texgyreadventor';
		src:url('font/texgyreadventor-regular.eot');
		src:url('font/texgyreadventor-regular.eot?#iefix') format('embedded-opentype'),
				url('font/texgyreadventor-regular.woff') format('woff'),
				url('font/texgyreadventor-regular.ttf') format('truetype');
		font-weight:normal;
		font-style:normal;
}
@font-face {
		font-family:'Texgyreadventor';
		src:url('font/texgyreadventor-bold.eot');
		src:url('font/texgyreadventor-bold.eot?#iefix') format('embedded-opentype'),
				url('font/texgyreadventor-bold.woff') format('woff'),
				url('font/texgyreadventor-bold.ttf') format('truetype');
		font-weight:bold;
		font-style:normal;
}

a {color:#000; text-decoration:none;}
a:hover {color:#900; text-decoration:underline;}

h1 {font-weight:bold;}
h2 {font-family:'Texgyreadventor', sans-serif; font-weight:normal;}
h3 {font-family:'Texgyreadventor', sans-serif; font-weight:normal;}

div {margin:0; padding:0; border:0;}
p {margin:0; padding:0; border:0;}

img {border:0;}

/* Les ID spécifiques
-------------------------------- */
#barre {position:absolute; top:2px; left:0; width:100%; height:155px; background:#FFF url('site/bg.jpg') repeat-x top left; text-indent:-5000px; z-index:1;}

#page {display:block; position:relative; width:960px; margin:0 auto; text-align:left; font-family:Roboto, Arial, Sans-Serif; font-size:1em; font-weight:normal; z-index:10;}
#main {clear:both; display:inline-block; float:left; width:100%; padding:0 10px;}

/*-------- Header --------*/
#header {clear:both; display:inline-block; width:100%; height:155px; padding:0 10px;}
#hleft {float:left; width:200px; height:155px; position:relative;}
#hleft h1 {clear:both; width:200px; height:155px; background:transparent url('site/logo-judo.png') no-repeat top left; text-indent:-5000px; margin:0; padding:0; overflow:hidden;}
#hleft #clogo {position:absolute; top:0; left:10px; width:180px; height:145px; z-index:50; overflow:hidden;}
#hleft #clogo a {position:absolute; top:0; left:0; width:180px; height:145px; background:transparent url('site/px.gif') no-repeat left top; text-indent:-5000px; z-index:50;}
#hright {float:right; height:155px;}
#hright h2 {clear:both; height:76px; background:transparent url('site/tagline-judo.png') no-repeat right top; text-indent:-5000px; margin:0; padding:0; overflow:hidden;}
#hright #navtop {clear:both; height:28px; margin:4px 0 0;}
#hright #breadcrumbs {clear:both; margin:14px 0 0 7px;font-size:1.1em;}

/* menu top */
.menu {position:relative; margin:0; z-index:100; text-align:center;}
.menu ul {padding:0; margin:0 auto; list-style-type:none;}
.menu ul li {float:left; margin-right:0px; position:relative;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; padding:0 15px; text-align:center; color:#FFF; font-family:'Texgyreadventor', sans-serif; font-size:1.5em; background:transparent url('site/nav-sep-red.png') no-repeat left 50%;}
.menu ul li ul {display:none;}

.menu ul li.first a, .menu ul li a.first {background:transparent; padding-left:0;}
.menu ul li.last a, .menu ul li a.last {padding-right:0;}
.menu ul li.actif a, .menu ul li a.choose {color:#600;}
.menu ul li:hover a {color:#300;}

/*-------- page --------*/
#left {float:left; width:250px; padding:0 2px; position:sticky; top:0;}
#corps {float:right; width:650px;}

/*-------- Nav left --------*/
#nav {clear:both; width:100%;}
#menuleft {width:100%; background:#FFF; border:1px dashed #900; text-align:center; padding:2px; margin-top:18px; margin-bottom:10px;}
#menuleft h3 {clear:both; margin:0; margin-bottom:10px; padding-left:10px; text-align:left; color:#900; font-size:1.4em;}
#menuleft h3 a {color:#900;}
#menuleft div {clear:both; width:100%; padding:0 0 0 5px;}
#menuleft ul {margin:0; padding:0; text-align:left; list-style-type:none;}
#menuleft ul li {margin:0; padding:5px 0;}
#menuleft ul li a {font-weight:normal; text-decoration:none; padding:0;}
#menuleft ul li.navact a {font-style:normal; color:#900; font-weight:bold !important;}
#menuleft ul li.navact > a:before {color:#900; content:"# "; font-size:0.8em;}
#menuleft ul li a:hover {color:#C00; text-decoration:underline;}

#menuleft ul li ul {padding-top:5px; padding-bottom:5px;}
#menuleft ul li ul li {padding-top:0; padding-left:4px;}
#menuleft ul li ul li a {font-weight:normal !important;}
#menuleft ul li.active ul li a {font-weight:normal !important; color:#900 !important;}
#menuleft ul li.active ul li.navact a {font-weight:bold !important; color:#900 !important;}
#menuleft ul li.active ul li.navact > a:before {color:#900; content:"# "; font-size:0.8em;}

#adr {clear:both; width:100%; background:#FFF; margin:60px 0 10px; padding:5px; color:#200; border:1px dashed #900;}
#adr div {clear:both; width:100%; padding:3px 0;}
#adr h3 {clear:both; width:100%; margin:0; padding-bottom:4px; color:#900; font-size:1.4em !important;}
#adr p {font-size:1em;}
#adr strong {font-size:1.3em;}
#adr i strong {font-size:1em; font-weight:normal;}
#adr a {color:#700;}

/*-------- Articles --------*/
#article {clear:both; float:left; width:100%; padding:10px 0;}

#art-tit {clear:both; float:left; width:100%; margin:15px 0 10px;}
#art-tit h2 {clear:both; border-bottom:1px solid #600; color:#900; padding-bottom:2px; text-align:left; font-size:1.8em;}
#art-txt {overflow:hidden; width:100%;}
#art-txt h3 {clear:both; color:#300; padding:5px 0;}
#art-txt h4 {color:#600;}
#art-txt p {clear:both; padding:5px 0; font-size:1.2em; text-align:justify; line-height:1.6em;}
#art-txt p.chapo {font-weight:bold;}
#art-txt .jyvais {font-weight:bold;}
#art-txt a {color:#600; font-weight:bold; text-decoration:underline;}
#art-txt a:hover {color:#F00; font-weight:bold; text-decoration:underline;}
#art-txt ul {margin:0 0 0 30px; padding:0 0 0 20px; text-align:left; list-style-type:disc;}
#art-txt ul li {margin:0; padding:3px 0px; font-size:1.2em;}
#art-txt ul li ul {list-style-type:circle;}
#art-txt ul li ul.diam {list-style-type:none;}
#art-txt ul li ul.diam li::before {content:"\25C7"; padding-right:5px}
#art-txt ul li ul li {margin:0; padding:3px 0px; font-size:1em !important;}
#art-txt ul.nodisc {margin:0 0 0 15px; list-style-type:none;}
#art-txt ol {margin:0 0 0 16px; padding:0 0 0 12px; text-align:left; list-style-type:decimal;}
#art-txt ol li {margin:0; padding:4px 0px; font-size:1.1em;}
#art-txt p > img {border-radius:10px;}
#art-txt .photoprez {display:block;margin:5px auto;}
#art-txt .photoprez > img {border-radius:10px; max-width:100%; height:auto;}


#art-txt .news {margin:0; padding:5px 0; border-bottom:1px dashed #EEE;}
#art-txt .news:last-child {border-bottom:none !important;}

#art-cpr {clear:both; margin:10px 0; text-align:right;}

#art-fb {clear:both; width:100%; margin:20px 0 10px 0; text-align:right;}
#art-fb #fb {display:inline-block;}
#art-fb #fb img {vertical-align:middle;}

#refer {width:550px; margin:0 auto; text-align:center;}
#refer img {padding:20px;}

/*-- cas particuliers --*/
div.lcm {width:100%; margin:0 auto; text-align:center;}
div.lcm hr {margin:30px auto 0px; width:50%;}
div.lcm h2 {float:left; margin:20px 0 10px; padding:0; font-weight:bold; color:#900;}
div.lcm h3 {margin:12px 0 2px 0; padding:0; font-weight:bold;}
div.lcm h4 {float:left; margin:20px 0 10px; padding:0; font-weight:bold;}
div.lcm span.lcmdef {font-weight:bold;}

div.tenue {display:inline-block; width:100%; margin:0 auto; text-align:center;}
div.tenue .tenfigs {display:block; float:left; width:50%; margin:0 auto 20px; text-align:center;}
div.tenue .tenfigs img {max-width:270px; height:auto;}
div.tenue .tenfig {display:block; float:left; width:100%; margin:0 auto 20px; text-align:center;}
div.tenue .tenfig img {max-width:540px; height:auto;}
div.tenue figcaption {font-weight:bold;}

div.obi {display:inline-block; width:100%; margin:0 auto; text-align:center;}
div.obi h2 {display:inline-block; width:100%; margin:20px auto; font-weight:bold; color:#900;}
div.obi .obifig {display:block; float:left; width:100%; margin:0 auto 20px; text-align:center;}
div.obi .obifig img {max-width:540px; height:auto;}

div.atti {display:inline-block; width:100%; margin:0 auto; text-align:center;}
div.atti .attifigs {display:block; float:left; width:50%; margin:0 auto 20px; text-align:center;}
div.atti .attifigs img {max-width:270px; height:auto;}
div.atti .attifig {display:block; float:left; width:100%; margin:0 auto 20px; text-align:center;}
div.atti .attifig img {max-width:540px; height:auto;}
div.atti figcaption {font-weight:bold;}

#art-txt div.news a {text-decoration:none;}
#art-txt div.newsinfo {padding:8px 0; text-align:right;}
#art-txt div.newsls  {text-align:right; padding:5px 0;}
#art-txt div.newsls a  {padding-left:8px; background:transparent url('site/fle.gif') no-repeat center left;}

#art-txt table {clear:both; margin:0 auto;}

#burom {margin:0 auto;}
#burom td {vertical-align:top;}
#burom img {margin:5px 0 30px 0; border-radius:5px; padding:2px; border:1px solid #CCC;}

#burop {margin:0 auto;}
#burop td {vertical-align:top;}
#burop img {margin:5px 0 30px 0; border-radius:5px; padding:2px; border:1px solid #CCC;}

#sportif {margin:0 auto; text-align:center; width:100%;}
#sportif tr {}
#sportif td {vertical-align:top; width:50%; padding:10px 0;}
#sportif td img {margin:4px 0; padding:4px; border:1px solid #CCC; border-radius:5px;}

#regint h4 {font-variant:small-caps; font-size:1.3em;}
#regint ol {margin:0 0 0 16px; padding:0 0 0 12px; text-align:left; list-style-type:none;}
#regint ol li {margin:0; padding:10px 0px; font-size:1.2em; text-align:justify;}


/*-- Galerie Photo --*/
#Galerie {text-align:center; margin:5px 0;}
#Galerie .ph {display:inline-block; width:102px; height:102px; margin:4px; padding:2px; border:1px solid #CCC; border-radius:5px; text-align:center;}
#Galerie .pho {display:table-cell; width:96px; height:96px; vertical-align:middle; text-align:center;}
#Galerie .ph img {clear:both; border-radius:0;}

/* Les formulaires
-------------------------------- */
#formct {clear:both; float:left; width:100%; font-weight:bold;}
#formct * {margin:0; padding:0;}
#formct fieldset {display:inline-block; margin:5px 0; width:100%; border:none;}
#formct label {clear:both; float:left; width:160px; margin:0 0 10px;}
#formct img.required {margin:0 5px;}
#formct hr {border:none; height:1px; background:#FFF; margin:1em 10em;}
#formct input.BoxLblSaisie, #formct textarea.BoxTxtSaisie {
	width:300px; height:164px;
	background-color:#FFF;
	border:1px solid #CCC;
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
	transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s;
	border-radius:5px;
}
#formct input.BoxLblSaisie {height:22px; margin:0 0 5px}
#formct textarea.BoxTxtSaisie {height:164px;}
#formct textarea:focus, #formct input:focus {
    border-color:rgba(153, 0, 0, 0.6);
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(153, 0, 0, 0.4);
    outline:0 none;
}
#formct p {clear:both; text-align:center;}
#formct p.capc {clear:both; margin-left:100px; text-align:justify !important;}
#formct p.capc img {clear:both; margin-left:50px; text-align:center;}
#formct p.envbtn {clear:both; margin:20px 20px 0 0;}
#formct span.error {color:red !important;}

/*-------- Planning --------*/
#plan {border:2px double #369; width:90%; text-align:center; vertical-align:middle;}
#plan th {border:1px dashed #369; padding:5px 0; font-weight:bold;}
#plan th.jour {width:17%;}
#plan th.heur {width:22%;}
#plan th.cate {width:40%;}
#plan th.prof {width:21%;}
#plan th.jour1 {width:20%;}
#plan th.heur1 {width:25%;}
#plan th.cate1 {width:55%;}
#plan td {border:1px dashed #369; padding:5px 0; }
#plan td.bj1 {color:purple;}
#plan td.bj2 {color:olive;}
#plan td.pp1 {color:green;}
#plan td.pp2 {color:orange;}
#plan td.pou {color:blue;}
#plan td.ben {color:red;}
#plan td.min {color:maroon;}
#plan td.cad {color:navy;}
#plan span.bj1 {color:purple;}
#plan span.bj2 {color:olive;}
#plan span.pp1 {color:green;}
#plan span.pp2 {color:orange;}
#plan span.pou {color:blue;}
#plan span.ben {color:red;}
#plan span.min {color:maroon;}
#plan span.cad {color:navy;}

/*-------- Planning Compet --------*/
table.comp {border:2px double #369; width:550px; text-align:center; vertical-align:middle;}
table.comp th {border:1px dashed #369; padding:5px 0; font-weight:bold;}
table.comp td {border:1px dashed #369; padding:5px 0;}
table.comp tr.qual {background:#CFF;}
table.comp tr.kata {background:#9F9;}
table.comp tr.grade {background:#FC9;}
table.comp tr.uv {background:#FFC;}

/*-------- Planning Stage --------*/
#edt p {text-align:center; font-size:0.8em;}
table.stage {border:2px double #369; width:100%; text-align:center; vertical-align:middle;}
table.stage th {border:1px dashed #369; padding:5px 0; text-transform:uppercase; font-weight:800; width:15%;}
table.stage td {border:1px dashed #369; padding:5px 0;}
table.stage td.inti {font-weight:bold;}
table.stage td.debut {background:#CFF;}
table.stage td.midi {background:#CEB;}
table.stage td.fin {background:#FCA;}

/*------- Mentions Légales -------*/
.mentions h3 {font-size:1.4em; font-weight:600; color:#900 !important;}


/* Bas de Page
-------------------------------- */
/* #bottom {clear:both; width:100%; height:20px; margin-top:20px; border-top:3px solid #C00; padding:10px 0; background:transparent url('site/bg-bot.gif') repeat-x bottom left;} */
#bottom {clear:both; display:inline-block; width:100%; margin:10px 0 5px; border-top:3px solid #900; padding:10px;}
#copy {float:left; width:200px; text-align:left; font-family:'Texgyreadventor', Sans-Serif; font-size:1.1em; color:#100;}
#copy span {font-family:arial,Sans-Serif; font-size:1em;}
#navib {float:right; text-align:right;}
#navib ul {float:left; width:100%; margin:0; padding:0; list-style-type:none;}
#navib ul li {display:inline; margin:0; padding:0;}
#navib ul li a {height:100%; font-size:0.9em; font-weight:bold; color:#333; text-decoration:none;}
#navib ul li a span {margin:0; padding:0 4px 0 5px; border-left:solid 1px #C00;}
#navib ul li a span.first-child {border-left:none;}
#navib ul li a span.last-child {border-right:none;}
#navib ul li a:hover {color:#900;}

/* La HP
-------------------------------- */
#hp {float:left; width:100%;}

#hpleft {clear:both; float:left; width:600px; margin:20px 0 30px;}
#hpleft h2 {clear:both; float:left; width:100%; margin-top:0; margin-bottom:10px; padding:0 0 5px 5px; color:#900; font-size:1.4em !important; font-weight:bold; border-bottom:2px solid #900;}
#hpleft p {clear:both; float:left; width:100%; padding:0 0 5px 0;}
#hpleft ul {clear:both; margin-top:0; margin-left:20px; padding-top:0; padding-left:20px; text-align:left; list-style-type:disc; list-style-position:inside;}
#hpleft ul li {margin:0; padding-bottom:3px;}
/* #hpleft ul li.compet:before {content:url('site/glyphicons_045_calendar.png') " "; transform:scale(.5);}*/

#acthp {clear:both; width:100%; height:160px; margin:0; padding:0 0 5px 0; overflow:hidden;}
#acthp ul {list-style-type:square; color:#900;font-size:1.1em;}
#acthp ul li {list-style-image:url('site/ico-news.png'); height:22px;}
#acthp ul li a {vertical-align:top;}
#acthp ul li.new {list-style-image:url('site/ico-news.png');}
#acthp ul li.actu {list-style-image:url('site/ico-actu.png');}
#acthp ul li.info {list-style-image:url('site/ico-info.png');}
#acthp ul li.rdv {list-style-image:url('site/ico-alarm.png');}
#acthp ul li.compet {list-style-image:url('site/ico-calendar.png');}
#acthp ul li.result {list-style-image:url('site/ico-cup.png');}
#acthp ul li.photos {list-style-image:url('site/ico-photo.png');}
#acthp ul li.warning {list-style-image:url('site/ico-warning.png');}

#bnewshp {clear:both; width:100%; height:80px; margin:0; padding:0 0 20px 0; overflow:hidden;}
#bnewshp ul {clear:both; width:100%; height:35px; margin:0; padding:0; list-style-type:none; overflow:hidden;font-size:1.1em;}
#bnewshp ul li.warning {list-style-image:url('site/ico-warning.png');}
#bnewshp ul li, #bnewshp ul li p {margin:0; padding:0;}
#bnewshp ul li a, #bnewshp ul li p a {color:#000; text-decoration:underline; font-weight:bold;}
#bnewshp ul li a:hover, #bnewshp ul li p a:hover {color:#900; text-decoration:underline; font-weight:bold;}

#blochp {clear:both; float:left; width:100%; margin:10px 0 20px;}
#blochp ul {clear:both; margin-top:0; margin-left:15px; padding-left:0; text-align:left; list-style-type:disc; list-style-position:inside;font-size:1.1em;}

#zoomhp {float:left; width:270px; height:160px; margin:0; padding:0; overflow:hidden; background:#900; box-shadow:-4px 0 4px -4px #333 inset;}
#zoomhp h2 {color:#FFF; text-shadow:0 1px 0 rgba(0, 0, 0, 0.5); border-bottom:2px solid #FFF; padding-left:10px;}
#zoomhp ul, #zoomhp a {color:#FFF !important;}

#rezhp {float:right; width:310px; height:160px; margin:0; padding:0; overflow:hidden; background:#F0F0F0; box-shadow:4px 0 4px -4px #999 inset;}
#rezhp h2 {padding-left:10px;}

#acthp a.alerte {font-weight:bold !important; color:#900 !important; font-size:1.1em !important;}

#diapo {width:100%; position:relative; overflow:hidden; margin:20px 0;}
#diapo ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
#diapo li.bjqs-slide{position:absolute; display:none;}
#diapo ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
#diapo ul.bjqs-controls.v-centered li a{position:absolute;}
#diapo ul.bjqs-controls.v-centered li.bjqs-next a{right:0; color:#FFF;}
#diapo ul.bjqs-controls.v-centered li.bjqs-prev a{left:0; color:#FFF;}
#diapo ol.bjqs-markers{list-style:none; padding:0; margin:0; width:100%;}
#diapo ol.bjqs-markers.h-centered{text-align:center;}
#diapo ol.bjqs-markers li{display:inline;}
#diapo ol.bjqs-markers li a{display:inline-block;}
#diapo p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

#adrhp {clear:both; float:left; width:100%; padding:10px; border:1px solid #900; box-shadow:0 0 4px #888;}
#adrhp #adresse {clear:both; float:left; width:55%;}
#adrhp #planhp {float:right; width:45%; text-align:right; overflow:hidden;}
#adrhp h3 {clear:both; width:100%; margin:0; padding-bottom:4px; color:#900; font-size:1.4em !important; font-weight:normal !important;}
#adrhp p {font-size:1em;}
#adrhp strong {font-size:1.3em;}
#adrhp a {color:#900;}
#adrhp i strong {font-size:1em; font-weight:normal;}

#hpright {float:right; width:300px; margin:35px 0 5px;}
#mam {float:left; width:100%;}
#affiche {float:left; width:100%;}
#affiche img {margin-bottom:20px}
#affiche img.affhp {}
#code {float:left; width:100%;}
#part {float:left; width:100%; margin:20px 0 10px 0; text-align:center;}
#part div {display:inline-block;}
#part #partl {margin:0 35px;}
#partbot {float:left; width:100%; margin:40px 0 10px 0; text-align:center;}
#partbot div {display:inline-block;}
#partbot #fb img {vertical-align:middle;}
/* La HP - fin
-------------------------------- */

/* #Media Queries
-------------------------------- */
/* Bigger than standard 960 (devices and browsers) */
@media only screen and (min-width:960px) {
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width:800px) and (max-width:959px) {
#page {width:800px;}
.menu ul li a, .menu ul li a:visited {padding:0 12px; font-size:1.3em;}

#hpleft {clear:both; float:left; width:460px; margin:20px 0 30px;}
#blochp ul {margin-left:10px;}
#zoomhp {width:190px;}
#rezhp {float:right; width:330px; height:150px; margin:0; padding:0; overflow:hidden; background:#F0F0F0;}
#rezhp {width:260px;}
#hpright {float:right; width:300px; margin:35px 0 5px;}

#left {width:200px;}
#corps {width:550px;}
#corps #article #art-txt p > img {max-width:550px; height:auto;}
#corps #article #art-txt table {max-width:550px;}
#corps #article #art-txt .photoprez {max-width:550px;}

div.tenue .tenfigs img {max-width:270px; height:auto;}
div.tenue .tenfig img {max-width:540px; height:auto;}
div.obi .obifig img {max-width:540px; height:auto;}
div.atti .attifigs img {max-width:270px; height:auto;}
div.atti .attifig img {max-width:540px; height:auto;}
}

/* Tablet Portrait size to tablette (devices and browsers) */
@media only screen and (min-width:760px) and (max-width:799px) {
#page {width:760px;}
.menu ul li a, .menu ul li a:visited {padding:0 8px; font-size:1.3em;}

#hpleft {clear:both; float:left; width:460px; margin:20px 0 30px;}
#blochp ul {margin-left:10px;}
#zoomhp {width:190px;}
#rezhp {width:260px;}
#hpright {float:right; width:260px; margin:35px 0 5px;}
#mam img {max-width:260px; height:auto;}
#affiche img {max-width:260px; height:auto;}
#code img {max-width:260px; height:auto;}
#part #partl {margin:0 15px;}

#left {width:200px;}
#corps {width:510px;}
#corps #article #art-txt p > img {max-width:510px; height:auto;}
#corps #article #art-txt table {max-width:510px;}
#corps #article #art-txt .photoprez {max-width:510px;}

div.tenue .tenfigs img {max-width:250px; height:auto;}
div.tenue .tenfig img {max-width:510px; height:auto;}
div.obi .obifig img {max-width:510px; height:auto;}
div.atti .attifigs img {max-width:250px; height:auto;}
div.atti .attifig img {max-width:510px; height:auto;}
}

/* Tablet Landscape size (devices and browser) */
@media only screen and (min-width:480px) and (max-width:759px) {
html, body {border-top:none;}
#page {width:480px;}

#barre {display:none;}
#header {padding:0; padding-top:5px;}
#hleft {width:140px; height:145px; margin-left:40px;}
#hleft h1 {width:140px; height:145px; background:transparent url('site/logo-jci-small.png') no-repeat top left;}
#hleft #clogo {left:0; width:140px; height:145px;}
#hleft #clogo a {width:140px; height:145px;}
#hright {width:160px; margin-right:40px;}
#hright h2 {display:none;}
#hright #breadcrumbs {display:none;}
#hright #navtop {display:inline-block; height:100%; margin:0; padding:5px 0; background:#C00;}
.menu ul li {width:100%;}
.menu ul li a, .menu ul li a:visited {padding:0; font-size:1.2em; background:none;}

#hpleft {clear:both; float:left; width:460px; margin:20px 0 30px;}
#blochp ul {margin-left:10px;}
#zoomhp {width:190px;}
#rezhp {width:260px;}
#hpright {clear:both; float:left; width:460px; margin:0 0 5px;}
#hpright #affiche {display:none;}
#hpright #code {display:none;}
#hpright #part {margin:0 0 5px;}
#hpright #part #partl {margin:0 80px;}

#left {width:460px;}
#page.rubm #left #nav {display:none;}
#page.rubm #left #adr {margin:20px 0 10px;}
#page.art #left #adr {margin:20px 0 10px;}
#corps {width:100%;}
#corps #article #art-txt p > img {max-width:440px; height:auto;}
#corps #article #art-txt table {max-width:460px;}
#corps #article #art-txt .photoprez {max-width:440px;}
#formct p.capc {margin-left:30px;}

div.tenue .tenfigs img {max-width:220px; height:auto;}
div.tenue .tenfig img {max-width:460px; height:auto;}
div.obi .obifig img {max-width:460px; height:auto;}
div.atti .attifigs img {max-width:220px; height:auto;}
div.atti .attifig img {max-width:460px; height:auto;}

#copy {clear:both; float:left; width:460px; text-align:center; margin-bottom:8px;}
#navib {clear:both; float:left; width:460px; text-align:center;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:479px) {
html, body {background:none; border-top:none;}
#barre {display:none;}
#page {width:320px;}
#header {padding:0; padding-top:3px;}
#hleft {width:140px; height:145px;}
#hleft h1 {width:140px; height:145px; background:transparent url('site/logo-jci-small.png') no-repeat top left;}
#hleft #clogo {left:0; width:140px; height:145px;}
#hleft #clogo a {width:140px; height:145px;}
#hright {width:160px;}
#hright h2 {display:none;}
#hright #breadcrumbs {display:none;}
#hright #navtop {display:inline-block; height:100%; margin:0; padding:5px 0; background:#C00;}
.menu ul li {width:100%;}
.menu ul li a, .menu ul li a:visited {padding:0; font-size:1.2em; background:none;}

#hpleft {clear:both; float:left; width:300px; margin:20px 0 30px;}
#hpleft ul {padding-left:0;}
#blochp ul {margin-left:10px;}
#zoomhp {width:300px; height:auto;}
#rezhp {clear:both; float:left; width:300px; height:auto; margin:10px 0 0 0;}
#hpright {clear:both; float:left; width:300px; margin:0 0 5px;}
#hpright #affiche {display:none;}
#hpright #code {display:none;}
#hpright #part {margin:0 0 5px;}
#hpright #part #partl {margin:0 30px;}

#left {width:300px;}
#page.rubm #left #nav {display:none;}
#page.rubm #left #adr {margin:20px 0 10px;}
#page.art #left #adr {margin:20px 0 10px;}
#corps {width:100%;}
#corps #article #art-txt p > img {max-width:280px; height:auto;}
#corps #article #art-txt table {max-width:300px;}
#corps #article #art-txt .photoprez {max-width:280px;}
#sportif td img {width:auto; height:140px;}
#burom img {width:60px; height:auto;}
#burop img {width:60px; height:auto;}

div.tenue .tenfigs {width:100%;}
div.tenue .tenfigs img {max-width:300px; height:auto;}
div.tenue .tenfig img {max-width:300px; height:auto;}
div.obi .obifig img {max-width:300px; height:auto;}
div.atti .attifigs img {max-width:300px; height:auto;}
div.atti .attifig img {max-width:300px; height:auto;}

#formct input.BoxLblSaisie {width:100%;}
#formct textarea.BoxTxtSaisie {width:100%;}
#formct hr {display:none;}
#formct p.capc {margin-left:0;}

#copy {clear:both; float:left; width:300px; text-align:center; margin-bottom:8px;}
#navib {clear:both; float:left; width:300px; text-align:center;}
}



/* Les classes spécifiques
-------------------------------- */
.divL, .justifyleft {float:left;}
.divR, .justifyright {float:right;}
.divC {clear:both;float:left;}
.imgL {float:left; margin:0; margin-right:15px;}
.imgR {float:right; margin:0; margin-left:15px;}
.imgC {clear:both; border:0; margin:0 auto; padding:0;}
.ls  {float:right; padding-left:10px; background:transparent url('site/fle.gif') no-repeat center left;}
div.sep  {clear:both; float:left; width:100%; height:10px; margin:15px 0; background:transparent url('site/sep.gif') no-repeat top center;}
.dpn {display:none;}
.source {font-style:italic;font-size:0.8em;}
.photo {margin:4px; padding:4px; border:1px solid #CCC;}
.photoprez {text-align:center;}
.text-center {text-align:center !important;}
.rouge {color:#900;}
.noir {color:#000;}
.blanc {color:#FFF;}
.grisc {color:#F0F0F0;}
.grisf {color:#CCC;}
.big {font-size:1.2em !important;}
.bold {font-weight:bold;}