MediaWiki:Common.css: Difference between revisions

Revision as of 07:57, 14 June 2024

/* CSS placed here will be applied to all skins */

/* Tables with infobox class and additional bordered class */
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}

/*Change in links on hover*/
a:hover {
color:darkgreen;
text-shadow:0 0 3px springgreen;
-moz-text-shadow:0 0 3px springgreen;
-webkit-text-shadow:0 0 3px springgreen;
}

/* Appearance of galleries (gallery tag) */
table.gallery {
border:none;
}

table.gallery td {
border:none;
font-size:95%;
}

div.gallerybox div.thumb:hover,div.gallerybox div.thumb div:hover {
background-color:Orange;
}

div.gallerybox div.thumb:hover {
-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
}
/***Small caps***/
.Caps {
font-variant:small-caps;
}

/* Highlight diff changes with border, only on mouseover */
.diff tr:hover del, .diff tr:hover ins {outline:2px solid #1e90ff;}

/*** IMAGES (taken from WikiDex, the Pokémon encyclopedia) ***/
/* Grid background on transparent images */
body.ns-6 #file img {
background:url('data:image/gif;base64,R0lGODdhEAAQAIABAO/v7////ywAAAAAEAAQAAACH4RvoauIzNyBSyYaLMDZcv15HAaSIlWiJ5Sya/RWVgEAOw==') repeat fixed;
}
/* Dark background when hovering over */
body.ns-6 #file img:hover {
background:none #333;
}

/* We remove the 'outline' from the images */
a.image { outline: none; }

/* Appearance of the thumbs */
div.thumbinner {
background-color:green;
background:-moz-linear-gradient(center top, limegreen 0%, green 100%);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
border:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#FFFFFF !important;
-moz-box-shadow:2px 2px 5px lime;
-webkit-box-shadow:2px 2px 5px lime;
box-shadow:2px 2px 5px lime;
padding-top:4px !important; /* One more pixel to match the sides */
}

.thumbinner a, .thumbinner a:visited { color:yellow; }

.thumbnail a:hover { color:yellow; }

.content figcaption, .content .thumbcaption {
color: #FFFFFF
}

