MediaWiki:Common.css

(Difference between revisions)

Revision as of 03:27, 17 September 2016

.img_nopad img { padding:0; }
.imagepx {position:relative; top:0; left:0; display:inline-block; }
.album_img { overflow:hidden; 
   position:relative; top:0; left:0; width:140px; height:95px; display:inline-block;}
.album_img img { padding:0 }
.album_overlay { position:absolute; top:2px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlayH { position:absolute; top:0px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlayT { position:absolute; top:2px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlay:hover { overflow:normal; width:140px; }
.album_overlayH:hover { display:none }
.album_overlayT:hover { display:none }

/* #article {width:400px} doesn't let image stretch across screen */
/* text-align: justify; affects image too */
.SeeMainArticle { padding-left:1em; font-family:courier; }
@media screen and (max-device-width:480px)  { #article {width:480px; } }
.index {float:left; white-space:nowrap; overflow:hidden; width:140px; height:124px;
        color:RGBa(0,0,0,1);
        /* borderx:thin solid black; border-collapse:collapse; */
        box-shadow: 
        1px 0 0 0 #000, 
        0 1px 0 0 #000, 
        1px 1px 0 0 #000,   /* Just to fix the corner */
        1px 0 0 0 #000 inset, 
        0 1px 0 0 #000 inset;
        trbl; padding:4px 2px 2px 3px; text-align:center; }
.index .album_overlayT { display:none }
.title {overflow:hidden; width:138px; color:inherit; }
@media screen and (max-device-width:800px) {
  .title {overflow:hidden; width:138px; height:32px; color:inherit; white-space:normal; }
  .index:hover, .title:hover {background-color:black; color:white; white-space:normal}
  .index img {max-width:140px; max-height:105px; padding:0; }
}
@media screen and (max-device-width:800px) { .index { height:140px; } }

@media screen {  .width_test {visibility: hidden;}}
@media screen and (min-device-width:480px)  {.width_test#w480  {visibility: visible;}}
@media screen and (min-device-width:800px)  {.width_test#w800  {visibility: visible;}}
@media screen and (min-device-width:1280px) {.width_test#w1280 {visibility: visible;}}

.wiki_columns {width:560px; column-width: 140px; column-gap: 12px; column-count: 3;
               padding:6px; font-size:x-small; margin-top:8px; }
.wiki_columns img { margin-top:0.5em; margin-bottom:0.5em;}
.wiki_columns p { margin-top:0; margin-bottom:0; text-indent:1.5em; }
.wiki_columns H2 { font-size:x-small; text-align:center; margin-top:0; margin-bottom:0em; }
.wiki_columns img { float:right; max-width:176px; }

@media screen and (max-device-width:480px) {
   .overtable { overflow:auto; width:400px; }
   pre        { overflow:auto; width:400px; } 
}

.caption{background-color:red; width:140px;
       position:absolute;
       font-size:80%;
       padding-left:1%;
       padding-right:1%;
       margin-left:0;
       margin-right:0;
       top:0;
       left:0;
       }
.thumb {
       position:absolute;
       top:12;
       left:0;
       }

/* GLOBAL WIKI styles */
table.toc  { width:400px; }                    /* Test#TOC   */
#article blockquote { width:373px; }           /* Test#QUOTE */
img { max-width:400px;  padding:2px 0 } /* override with class="imageLGpx" or "imageMAXpx" */
@media screen and (max-device-width:480px) {
  #article pre { width:400px; white-space:pre; overflow:auto; } }

/* QUOTE styles Test#QUOTE */
#article blockquote img { max-width:373px; } /* Test#QUOTE_IMG */
#article blockquote.wide { width:90%; }
#article blockquote blockquote { width:90%; } /* Template:OwnersManual */
#article blockquote.fancy:first-letter {
  	float: left;
 	margin: 0 .3em 0 0;
 	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
 	font-size: 200%;
 	font-weight: bold; }

/* LIST styles Test#LIST */
#article ul {width:95%;
    list-style: disc outside none;
  margin-before: 0px;
padding-start: 0px;
    margin-left: 10px;
    padding-left: 5px;}
#article ul li {
    margin-top: 0px;
    margin-bottom: 0px;}
#article ul li:first-child {margin-top: 0px;}
#article ol {width:90%;
    list-style: decimal outside none;
   line-height: 1.5;
   margin-top: 0px;
    margin-left: 15px;
   padding-left: 15px;}
#article ol li {margin-top: 10px;}
#article ol li:first-child {margin-top: 0px;}
#toc ol li {margin-top: 0px;}
#toc ul {list-style:none inside none; margin-left: 0px; }

/* list img sizes Test#LIST_IMG */
#article ul li img {max-width:383px}
#article ol li img {max-width:368px}
#article ul dd img {max-width:343px}
#article ol dd img {max-width:328px}

/* TABLE styles */ 
table.wiki_table{border:thin solid black; width:400px; border-spacing:0px; padding:0px;} 
.wiki_table tr:nth-child(even){background-color: #f0f0f0}
.wiki_table th {text-align:left ; vertical-align: text-top;}
.wiki_table td,th {padding:0px 0px 0px 2px}
.wiki_index {width:420px; border:thin solid black; border-collapse:collapse;} 
.wiki_index td,th {white-space:nowrap; max-width:144px; border:thin solid black;
            padding:2px 2px 2px 2px; text-align:center;}
.wiki_index {max-width:140px; max-height:105px; padding:0; }

/* IMG styles */
.img_width img {width:100%;}
.img_index img { height:105px; }
/*.img_index img { height:105px; display:inline-block; outline:thin solid black; padding:0; }*/
.img_height img { height:100%; padding:0; }
.img_height { display:inline-block; outline:thin solid black; position:relative; top:0; left:0; }
.img_hxw img {height:100%; width:100%;}
.img_height120 img {height:100%;}
.img_height120 { height:120px; display:inline-block; outline:thin solid black; }

/* IMG general classes */
.image100px img   { width: 100px; }
.imageTHUMBpx     { position:relative; top:0; left:0; display:inline-block; }
.imageTHUMBpx img { width: 140px; }
.image140px img   { width: 140px; }
.imageTHpx img    { width: 160px; }
.image160px img   { width: 160px; }
.imageSMpx        { position:relative; top:0; left:0; display:inline-block; }
.imageSMpx  img   { max-width: 256px; }
/*.image256px img   { max-width: 256px; }*/
/*.imageMEDpx img   { width: 400px; } */
/*.image400px img   { width: 400px; } */
.imageXLpx  img   { max-width:640px; position:relative; top:0; left:0; }
.imageLGpx  img   { max-width:560px; padding:2px 2px; position:relative; top:0; left:0; }
  @media screen and (max-device-width:480px)  {
   .imageLGpx  img   { max-width:480px;} }
.imageMAXpx img   { width:inherit; position:relative; top:0; left:0; }
.imageINDEX img   { max-width:inherit;}
.imagepx img     { width:100%;}

/* NAVIGATION UI styles */
#navbar {outline:solid thin black; padding:4px 4px 4px 13px; width:384px; background:#f7f8ff;}
#navbar_title {color:Black; text-transform:uppercase; font-weight:bold; height:20px}
.navbar_link { padding-left:4px;}
.section { color:DarkSlateGray; text-transform:lowercase;
   background-color:#B4CAD7;
   background: -webkit-linear-gradient(left, #B4CAD7, #7f8e88); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right, #B4CAD7, #7f8e88); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right, #B4CAD7, #7f8e88); /* For Firefox 3.6 to 15 */
   background: linear-gradient(to right, #B4CAD7,#7f8e88); /* Standard syntax */}
.navbox_outer {border:thin solid black; border-spacing:0px; padding:0px;}
.navbox {border:thin solid black; border-spacing:0px; padding:0px;}
.navbox tr:nth-child(1){background:#B4CAD7; height:26px; font-weight:bold;}
.navbox td:nth-child(1){background-color:#B4CAD7; width:13px;}
.navbox td {padding:0px 4px 0px 4px; height:16px;}
.photobox {border-left:thin black solid; width:187px; height:140px;}
  .photobox img {height:100%; width:100%; padding:0; }
#navbox_top {color:Black; text-transform:uppercase;}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width:320px) and (device-aspect-ratio: 3/5) {
  /* #article {width:288px; } */
  #article p {width:288px; }
  h1,h2,h3,h4,h5 {width:288px; }
  .overtable       { overflow:hidden; width:288px; }
  .overtable:hover { overflow:visible; }

  /* GLOBAL WIKI styles */ 
  table.toc  { width:288px; }                    /* Test#TOC   */
  #article blockquote { width:261px; }           /* Test#QUOTE */
  #article blockquote p { width:246px; }
  img { max-width:288px;  padding:2px 0 } /* override with class="imageLGpx" or "imageMAXpx" */
  img { max-height:400px; }
  #article pre { width:288px; white-space:pre; overflow:auto; }
  #article pre:hover {overflow:visible;}

  /* QUOTE styles Test#QUOTE */
  #article blockquote img { max-width:246px; } /* Test#QUOTE_IMG */
  #article blockquote.wide { width:75%; }
  #article blockquote blockquote { width:55%; } /* Template:OwnersManual */
  #article blockquote.fancy:first-letter {
  	float: left;
  	margin: 0 .3em 0 0;
 	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
 	font-size: 200%;
 	font-weight: bold; }

  /* LIST styles Test#LIST */
  #article ul {width:60%;
    list-style: disc outside none;
    margin-before: 0px;
  padding-start: 0px;
    margin-left: 10px;
    padding-left: 5px;}
  #article ul li {
    margin-top: 0px;
    margin-bottom: 0px;}
  #article ul li:first-child {margin-top: 0px;}
  #article ol {width:55%;
    list-style: decimal outside none;
    line-height: 1.5;
    margin-top: 0px;
    margin-left: 15px;
    padding-left: 15px;}
  #article ol li {margin-top: 10px;}
  #article ol li:first-child {margin-top: 0px;}
  #toc ol {width:90%; }
  #toc ul {width:90%; }
  #toc ol li {margin-top: 0px; width:90%; }
  #toc ul {list-style:none inside none; margin-left: 0px; }

  /* list img sizes Test#LIST_IMG */
  #article ul li img {max-width:271px}
  #article ol li img {max-width:256px}
  #article ul dd img {max-width:231px}
  #article ol dd img {max-width:216px}

  /* TABLE styles */ 
  table.wiki_table{border:thin solid black; width:400px; border-spacing:0px; padding:0px;} 
  .wiki_table tr:nth-child(even){background-color: #f0f0f0}
  .wiki_table th {text-align:left ; vertical-align: text-top;}
  .wiki_table td,th {padding:0px 0px 0px 2px}
  .wiki_index {width:420px; border:thin solid black; border-collapse:collapse;} 
  .wiki_index td,th {white-space:nowrap; max-width:144px; border:thin solid black;
            padding:2px 2px 2px 2px; text-align:center;}
  .wiki_index {max-width:140px; max-height:105px; padding:0; }

  /* IMG styles */
  .img_width img {max-width:140px; max-height:105px; }
  .img_index  img   { max-width:140px; max-height:105px; padding:0; }
  .index_body    { width:400px; }
  .img_height img {height:100%;}
  .img_height { display:inline-block; outline:thin solid black; }
  .img_hxw img {height:100%; width:100%;}
  .img_height120 img {height:100%;}
  .img_height120 { height:120px; display:inline-block; outline:thin solid black; }

  /* IMG general classes */
  .image100px img   { width: 100px; }
  .imageTHUMBpx img { width: 140px; }
  .image140px img   { width: 140px; }
  .imageTH      img { width: 140px; }
  .imageTHpx img    { width: 140px; }
  .image160px img   { width: 140px; }
  .imageSMpx  img   { max-width: 288px; }
  .image256px img   { max-width: 288px; }
  .imageXLpx  img   { max-width:640px; }
  .imageLGpx  img   { max-width:288px; }
  .imageLGpx:hover img { max-width:560px;}
  .imageINDEX img   { max-width:inherit;}
  .imagepx img     { width:100%;}

  /* NAVIGATION UI styles */
  #navbar {outline:solid thin black; padding:4px 4px 4px 13px; width:384px; background:#f7f8ff;}
  #navbar_title {color:Black; text-transform:uppercase; font-weight:bold; height:20px}
  .navbar_link { padding-left:4px;}
  .section { color:DarkSlateGray; text-transform:lowercase;
     background-color:#B4CAD7;
     background: -webkit-linear-gradient(left, #B4CAD7, #7f8e88); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(right, #B4CAD7, #7f8e88); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(right, #B4CAD7, #7f8e88); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to right, #B4CAD7,#7f8e88); /* Standard syntax */}
  .navbox_outer {border:thin solid black; border-spacing:0px; padding:0px;}
  .navbox {border:thin solid black; border-spacing:0px; padding:0px;}
  .navbox tr:nth-child(1){background:#B4CAD7; height:26px; font-weight:bold;}
  .navbox td:nth-child(1){background-color:#B4CAD7; width:13px;}
  .navbox td {padding:0px 4px 0px 4px; height:16px;}
  .photobox {border-left:thin black solid; width:187px; height:140px;}
  .photobox img {height:100%; width:100%;}
  #navbox_top {color:Black; text-transform:uppercase;}
}

.index_body .album_overlayH { display:none; }
.imageMAXpx img   { width:inherit;}