MediaWiki:Chameleon.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*grey-out images unless hover over; height scales automatic with width*/
#grey-image{
    position: relative;
}
#grey-image img{
    width:100%;
    height:auto;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
#grey-image img:hover{
    opacity: 1.0;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#grey-image .tag {
   position: absolute;
   left: 80px;
   top: 30px;
   color: #FFFFFF;
   font-weight: bold;
}

/* Top image */
#mw-navigation {
   background-image: url(skins/common/CSDMS_high_res1.png), url(skins/common/CSDMSbanner3.png);
   background-color: #333333;
   background-attachment: fixed;
   text-indent:-9999px;
   background-size: 241px 75px, 100%;
//   background-position: 0% 0%, 50% -2em;
   background-position: 0% 0%, 0% -0.5em;
   background-repeat: no-repeat;
   background-origin: content-box;
   height:70px;
}
#mw-navigation:hover {
   background-image: url(skins/common/CSDMS_high_res2.png), url(skins/common/CSDMSbanner3.png);
   background-color: #333333;
   background-attachment: fixed;
   text-indent:-9999px;
   background-size: 241px 75px, 100%;
//   background-position: 0% 0%, 50% -2em;
   background-position: 0% 0%, 0% -0.5em;
   background-repeat: no-repeat;
   background-origin: content-box;
   height:70px;
}
#p-logo {
        background-position: 0.1em 0.25em;
        background-repeat: no-repeat;
        background-image: url(images/Home_icon2.png);
}
#p-logo:hover {
        background-position: 0.1em 0.25em;
        background-repeat: no-repeat;
	background-image: url(skins/common/home_icon3.png)
}

/* Make it possible to click on logo upper left corner, using fake text in Mediawiki:Secondary-menu */
/*#text-logo{
    height:30px;
    width: 100%;
//    background-color:#dddddd;
    filter:alpha(opacity=60);
    opacity:0.6;
} */

/* Setting color for the entire background & text area */
body {
      background-color:#E9E9E9;
}
body.page-TEST-AK #content{
    background: rgba( 34, 34, 34, 1 ); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba( 34, 34, 34, 1 ), white, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba( 34, 34, 34, 1 ), white, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba( 34, 34, 34, 1 ), white, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba( 34, 34, 34, 1 ), white, white); /* Standard syntax */
}

#content{
      background-color:#FFF;
      border-style: solid;
      border-width: 1px;
      border-color: #C0C0C0;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}


/* Bottom of the Page / Footers */
 
.BottomPage {
background-color:#222;
width:100%;
       position:relative;
	bottom:0px;
/	left:0;
        height:50%;
	min-height:150px;
        padding:20px;
       padding-top:0px;
}
.BottomPage a:link, .BottomPage a:visited { 
   color:#B9BFBF;
}
.BottomPage a:hover, .BottomPage a:active { 
   color:#FFF;
}
 
//#footer-icons,  #footer-info, #footer-places {
//   display:none;
//}
#footer-info{ display:none; }
 
#footer-icons img, #footer-icons img:link, #footer-icons img:visited {
    opacity: 0.9;
    filter: alpha(opacity=90);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
#footer-icons img:hover, #footer-icons img:active {
    opacity: 1.0;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#frontimage {
   display:block;
   width:100%;
   height: 456px; 
   background-image: url(skins/common/test-image.jpg);
   background-size:100%;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-origin:content-box;
   text-align: center;
   color: #FFF;
   font-family:Georgia, serif;
   font-size:1.25em;
   font-style:italic;
}