MediaWiki:Common.css

/* Le CSS placé ici sera appliqué à tous les habillages. */

body { background:url(//jolstatic.fr/wiki/images/camelotunchained/9/98/Bg.jpg) no-repeat fixed center top #000000;  background-size: cover; }
#mw-page-base { background:none; }
#p-logo, #p-logo a { height:160px }
#p-logo { top:-160px }
div #mw-panel { top: 203px }
#p-logo a { background-size:190px 100px; }
#p-personal { background:rgba(255,255,255,.85); padding:0 1em 2px 1em; }
div#content { background:rgba(255,255,255,.85); }
div#footer { background:rgba(255,255,255,.5); }
.entete { width:80%; text-align:center; background:#f9f9f9; padding:1em; margin:1.2em auto .6em auto; border:1px solid #ddd; }
pre { overflow: auto; }

/* ===================================================== */
/* grille responsive                                      */
/* ===================================================== */
.rwd { }
.rwd *, 
.rwd *:before, 
.rwd *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.rwd .left { float: left; }
.rwd .right { float: right; }
.rwd .text-left { text-align: left; }
.rwd .text-right { text-align: right; }
.rwd .text-center { text-align: center; }

.row { width:auto; max-width:1400px; min-width: 400px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }
.row.collapse .column, .row.collapse .columns { padding: 0; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }
.row .row.collapse { margin: 0; }

.column, .columns { float: left; min-height: 1px; padding: 0 10px; position: relative; }
.column.centered, .columns.centered { float: none; margin: 0 auto; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }

.one, .row .one { width: 8.33333%; }
.two, .row .two { width: 16.66667%; }
.three, .row .three { width: 25%; }
.four, .row .four { width: 33.33333%; }
.five, .row .five { width: 41.66667%; }
.six, .row .six { width: 50%; }
.seven, .row .seven { width: 58.33333%; }
.eight, .row .eight { width: 66.66667%; }
.nine, .row .nine { width: 75%; }
.ten, .row .ten { width: 83.33333%; }
.eleven, .row .eleven { width: 91.66667%; }
.twelve, .row .twelve { width: 100%; }

.rwd img { height:auto!important; width:auto!important; }
.rwd img, 
.rwd object, 
.rwd embed { max-width: 100%; }
.rwd img { -ms-interpolation-mode: bicubic; }
.rwd #map_canvas img,
.rwd .map_canvas img { max-width: none!important; }
.rwd input[type="text"], .rwd input[type="password"], .rwd input[type="date"], .rwd input[type="datetime"], .rwd input[type="email"], .rwd input[type="number"], .rwd input[type="search"], .rwd input[type="tel"], .rwd input[type="time"], .rwd input[type="url"], .rwd textarea { width: 100%!important; }

.row { *zoom: 1; }
.row:before, 
.row:after { content: " "; display: table; }
.row:after { clear: both; }

@media only screen and (max-width:800px) { /* Global Misc --- */
  .rwd .left, 
  .rwd .right { float: none; }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  .column, .columns { width: auto !important; float: none; }
  .column:last-child, .columns:last-child { float: none; }
  [class*="column"] + [class*="column"]:last-child { float: none; }
  .column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
  .column:after, .columns:after { clear: both; }
}

/* ===================================================== */
/* STYLES DE BASE POUR TOUS LES WIKIS                    */
/* ===================================================== */
/* navbox */
.navbox { border:1px solid #aaa; background-color:#f9f9f9; border-spacing:0; clear:both; font-size:88%; margin:1em auto auto; padding:0; text-align:center; width:100%; }
.navbox table, .navbox-subgroup { border-spacing: 1px; }
.navbox + .navbox { margin: 1px 0 0; }
.navbox tr, .navbox-columns-table tr { background-color: #fff; }
.navbox table td { background-color: #f9f9f9; }
.navbox-even { background-color: #f9f9f9; }
.navbox-odd { background-color: #f9f9f9; }
.navbox-title, .navbox-abovebelow, table.navbox th { background-color:#f2f2f2; border-color: #aaa; border-style: solid; border-width: 1px; padding-left: 1em; padding-right: 1em; text-align: center; }
.navbox-group { background:#f2f2f2; border: 1px solid #aaa; font-weight: bold; padding-left: 1em; padding-right: 1em; text-align: right; white-space: nowrap; }
.navbox-subgroup { background-color: #fff; }
.navbox-list { border-color: #f9f9f9; }
.navbox-title, navbox th { }
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background-color:#f2f2f2 !important; }
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color:#f2f2f2 !important; }
.navbox .collapseButton { width: 6em; }
.navbox .collapseButton { float: right; font-weight: normal; text-align: right; width: auto; }
 
/* ambox */
.ambox { background-color: #f9f9f9; border-color: #BBBBAA; border-style: solid; border-width: 1px 1px 1px 10px; margin: 8px 10% 12px; padding: 2px 10px; }
.ambox-blue { border-color: #1E90FF; }
.ambox-red { border-color: #B22222; }
.ambox-orange { border-color: #F28500; }
.ambox-yellow { border-color: #F4C430; }
.ambox-purple { border-color: #9932CC; }
.ambox-gray { border-color: #BBBBAA; }
.ambox-green { border-color: #228B22; }
.ambox-image { padding-right: 10px; text-align: center; min-width: 45px; vertical-align:middle; }
.ambox-info { color: #000; }
 
/* ombox */
.ombox { background: #f9f9f9; border: 1px solid #aaa; margin: 0.5em 0.5em 0.5em 10%; clear:both; padding:0.2em; width:80%; }
.ombox-image { text-align: center; width:90px; }
.ombox-image-right { text-align: center; width:90px; }
.ombox-info { color: #000; width: 100%; }
.ombox-red { border:1px solid #b22222 !important; }
.ombox-orange { border:1px solid #f28500 !important; }
.ombox-yellow { border:1px solid #f4c430 !important; }
.ombox-purple { border:1px solid #9932cc !important; }
.ombox-blue { border:1px solid #1e90ff !important; }
.ombox-green { border:1px solid #228b22 !important; }
.ombox-gray { border:1px solid #bba !important; }
.ombox-default { border:1px solid #aaa !important; }
 
/* template documentation */
.documentation-header { border: 2px solid #aaa; padding: 0.4em; border-bottom: none; border-right: none; background:#f9f9f9; }
.documentation-links { float:right; text-align:right; font-size:85%; }
.documentation-body { border-left: 2px dashed #aaa; padding: 1em; }
.documentation-footer { border: 2px solid #aaa; padding: 0.3em; border-top: none; border-right: none; background:#f9f9f9; margin:0em; font-size:75%; text-align:right; }
 
/* spoilers */
.splr { height: auto; }
.splr > div, .splrico, .splrwrn { float: left; }
.splr + div { margin: 0 0 1em; }
.splrico { border-radius: 10em 10em 10em 10em; cursor: pointer; margin: 0.5em 1em 0 0; padding: 2px; position: relative; z-index: 6; }
.splrico table { border-radius: 10em 10em 10em 10em; }
.splrico table tr { background-color: transparent; }
.splrico table td { padding: 0; }
.splrwrn { border-radius: 10em 10em 10em 10em; cursor: pointer; font-size: 0.9em; margin: 0.5em 0 0 -3.6em; padding: 2px; }
.splrwrn table { border-radius: 10em 10em 10em 10em; height: 66px; margin: 0; padding: 0; }
.splrwrn table tr { background-color: transparent; }
.splrwrn table td { padding: 0 2.4em 0 3em; }
.splrtxt { }
.splr_games .splrico, .splr_games .splrwrn { background-color: #f9f9f9; border: 0 solid #aaa; color: #000; }
.splr_games .splrico table, .splr_games .splrwrn table { border: 1px solid #aaa; }
.hide_warning { display: none; }
.show_warning { display: inline; }
.hide_spoiler { display: none; }
.show_spoiler { display: inline; }
.hide_warning1 { display: none; }
.show_warning1 { display: block; }
.hide_spoiler1 { display: none; }
.show_spoiler1 { display: block; }
.hide_warning2 { display: none; }
.show_warning2 { display: none; }
.hide_spoiler2 { opacity: 0.12; }
.show_spoiler2 { opacity: 1; }


/***********************/
/* jquery tabs/sliders */
/***********************/
.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs-hide { display: none !important; }
 
/******************/
/* jquery widgets */
/******************/
.ui-widget { font-family: sans-serif; font-size:1em; }
.ui-widget .ui-widget { font-size:1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: sans-serif; font-size:1em; }
.ui-widget-content { border:1px solid #aaa; background:#f9f9f9; color:#000; }
.ui-widget-content a { color:#0645AD; }
.ui-widget-header { border-bottom:1px solid #aaa; background:#f9f9f9; color:#000; font-weight:bold; line-height:1em; }
.ui-widget-header a { color:#0645AD; }
 
/*****************************************/
/* jquery tabs/sliders interaction state */
/*****************************************/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }

/**********/
/* portal */
/**********/
#portal { padding:20px 0; }
.portal_section { border:1px solid #aaa; margin:0; background:#f9f9f9; border-radius:10px 10px 10px 10px; }
.portal_section ul { list-style: disc; }
.portal_header { padding:0 1em; position:relative; }
.portal_header_text { line-height:2em; font-size:2em; border-bottom:1px solid black; }
.portal_headerlinks { font-size:0.8em; position:absolute; right:1em; bottom:-2em; padding-bottom:2px; }
.portal_body { padding:0.8em; }
.row.portal { padding:20px 0; min-width:400px!important; }
@media only screen and (max-width: 1000px) {
  .row.portal .columns.portal:nth-child(2n+1) { clear: both; }
  .row.portal .columns.portal { width: 50% !important; float: left; padding: 0 15px 15px; }
  .row.portal .columns.portal.end { float: left; }  
}
@media only screen and (min-width: 1001px) and (max-width: 1400px) {
  .row.portal .columns.portal:nth-child(3n+1) { clear: both; }
  .row.portal .columns.portal { width: 33.33333%; padding: 0 12px 12px; }
}
@media only screen and (min-width: 1401px) {
  .row.portal .columns.portal:nth-child(4n+1) { clear: both; }
  .row.portal .columns.portal { width: 25%; padding: 0 10px; }
}

/******************/
/* portal: slider */
/******************/
#portal_slider { margin: 0px; padding: 0px; position: relative; height: 450px; }
#portal_slider #portal_next, #portal_slider #portal_prev { text-align: center; cursor: pointer; border: 0px solid #FEC356; height: 30px !important; width: 20px; font-family: arial, san-serif; font-size: 36px; line-height: 22px; font-weight: bold; position: absolute; bottom: 8px; background: transparent; -moz-box-shadow: inset 1px 1px 2px rgba(255,255,255, 0.8); -webkit-box-shadow: inset 1px 1px 2px rgba(255,255,255, 0.8); box-shadow: inset 1px 1px 2px rgba(255,255,255, 0.8); background-image: -moz-linear-gradient(bottom, rgb(153,153,153) 0, rgb(221,221,221) 100%); background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0, rgb(153,153,153)), color-stop(100%, rgb(221,221,221))); text-shadow: 1px 1px rgba(255, 255, 255, 0.3), -1px 0 rgba(0,0,0,0.3); color: rgb(153,153,153); -moz-user-select: none; -webkit-user-select: none; user-select: none; }
#portal_slider #portal_next:hover, #portal_slider #portal_prev:hover { background-image: -moz-linear-gradient(bottom, rgb(114,183,245) 0, rgb(167,215,249) 100%); background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0, rgb(114,183,245)), color-stop(100%, rgb(167,215,249))); color: rgb(114,183,245); }
#portal_slider #portal_next { right: 10px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#portal_slider #portal_prev { right: 31px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
#portal_slider > .portal_body { padding: 0; }


/************************************/
/* Styles pour [[Modèle:Animation]] */
/************************************/
 
.diaporamaControl img {
  background-color: white;
  border: 1px solid #DDDDDD;
}
 
.diaporamaControl .ScrollBar {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Round_Edge.png/5px-Round_Edge.png");
  background-position: top;
  background-repeat: repeat-x;
}
 
.diaporamaControl .ScrollBarContainer {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Round_Edge_bis.png/5px-Round_Edge_bis.png");
  background-position: top;
  background-repeat: repeat-x;
}
 
.diaporama .magnify {
  display: none;
}
 .diaporama select {
  font-size: 12px;
}
 
/* Fin styles pour [[Modèle:Animation]] */

/************************************/
/* Styles pour les infobox          */
/************************************/

.infobox {
  float: right;
  width: 300px;
  margin: 0 0 20px 30px;
  background-color: #FFFFFF;
  background-color: rgba(255,255,255,0.75);
  border: 2px solid #E2E2E2;
}

.ifb-meta > td {
  padding: 5px;
  vertical-align: top;
}

.ifb-meta > td:first-child {
  font-weight: bold;
}