User talk:Rogerhc/common.css

Below CSS is for reference. This is just a talk page; so none of this does anything here.

Gradients

body.page-Main_Page_New #bodyContent {
      margin-left:-20px;
      width:104%;
      background:gray;
      background-color:                                          gray; /*fallback*/
      background-image: -webkit-linear-gradient(left, black, #1B4157 80%, #6B9BB6);
      background-image:    -moz-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*Fx3.6-15*/
      background-image:     -ms-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*IE10*/
      background-image:      -o-linear-gradient(left, black, #1B4157 80%, #6B9BB6); /*Op11.1-12.0*/
      background-image:     linear-gradient(to right, black, #1B4157 80%, #6B9BB6); /*Standard;last*/
}

TOC

/* TOC indicate line wraps (outdent and enlarge first letter of each item) */
table.toc li {
      margin-left:1em; 
}
table.toc li:first-letter {
      margin-left:-0.5em;
      font-size:1.2em;
}

text-shadow

.banner-box {
      text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}

box-shadow

.someclass {
      box-shadow: 2px 2px 5px #9EBDC7;
}

opacity

Value is a number from 0.0 (transparent) to 1 (opaque).

Effects the whole element it is assigned to and all descendants.

.someclass {
      opacity: 0.5;
}

To make a transparent background, maybe (a) use a PNG with desired transparency as a background image, or (b) position a non-descendant element over a transparent element.

snip

/* See http://www.w3.org/TR/css3-mediaqueries/#syntax */
@media (min-width: 400px) and (max-width: 499px) { 
      img[alt="Walt Disney World"] {
            color:red; width:200px;
      }
}

@media (min-width: 500px) and (max-width: 599px) {
      img[alt="Walt Disney World"] {
            color:green; width:300px;
      }
}

@media (min-width: 600px) and (max-width: 699px) {
      img[alt="Walt Disney World"] {
            color:orange; width:400px;
      }
}

@media (min-width: 700px) and (max-width: 799px) {
      img[alt="Walt Disney World"] {
            color:blue; width:500px;
      }
}


/* Sort of fix wandering bullets alongside TOC */
/* ul,ol{list-style-position:inside;}  */


/* <table id="toc" class="toc" */

#toctitle h2:before {
      content: "Roger's Groovy TOC ";
}

#toc,
#toctitle,
#toctitle h2 {
      display:inline;
      float:none;
      width:100%;
      color:red;
}

.toc {
      display:inline;
      float:none;
      width:100%;
}

.toclevel-1,
table.toc,
table.toc tr,
table.toc tr td,
table.toc tr td ul,
table.toc tr td ul li,
toclevel-1 {
      display:inline;
      float:none;
      width:100%;
      color:orange;
}