Bootstrap Css Playground

bootstrap-css-playground.png
/* Autumn Theme */
/* @import url("/css:autumn/code/1"); */
 
/* PaintStrap - Adobe Kuler ID 3103343 (brown tones) */
@import url("/css:3103343/code/1");
 
/* http://bootswatch.com/ - Cyborg Theme */
/* @import url("/css:bootswatch-cyborg/code/1"); */
 
/* http://bootswatch.com/ - Amelia Theme */
/* @import url("/css:bootswatch-amelia/code/1"); */
 
@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
/* ---------------------------------------------------------------------------------
    Enable this to allow sites to go full width on desktops
    --------------------------------------------------------------------------------
.container {
    max-width: 100%;
}
----------------------------------------------------------------------------------- */
 
.description-block{color:black}  /* added this for better readability */
 
.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.printuser img.small {
    max-width: 33px; /* fixes the display of the user avatar */
}
/* added this class to center the site logo and other images */
.img-center {
    margin: 0 auto;
}
/* LoginStatus dropdown menu on top */
.dropdown-menu {
    z-index: 1001 /* was 1000, same as .navbar */
}
.bs-callout-danger {
    background-color: #FCF2F2;
    border-color: #DFB5B4;
}
.bs-callout-info {
    background-color: #F0F7FD;
    border-color: #D0E3F0;
}
.bs-callout {
    border-left: 5px solid #EEEEEE;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
}
.post-container {
    border-left: 5px solid #EEEEEE;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    background-color: #F0F7FD;
    border-color: #D0E3F0;
}
#odialog-container {
    z-index: 1100; /* move shaded dialogs on top of everything */
}
.modal {
    /* display: block; (fix for page lock conflict?) */
    /* Kenneth: removed temporarily as it breaks modals */
}
 
/*  Login Status (Timothy Foster)
===================================*/
/* * When Logged In * */
.loginStatus .printuser{  font-size: 0; }
.loginStatus .printuser img{
    max-width: 20px !important;
    padding: 0 !important;
    background-image: none !important;
    width: 20px;
    border-radius: 10px;
}
 
.loginStatus{  padding-top: 3px; }
.loginStatus .btn{
    background: none;
    border: none;
    padding: 0;
}
.loginStatus .btn.disabled{
    position: relative;
    left: 23px;
    top: 4px;
    z-index: 50;
}
.loginStatus .btn.dropdown-toggle{
    width: 28px;
    height: 28px;
    border: 1px solid #E3E3E3;
    border-radius: 14px;
    z-index: 49;
}
.loginStatus .btn.dropdown-toggle:hover{
    background: #EEE;
    border-color: #D7D7D7;
}
.caret{  visibility: hidden; }
.loginStatus ul{  left: -102px; }
.loginStatus ul li i{  margin-right: 7px; }
.loginStatus ul li a:hover,
.loginStatus ul li a:focus,
.loginStatus ul li a:hover i,
.loginStatus ul li a:focus i{
    color: #FFF;
}
 
/* * When Logged Out * */
.loginStatus .login-status-create-account,
.loginStatus > span{
    display: none;
}
.loginStatus .login-status-sign-in{
    background: #FFF;
    border: 1px solid #E3E3E3;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    color: #000;
    font-size: 0;
    padding-top: 2px;
}
.loginStatus .login-status-sign-in::before{
    font-family: 'FontAwesome';
    font-size: 16px;
    content: '';
}
.loginStatus .login-status-sign-in:hover{
    border-color: #D7D7D7;
    background: #EEE;
}
.loginStatus button .badge{
    position: absolute;
    top: 1px;
    left: -32px;
}
.loginStatus ul li a .badge{  margin-left: 10px; }
/*===================================
                 End Login Status  */
 
/* Missing from bootstrap base.css */
iframe.html-block-iframe {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
}
 
#page-content .image-box{  border-color: #C7A685; }
#page-content .image-box .image-box-heading{
    background: #571300;
    color: #FEFCFC;
}
#page-content .image-box .image-box-link:hover{
    border-color: #712A00;
}
#page-content .image-box .image-box-caption{  color: #7D6A66; }
 
/* Breadcrumbs styling */
.breadcrumbs, .forum-breadcrumbs {
    margin: -15px 0 10px 0;
    font:italic bold 12px/20px Arial, sans-serif;
}

サポートサイト Wikidot.com