img.thumbimage {
background-color:#f9f9f9;
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

a.magnify.sprite { background:url("http://indy.snowsherrill.com/images/9/9b/Right_button.png") center center no-repeat; }

/* Reduced the bottom margin of thumbs */
div.tright, div.tleft {
margin-bottom: 0.8em;
}

/* Removed a huge white border that looks bad on colored backgrounds for the same margin value */
div.tright {
border-width:0;
margin:0.5em 0 0.8em 1.4em;
}
div.tleft {
border-width:0;
margin:0.5em 1.4em 0.8em 0;
}

/* Appearance of galleries in articles (gallery tag) */
.gallerybox {
background-color:#333;
background:-moz-linear-gradient(center top, #888 0%, #333 100%);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
padding:4px 2px 4px 4px !important;
margin:6px 7px 6px 0 !important;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:2px 2px 5px lime;
-webkit-box-shadow:2px 2px 5px lime;
box-shadow:2px 2px 5px lime;
}
ul.mw-gallery-nolines li.gallerybox div.thumb {
background-color: #fff;
}
/*To make the letter in the galleries appear white*/
.gallerybox .gallerytext { color:#fff }

.gallerybox a { color:yellow; }

.accent { border:0 !important; }

.gallerybox > .lightbox-caption { font-size:95%; margin-top:0; }

.gallerybox > div.thumb {
height:auto !important;
background:#ededed;
border:none !important;
margin-right:2px !important;
}

.gallerybox > div.thumb > div.gallery-image-wrapper { position:static !important; }

/* Appearance of galleries in categories (gallery tag) */
table.gallery {
border:none;
}

table.gallery td, .gallerybox {
font-size:90%;
}

.gallerybox div.neutral {
background-color:#f9f9f9;
}

div.gallerybox div.thumb:hover, .gallerybox div.neutral:hover {
-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
border-color:#598EFF !important;
}

/* Flex box */
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content:center;
margin:auto;
max-width: 1000px;
}

/** We eliminate the edit section buttons **/
. mw-editsection {  
	display : none ; 
}

/*** Useful for templates and small effects ***/
. Squeeze { 
   padding-left : 0 px ;
   padding-right : 0 px ;
   transition-timing-function : ease-out ; 
    -webkit- transition-duration : 1.3 s ; 
       -moz- transition-duration : 1.3 s ; 
        -ms- transition-duration : 1.3 s ; 
         -o- transition-duration : 1.3 s ; 
            transition-duration : 1.3 s ; 
}

}

. Squeeze: hover {
   padding-left:130px;
   padding-right:130px;
}

. Featured Article {
   text-align:center;
   border-left:20px solid limegreen;
   border-right:20px solid limegreen;
}

. Featured Article: hover {
   text-align:center;
   border-left:20px solid #00b300;
   border-right:20px solid #00b300;
}

. ArticleFeatured to {
   text-decoration:none;
   border-bottom:none;
}

. ArticleFeatured to:hover {
   text-decoration:none;
   border-bottom:none;
   text-shadow:none ! important;
}

. Featured Article2, . Featured Article3, . Featured Article4 {
   text-align:center;
   border:2px solid lightgreen;
   border-radius:20px;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
}

. Featured Article2:hover {
   border:2px dashed #00b300;
   border-radius:0 20px 20px 25px;
   -moz-border-radius:0 20px 20px 25px;
   -webkit-border-radius:0 20px 20px 25px;
}

. Featured Article3:hover {
   border:2px dashed #00b300;
}

. Featured Article4:hover {
   border:2px dashed #00b300;
   border-radius: 20px 0 25px 20px;
   -moz-border-radius: 20px 0 25px 20px;
   -webkit-border-radius: 20px 0 25px 20px;
}

. Featured Article2 to, . Featured Article3 to, . Featured Article4 to {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color:#00b300;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

. ArticleFeatured2 to: hover, . ArticleFeatured3 to: hover, . Featured Article4 to:hover {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color: green;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

. Featured Survey {
   border:3px solid #E5DA76;
   background:#E5DA76;
   margin-top:5px;
}

. Featured Survey: hover {
   border:3px dotted yellow;
}

. SurveyFeatured to {
   border-bottom:none;
   text-decoration:none;
   color: black;
}

. SurveyFeatured to: hover {
   border-bottom:none;
   text-decoration:none;
   color:darkkhaki;
   text-shadow:0 0 5px yellow;
}

. BackgroundSectionsCover {
   background:url("http://indy.snowsherrill.com/images/2/29/Fence.png"), repeat-x ! important;
   padding-top:15px;
   padding-left:5px;
   font-family: 'FinkHeavy', 'Comic Sans MS', sans-serif;
   font-size:120%;
   font-weight:bold;
   min-height:46px;
}

. BackgroundSectionsCover:hover {
   font-size:130%;
}

. SheetSectionsCover {
   background:#E3FFA9;
   border-radius:10px;
   -moz-boder-radius:10px;
   -webkit-border-radius:10px;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.4s;
       -moz-transition-duration: 0.4s;
        -ms-transition-duration: 0.4s;
         -o-transition-duration: 0.4s;
            transition-duration: 0.4s;
}

. SheetSectionsCover:hover {
   border-radius:30px;
   -moz-boder-radius:30px;
   -webkit-border-radius:30px;
}

.irObjects {
   background:white;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
   text-align:center! important;
}
.irObjects:hover {
   text-shadow:0 0 10px black ! important;
   -moz-text-shadow:0 0 10px black ! important;
   -webkit-text-shadow:0 0 10px black ! important;
   background:silver ! important;
   color: white! important;
   padding-left:5px ! important;
   text-align:left ! important;
}
.irObjects: hover a {
   color: white! important;
}
.irObjects to {
   color: black! important;
}
.irObjects to:hover {
   text-decoration:none;
}

. Song Button {
   border:1px solid orange;
   background:#FFFF8C;
}

. Song button: hover {
   border:1px solid white ! important;
   background:red ! important;
}

. Song Button: hover to {
   color: white;
   text-decoration:none;
}

. Song button2 {
   border:1px solid orange;
   background:#FFFF8C;
}

. ButtonSong2:hover {
   border:1px solid white ! important;
   background:blue! important;
}

. Song button 2: hover to {
   color: white;
   text-decoration:none;
}

. VTPSong {
   border:none;
}

. VTPSong: hover {
   box-shadow:0 0 10px red;
   -moz-box-shadow:0 0 10px red;
   -webkit-box-shadow:0 0 10px red;
}

. VTPSong to {
   color: red;
}

. VTP Song: hover to {
   color: red;
   text-shadow:0 0 5px orange;
   -moz-text-shadow:0 0 5px orange;
   -webkit-text-shadow:0 0 5px orange;
}

. Transparency {
   opacity:0.5;
}

. Transparency: hover {
   opacity:1;
}

#button-hub {
   margin-top:-5px;
}

#button-hub:hover {
   margin-top:8px ! important;
}

. Data Fund {
   background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/8/83/latest/2023028153220/Fondo_peces_transparente1.png") repeat;
   color: black;
}

. BackgroundData: hover {
   background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/e/e7/latest/20230218153340/Fondo_peces_transparente2.png") repeat;
}

. Notebook {
background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/thumb/f/f4/latest/20130722134407/Cuadrados.jpg/31px-Cuadrados.jpg") repeat;
}

table.general > thead > tr > th,
table.general > tbody > tr > th,
table.general > tbody > tr > td {
  padding: 0.4em 0.4em;
  overflow-wrap: normal;
}
table.general {
  border-collapse: collapse;
  border: none;
}

table.general > thead > tr > th,
table.general > tbody > tr > th {
  background-color: #00c400;
  border-color:#FFFFFF
}

table.general tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.general tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.general tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.general tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.general tr td {
  border-color: #00c400;
  border-style: solid;
  border-width: 1px;
}

/* Tables (Fandom styles) */
. WikiaTable,
.article-table {
 background:rgba(0,0,0,.02);
 border:0 var(#cecece);
 border-collapse:collapse;
 margin:1em 1em 1em 0
}
. WikiaTable td,
. WikiaTable th,
.article-table td,
.article-table th {
 border-bottom:1px solid #cecece;
 padding:6px 12px
}
. WikiaTable th,
.article-table th {
 background:rgba(0,0,0,.05);
 text-align:left
}
. WikiaTable caption,
.article-table caption {
 font-weight: 700
}

/*================================================
3D/2D Viewer
==================================================*/

/* 3D/2D viewer */
.container-2d {
  display: block;
  position: relative;
}

.viewer-2d {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.switch-to-3d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/6/65/latest/20240109181015/2D_icon.png");
  width: 40px;
  height: 37px;
  z-index: 999;
  opacity: 0.5;
  cursor :pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-2d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/7/7e/latest/20240109181003/3D_icon.png");
  width: 40px;
  height: 37px;
  z-index: 999;
  opacity: 0.5;
  cursor: pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-3d:hover, .switch-to-2d:hover {
  opacity: 1.0;
}

/* 3D model viewer */
.viewer-3d span {
    display: none;
}
.viewer-3d {
    margin: 4px;
    display: block;
    cursor: move;
    position: relative;
}
.viewer-3d-frame {
    position: absolute;
}
.viewer-3d-overlay {
    background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/e/ed/latest/20240104183854/3D_rotation_icon.png") bottom right no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    position: relative;
}
/* End 3D model viewer */

/* New 3D viewer specific CSS */
.viewer-3d-container {
  display: block;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  /*width: 288px;*/
}

.viewer-3d-container ul {
  padding: 0px;
  margin: 0px;
}
.viewer-3d-container ul li {
  display: block;
  margin: 0px;
  margin-top: 2px; /* For vertical spacing of the buttons */
  list-style: none;
  text-align: center;
}
.viewer-3d-container ul a {
  display: block;
  width: 134px;
  padding: 4px;
  text-decoration: none;
  font-size: 1.25em;
  opacity: .75;
}

.viewer-3d-container ul a:hover {
  opacity: 1;
}

.view-selector-default-left {
    border-radius: 10px;
    float: left;
    background: #e2e2e2;
}
.view-selector-default-right {
    border-radius: 10px;
    float: right;
    background: #e2e2e2;
}
.view-selector-default-full {
    border-radius: 10px;
    width: 100%;
    float: left;
    clear: both;
    background: #e2e2e2;
}
.view-selector-default-full a {
    width: 100% ! important;
}

/* End new 3D viewer */

/*================================================
Table styles
==================================================*/

/* -------- FISH TABLE -------- */
table.peces > thead > tr > th,
table.peces > tbody > tr > th,
table.peces > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.peces {
  position: relative; /* Add relative position to set the ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.5); /* Adjust the opacity value here for the background color */
  overflow: hidden; /* To prevent the ::before from extending beyond the table */
}

table.peces::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/7/70/latest/20240117085156/Fondo_peces.svg);
  background-size: 5em;
  opacity: 0.25; /* Adjusts the opacity value for the background image */
  z-index: -1; /* To place the image behind the content of the table */
}

table.peces > thead > tr > th,
table.peces > tbody > tr > th {
  background-color: #003BC4;
  border-color:#FFFFFF;
  color: white;
}

table.peces tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.peces tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr td {
  border-color: #003BC4;
  border-style: solid;
  border-width: 1px;
}

/* -------- TABLE BUGS -------- */
table.bichos > thead > tr > th,
table.bichos > tbody > tr > th,
table.bichos > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.bichos {
  position: relative; /* Add relative position to set the ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.3); /* Adjust the opacity value here for the background color */
  overflow: hidden; /* To prevent the ::before from extending beyond the table */
}

table.bichos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/a/a1/latest/20240117085221/Fondo_bichos.svg);
  background-size: 5em;
  opacity: 0.25; /* Adjusts the opacity value for the background image */
  z-index: -1; /* To place the image behind the content of the table */
}

