MediaWiki:Centralnotice-template-Community banner update sansbuttonmob

   position: relative;
   overflow: hidden;
   background: -moz-linear-gradient(top, rgba(251,250,249,1) 0%, rgba(254,254,253,1) 20%, rgba(254,254,253,1) 23%, rgba(254,254,253,1) 27%, rgba(240,240,240,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(251,250,249,1) 0%,rgba(254,254,253,1) 20%,rgba(254,254,253,1) 23%,rgba(254,254,253,1) 27%,rgba(240,240,240,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(251,250,249,1) 0%,rgba(254,254,253,1) 20%,rgba(254,254,253,1) 23%,rgba(254,254,253,1) 27%,rgba(240,240,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
   border: 1px solid rgba(0, 0, 0, 0.2);
   margin-bottom: 1em;
   cursor: pointer;
   color: #222;
   font-weight: 500;
   margin-bottom: 10px;

}

{{{banner}}}-main {

   display: table;
   width: 100%;
   height: 80px; /* need to set height for height 100% to work on elements within it */

}

.{{{banner}}}-message-container, .{{{banner}}}-form-container {

   display: table-cell;
   height: 100%;
   vertical-align: middle;

}

/* --- Main message --- */ .{{{banner}}}-message-container img {

   position: absolute;
   right: .0em;
   top: .0em;
   opacity: 0.9;
   height: 90px;
   z-index: 0;

}

.{{{banner}}}-message {

   position: relative;
   margin: 0;
   z-index: 1;
   color: #4D4D4D;
   line-height: 1.2;
   font-weight: bold;
   padding: 11px 10px 11px 10px;

}

@media (min-width: 1200px) {

   .{{{banner}}}-message { 
        padding: 11px 180px 11px 10px;
   }

}

body.rtl .{{{banner}}}-message {

   padding: 11px 40px 11px 10px;
   background-position: right 10px top 10px;

}

.{{{banner}}}-message p {

   margin: 0;
   font-family: Arial, san-serif;
   font-style: bold;
   font-size: 14px;
   opacity: 1;
   text-align: center;

} @media (min-width: 1200px) {

   .{{{banner}}}-message p { 
        font-size: 14px; 
   }

}

@media (min-width: 1300px) { .{{{banner}}}-message p { font-size: 14px; } }

@media (min-width: 1400px) { .{{{banner}}}-message p { font-size: 14px; } }

.{{{banner}}}-greeting {

   font-style: italic;

}

/* --- Main banner text --- */ .{{{banner}}}-form-container {

   width: 13%;
   padding: .7em 1.25em .7em .9em;

}

body.rtl .{{{banner}}}-form-container {

   padding: 1.65em .5em .35em .2em;

}

.{{{banner}}}-form-container img {

   opacity: 1;
   display: block;
   margin: 0 auto;

}

/* --- Close Options --- */

cn-toggle-box-options {

   display: inline-block;
   position: absolute;
   right: .5em;
   top: .5em;
   font-size: .8em;
   text-transform: uppercase;

}

body.rtl #cn-toggle-box-options {

   right: auto;
   left: .5em;

}

cn-toggle-box {

   display: inline-block;
   cursor: pointer;
   opacity: .5;

}

cn-toggle-box:hover { opacity: 1; }

cn-toggle-box-x {

   background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center;
   width: 9px;
   height: 9px;
   float: right;
   display: block;
   margin: .2em .4em;

}

body.rtl #cn-toggle-box-x {

   float: left;

}

/* --- Full Banner Link --- */

{{{banner}}} a.cn-full-banner-click {

display:block;
height:100%;
width:100%;
cursor: pointer;
text-decoration: none;

}

{{{banner}}} a.cn-full-banner-click:hover {

text-decoration: underline

}

.button {

   background-color: #4CAF50; /* Green */
   border: none;
   display: none;
   border-radius: 4px;
   color: white;
   padding: 10px 16px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 12px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
   z-index: 999;

}

@media (min-width: 1200px) { .button {display: inline-block; } } @media (max-width: 1200px) { .button {width: 25%; } } @media (max-width: 1200px) { .button {margin: auto; margin-top: 10px; } }

/* --- Buttons --- */

{{{banner}}} a.buttonlink {

 cursor: pointer;
 text-decoration: none;
 color: black;

}

{{{banner}}} a.buttonlink:hover {

 color: white;

}

.button1 {

   background-color: #0082C0;
   color: white;
   position: static;
   top: 45%;
   right: 30px;
   transform: translateY(-45%);
   min-width: 110px;

}

@media (min-width: 1200px) { .button1 { position:absolute; } }

.button1:hover {

background-color: #447FF5;

} </style>

 <a class="cn-full-banner-click external text"" href="//meta.wikimedia.org/wiki/Meta:Example">

         <img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Wikimedia-logo-update-2016.svg/60px-Wikimedia-logo-update-2016.svg.png" alt="Banner logo">

ONE LINE OF TEXT. IDEALLY BETWEEN 50-70 CHARACTERS

</a>

BUTTON TEXT

</a>

       
           Close