CréaSite

la skin de base est commenté

@font-face {
  font-family: 'Open Sans';
  src: url(fonts/OpenSans-Light.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(fonts/Lato-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
}
/* HTML */
* {
  margin: 0;
  padding: 0;
  border: 0px none;
  outline: 0px none;
  vertical-align: baseline;
  box-sizing: border-box;
}
/* HTML */
html,
body {
  font-family: 'Open Sans';
  color: #444;
  background-color: #333;
  height: 100%;
  line-height:normal;
}
h1 {
   font-family: 'Open Sans';
   font-weight: bold;
   font-size: 260%;
   line-height: 210%
}
h2 {
   font-size: 110%;
   color: #3373AD;
   margin-top: 10px;
}
h3 {
   margin-top: 10px;
}
a, a:visited {
  text-decoration: none;
  color: #0059B3;
}
a:hover {
  color:  #0097FF;
}
ul {
  list-style: outside none disc;
  text-align: left;
}
li {
  margin-left: 18px;
}
hr {
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   margin: 16px 0;
}
/* tables */
td {padding: 5px;}
/* forms */
.smallform{
   width:70%;
   margin: 0 10%;
}
fieldset {margin-top: 20px;}
label {margin-top: 22px;}
fieldset .field {width:100%}
.field {
   padding:6px;
   border : solid 1px #3373AD;
   margin-bottom: 14px;
}
.field:focus {
   background:#F0F0F1;
   border-color: #0097FF;
}
.block {
   width: 100%;
}
textarea {resize:none}
button, .btn, a.btn {
   margin : 0;
   border : solid 1px #3373AD;
   background: transparent;
   color: #3373AD;
   font-family : inherit;
   font-size : 110%;
   cursor : pointer;
   padding: 8px 12px;
   min-width: 90px;
   text-align:center;
}
button:hover, .btn:hover {
   background: #3373AD;
   border-color: #36783AD;
   color:white;
}
.btn-group {
   margin: 16px auto;
   white-space: nowrap;
   text-align: center;
   display: inline-block;
   width: 100%;
}
.btn:first-child {float: left;}
.btn:last-child {float: right;}
.btn-outline {}
.btn-big {padding: 5px;}
.btn-med {min-width: 90px;padding: 6px 10px);}
.btn-sml {padding: 1px;}
/* glyphs 64*/
.glyph64 {
   height: 78px;
   width: 78px;
   padding: 4px;
   border: solid 3px #05416e;
   background: #3373AD;
   margin-right: 14px;
   float: left;
}
/* grid */
.w12 {
  width: 49.5%;
  float: left;
  margin-left: 1%;
}
.w13 {
  width: 32.6%;
  float: left;
  margin-left: 1.1%;
}
.w23 {
  width: 66.3%;
  float: left;
  margin-left: 1.1%;
}
.w14 {
  width: 24.25%;
  float: left;
  margin-left: 1%;
}
.w24 {
  width: 49.5%;
  float: left;
  margin-left: 1%;
}
.w34 {
  width: 74.75%;
  float: left;
  margin-left: 1%;
}
.w45 {
  width: 79.8%;
  float: left;
  margin-left: 1%;
}
.w35 {
  width: 59.6%;
  float: left;
  margin-left: 1%;
}
.w25 {
  width: 39.4%;
  float: left;
  margin-left: 1%;
}
.w15 {
  width: 19.2%;
  float: left;
  margin-left: 1%;
}
.w11,
.w22,
.w33,
.w44,
.w55 {
  width: 100%;
  float: none;
  margin: 0;
}
/* general styles */
.nowrap {white-space: nowrap;}
.evidence {
  background-color: #D8D8D8;
  font-weight: 600;
  padding: 0 4px;
}
.quick-links {
   display: none;
   float: right;
   background: #555;
   padding: 10px 20px;
}
/* Container */
#container {
  width: 100%;
  min-height: calc(100% - 30px);
  margin: auto;
  overflow: hidden;
  background: #333;
}
.wrapper {
  max-width: 999px;
  margin: auto;
  clear:both;
  overflow:hidden;
}
.wrapper div:first-child {
  margin-left: 0;
}
/* header */
#header {background-color: #3373AD;}
#head-mid div.wrapper div {float:left}
#head-btm {background: #05416e;}
/* header elements */
#logo {
  height: 70px;
  background: #05416E;
}
#logo img {padding: 0 10px;}
#site_title {
   color: #fff;
   height: 70px;
   padding: 0 60px 0 5px;
   background: #05416E;
}
#site_slogan {
   font-family: 'Open Sans';
   font-weight: bold;
   font-size: 120%;
   line-height: 100%;
   color: #fff;
   margin: 46px 0px 0px 30px;
}
#date {
  width: 18%;
  padding: 5px;
  text-align: center;
  float: right;
}
#user-panel{
   float: right !important;
   margin: 38px 50px 0px 0px;
   height: 20px;
}
#src-head {
   margin-right: 34px;
   margin-top: -3px;
   border: solid 1px #fff;
   height:29px;
   background: #05416E;
}
#search {vertical-align:text-top; height:27px; border: none}
#src-head form input[type=submit] {
   background: url("../../include/ico/search2.png") no-repeat scroll 40% / 14px;
   height: 27px;
   width:26px;
   vertical-align:text-top;
}
#login {float:left}
a#login-btn  {
   color:#EDEDED;
   border: solid 1px #EDEDED;
   padding: 2px 12px;
}
a#login-btn:hover, #navmob-btn:hover {
   text-decoration:none;
   color:#FFF;
   border: solid 1px #FFF;
}
#SwitchLang {
   margin-left: 10px;
   text-align: center;
   width: 40px;
}
#flags-panel {
  position: absolute;
  border-radius: 3px;
  color: white;
  display: none;
  background: #05416e;
  width: 40px;
  padding: 10px;
  z-index: 20;
}
#flags-panel img {
  padding-top: 10px;
}
/* menu bar*/
#menu-bar {font: bold 110% 'Open Sans';}
#menu-bar a {
  color: #fff;
   line-height: 250%;
   margin-right: 12px;
}
#menu-bar a:hover {
   color: #bbb;
}
div#header-top #menu,
div#header-btm #menu {
  display: inline-block;
  width: 95%;
}
#navmob-btn {display:none}
ul#menu li {float: left;}
/* sections */
#HeroUnit {
  padding: 40px 80px;
  font-size: 180%;
  color: #fff;
  background: #0097FF;
  margin: 0 auto;
}
#UpTab, #DownTab {
   text-align: center;
   font-weight: bold;
   font-size: 90%;
   color: #555;
   padding-bottom: 15px;
}
#UpTab {
  background: #eeefff;
}
div.UpTab > div.ltit {
  font-size: 16px;
  background-color: #3373AD;
  color: #fff;
  text-align: center;
}
#DownTab {
  background: #ddd;
}
.clearfix {clear: both;height:30px}
/* page */
#main {background: #FDFDF8;}
#page {background: #FFF;}
.ctit, .ltit {
  color: #3373AD;
  font-family: Lato;
}
h2.ctit, .ctit {
   font-size: 32px;
   margin: 22px 0px;
   color: #3373AD;
   padding: 10px 0px;
}
/* side boxes */
.box {
   margin-top:22px;
}
.ltit {
  font-size: 105%;
  padding: 20px;
  color: #FFF;
  background: #3373AD;
  border: solid 1px #DCDCDC;
  font-size: 17px;
}
/* side menus */
.catitem, .rubr {
   font-family: Lato;
   background: #F0F0F1;
   padding:6px 18px;
}
ul.item {list-style: outside none none;}
li.item {
  padding: 6px 18px;
  border-bottom: dotted 1px #d1d1d1;
  font-size: 90%;
  font-weight: bold;
  margin:0;
}
.mark-cat {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 2px 12px 2px 0;
  background: #3373AD;
}
.mark-cat.active {
  background-color: red;
}
.mark-item.active {
  display: inline-block;
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
  vertical-align: middle;
  border-left: 6px solid red;
}
.mark-cat.open, .mark-cat.close {
   display: inline-block;
   width: 16px;
   height: 16px;
   margin: 0px 12px 0px 0px;
   font-size: 90%;
   text-align: center;
   color: #888;
   border: solid 1px #D7D7D7;
   line-height: 14px;
   background:none;
}
.mark-cat.open::after {
   content: "+";
}
.mark-cat.close::before {
   content: "-";
}
.active {
   text-shadow: 1px 1px #aaa;
}
/* footer */
#footer {
  background: #333;
  color: #eee;
  font-size: 80%
}
#foot-box-0, #foot-box-1, #foot-box-2, #foot-box-3, #foot-box-4 {font-size: 90%;}
#info-footer {
   background:#000;
   color: #FAF6F6;
   height: 30px;
   font-size: 75%;
}
/* infofooter */
#info-footer .wrapper {max-width: 96%;}
#info-footer div {min-height: 3px; padding-top: 4px; color: #FFF; }
#gen-time {text-align: center;}
#adHoc-link {text-align: right;}
/* pagination */
ul.pager {
  text-align: center;
  color: #3373AD;
  list-style: none;
}
.pager li,
.pagernext,
.pagerprev {
  border: solid 1px #CECEBF;
  padding: 8px;
  border-radius: 5px;
  display: inline-block;
  margin: 0;
}
.pagernext,
.pagerprev {
  background: #F0F0F1;
  color: #bbb;
  float: right;
}
a.pagernext,
a.pagerprev {
  color: #333;
}
.pagerprev {
  float: left;
  padding-left: 0;
}
/* pages */
nav #pg-idx h2{font-weight: bold;}
.btn-scroll-up, .btn-scroll-down{
   margin-left:80px;
   cursor:pointer;
   width: 0;
   height: 0;
   border: solid 30px transparent;
}
.btn-scroll-up{border-bottom: solid 15px #3373AD;}
.btn-scroll-down{border-top: solid 15px #3373AD;}
.pg-inside-menu p {
   display:block;
   padding: 0 22px;
}
#pginfo {
   background: #F0F0F1;
   padding: 12px;
}
.label-new, .label-upd {font: status-bar; font-size:9px; vertical-align:super; padding:0 8px; color: red;}
/* Messages */
.message{padding: 6px; margin-top: 22px; color:#fff}
.info{background:#2D90FF;}
.warning{background:#D90000;}
.show-side-panel {
    position: fixed;
    top: 50%;
    right: 0px;
    width: 20px;
    height: 120px;
    border: solid 20px transparent;
    border-right-color: #222;
    z-index: 100;
}
.user-side-panel {
   position: fixed;
   top: 0px;
   right: -220px;
   z-index: 100;
   background: #222 none repeat scroll 0% 0%;
   width: 220px;
   height: 100%;
   text-align: center;
   font-family: Lato;
   font-size: 90%;
}
.user-side-panel p {
   padding: 10px;
   clear: both;
}
/* mobile */
@media screen and (min-width: 901px) {#menu{display:inline-block !important}}
@media screen and (max-width: 900px) {
   img {max-width: 98%; margin: 5px 2px; clear:both}
   .wrapper{width:100%}
   .w11, .w12, .w13, .w14, .w15, .w22, .w23, .w24, .w25, .w33, .w34, .w35, .w44, .w45, .w55 {
      width: 98%;
      float: left;
      margin-left:1% !important;
   }
   #header{margin-top: 50px;}
   #head-mid {background: #05416E;}
   #logo {margin:4px 0}
   #user-panel {
      position: fixed;
      margin: 0;
      top: 13px;
      right: 20px;
      z-index: 20;
   }
   #login {float:right !important}
   ul.pager {padding-bottom: 20px;}
   ul.pager li {display: none;}
   li.pagerprev, li.pagernext  {display: block !important;}
   #menu-bar {
      top: 0px;
      position: fixed;
      width: 100%;
      background: #333;
      z-index: 10;
   }
   #navmob-btn {
      display: block;
      margin: 10px 12px !important;
      border: 1px solid #EDEDED;
      float: left;
      color: #EDEDED;
   }
   #navmob-btn p {padding: 2px 12px; font-weight:normal}
   #navmob-btn span {
      width: 20px;
      background: #EDEDED none repeat scroll 0% 0%;
      display: block;
      height: 2px;
      margin: 5px 10px;
   }
   ul#menu {
      display: none;
      background: #05416E;
      clear:both;
   }
   ul#menu li {
      float:none;
   }
   #flags-panel{background:#333}
   .lbox img {clear:both;margin:auto!important;max-width:100%;float:none !important}
}
@media screen and (max-width: 480px) {
   #site_title{width:initial;padding:5px }
   #site_slogan{display:none}
   #src-head{display:none}
}