table.bichos > thead > tr > th,
table.bichos > tbody > tr > th {
  background-color: #00c400;
  border-color:#FFFFFF;
}

table.bichos tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.bichos tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr td {
  border-color: #00c400;
  border-style: solid;
  border-width: 1px;
}

/* -------- TABLE CREATURES -------- */
table.criaturas > thead > tr > th,
table.criaturas > tbody > tr > th,
table.criaturas > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.creatures {
  position: relative; /* Add relative position to set the ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.7); /* Adjust the opacity value here for the background color */
  overflow: hidden; /* To prevent the ::before from extending beyond the table */
}

table.criaturas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/8/8f/latest/20240117085241/Fondo_criaturas_submarinas.svg);
  background-size: 5em;
  opacity: 0.25;
  z-index: -1;
}

table.criaturas > thead > tr > th,
table.criatures > tbody > tr > th {
  background-color: #7A00C4;
  border-color:#FFFFFF;
  color: white;
}

table.creatures tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.criaturas tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr td {
  border-color: #7A00C4;
  border-style: solid;
  border-width: 1px;
}

/* --------- GYROID TABLE -------- */
table.giroides > thead > tr > th,
table.giroides > tbody > tr > th,
table.giroides > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.giroides {
  position: relative; /* Add relative position to set the ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.5); /* Adjust the opacity value here for the background color */
  overflow: hidden; /* To prevent the ::before from extending beyond the table */
}

table.giroides::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/7/7a/latest/20240205225716/Fondo_giroides.svg);
  background-size: 5em;
  opacity: 0.35; /* Adjusts the opacity value for the background image */
  z-index: -1; /* To place the image behind the content of the table */
}

table.giroides > thead > tr > th,
table.giroides > tbody > tr > th {
  background-color: #B2820C;
  border-color:#FFFFFF;
  color: white;
}

table.giroides tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.giroides tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr td {
  border-color: #B2820C;
  border-style: solid;
  border-width: 1px;
}

/* Rounded Corners */
.roundy { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-border-radius: 20px; }
 
.roundytl { border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -o-border-top-left-radius: 20px; }
 
.roundytr { border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-right-radius: 20px; }
 
.roundybl { border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
 
.roundybr { border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-right-radius: 20px; }
 
.roundybottom { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-left-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-left-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-left-radius: 20px; -o-border-bottom-right-radius: 20px; }
 
.roundytop { border-top-left-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-left-radius: 20px; -o-border-top-right-radius: 20px; }
 
.roundyleft { border-top-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-top-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
 
.roundyright { border-bottom-right-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-topright: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-bottom-right-radius: 20px; -o-border-top-right-radius: 20px; }