User:Perseonn/common.css

Note: After saving, 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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

table.repha-table th a,
.btn-primary a {
    color:#ffffff;
}
 
.btn-primary a:hover {
    color:#f4eff1;
    text-decoration:none;
}
 
.text-color-1{
    color: #F4EFF1;
}
.text-color-2{
    color: #F5D4D2;
}
.text-color-3{
    color: #F3AABC;
}
.text-color-4{
    color: #F6DEE6;
}
 
.infobox-header,
table.repha-table th,
.text-color-5{
    color: #E1808E;
}
 
.form-group:nth-child(2n+0),
table.repha-table tr:nth-child(2n+0),
.bg-color-1{
    background-color: #F4EFF1;
}
 
.bg-color-2{
    background-color: #F5D4D2;
}
 
.bg-color-3{
    background-color: #F3AABC ;
}
 
.infobox-header,
table.repha-table th,
.bg-color-4{
    background-color: #F6DEE6;
}


/*    CAST-ROSTER
==============================================================================*/
.enable-none {display:none;}
.enable-yes > .enable-none {display:inline!important;}
.cast-roster-middle {max-height:192px;}
.cast-roster-middle-top {height:96px; padding-left:1em; padding-top: 0.5em;}
.cast-roster-middle-bottom {height:95px; padding:1em; border-top: 1px solid #ddd; background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%); font-size:80%;}
.cast-roster-line-container {margin-top:5px;}
.cast-roster-line {border-left:6px solid #43731d; padding-left: 4px; font-size:108%;}
.cast-roster-image {max-width:100%;}
.cast-roster-category {font-size:90%;}
.cast-roster-category p {margin-bottom: 0px;}
.cast-roster-name {font-size: 160%;}
.cast-roster-panel-small {margin-bottom: 6px}
.cast-roster-panel-main {margin-bottom: 0.5em;}
.cast-roster-category, .cast-roster-middle, .cast-roster-middle-bottom  {width:100%;}
.cast-roster-extra {padding: 0px 4px; height: 18px;}
.cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .cast-roster-image-container{float:left;}
    .cast-roster-image{border-top-right-radius: 4px; border-top-left-radius: 4px;}
    .hidden-sm{display:none;}
}
 
@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .cast-roster-middle{max-width:496px;}
    .cast-roster-image-container{float:right;}
    .cast-roster-image{max-height:191px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
    .hidden-md{display:none;}
}
 
@media (min-width: 1200px){
    /* Large */
    .cast-roster-middle{max-width:535px;}
    .cast-roster-image-container{float:right;}
    .cast-roster-image{max-height:191px;border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
}


/*    BOOTSTRAP-BORROWED ROUTINE
==============================================================================
The media width are bootstrap standard, please do not ask to change it.*/

@media (max-width: 767px){
    /* Ex-Small */
    .hidden-xs{display:none;}
}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .hidden-sm{display:none;}
}

@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .hidden-md{display:none;}
}

@media (min-width: 1200px){
    /* Large */
    .hidden-lg{display:none;}
}


/*    RING CONTAINER
==============================================================================*/
.float-left{float:left;}
.ring-container{display:inline-block;}
.ring-container, .ring-container-name {width:100%}

@media (max-width: 767px){
    /* Ex-Small */
    .hidden-xs{display:none;}
    .ring-container-name{max-width:100%;}
}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .hidden-sm{display:none;}
    .ring-container-name{max-width: 256px;}
}

@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .hidden-md{display:none;}
}

@media (min-width: 1200px){
    /* Large */
    .hidden-lg{display:none;}
}