@charset "utf-8";

/*----------------------
 * 513 /blog/html-css3-color-basic/ HTML色見本・CSS3・Basic
 *----------------------*/



@media screen and (min-width: 0px) and (max-width: 720px) {
  
  
}

/*----------------------
 * 515 /blog/html-css3-color-x11/ HTML色見本・CSS3・X11・Extend
 *----------------------*/
.color_palette_box {
}
.color_palette_column {
    box-sizing:border-box;
}
.color_rect_outer {
    margin:0 4px 4px 0;
}
.color_rect {
    color:#333;
    height:75px;
    padding:5px 7px;
    oveflow:hidden;
    cursor: pointer;
    box-sizing:border-box;
    margin:0 4px 4px 0;
    box-shadow:2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 6px;
}
.color_rect:hover {
    opacity:0.7;
}
.color_rect.black, 
.color_rect.dimgray, 
.color_rect.royalblue, 
.color_rect.midnightblue, 
.color_rect.navy, 
.color_rect.darkblue, 
.color_rect.mediumblue, 
.color_rect.blue, 
.color_rect.teal, 
.color_rect.darkslategray, 
.color_rect.darkgreen, 
.color_rect.green, 
.color_rect.darkolivegreen, 
.color_rect.sienna, 
.color_rect.saddlebrown, 
.color_rect.maroon, 
.color_rect.darkred, 
.color_rect.brown, 
.color_rect.firebrick, 
.color_rect.crimson, 
.color_rect.mediumvioletred, 
.color_rect.darkorchid, 
.color_rect.darkviolet, 
.color_rect.darkmagenta, 
.color_rect.purple, 
.color_rect.indigo, 
.color_rect.darkslateblue, 
.color_rect.blueviolet, 
.color_rect.slateblue {
    color:#fff;
}
.color_rect_name {
    white-space:nowrap;
    overflow:hidden;
    line-height:24px;
    font-size:0.95em;
}
.color_rect_hex_rgb {
    white-space:nowrap;
    overflow:hidden;
    line-height:24px;
    font-size:0.9em;
}
.color_rect_popup {
    font-size:16px;
    position:fixed;
    padding:5px 7px;
    width:300px;
    height:180px;
    z-index:100;
    color:#333;
    cursor: move;
    box-sizing:border-box;
    box-shadow:0px 0px 5px 0 rgba(0, 0, 0, 0.2);
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.color_rect_popup.black, 
.color_rect_popup.dimgray, 
.color_rect_popup.royalblue, 
.color_rect_popup.midnightblue, 
.color_rect_popup.navy, 
.color_rect_popup.darkblue, 
.color_rect_popup.mediumblue, 
.color_rect_popup.blue, 
.color_rect_popup.teal, 
.color_rect_popup.darkslategray, 
.color_rect_popup.darkgreen, 
.color_rect_popup.green, 
.color_rect_popup.darkolivegreen, 
.color_rect_popup.sienna, 
.color_rect_popup.saddlebrown, 
.color_rect_popup.maroon, 
.color_rect_popup.darkred, 
.color_rect_popup.brown, 
.color_rect_popup.firebrick, 
.color_rect_popup.crimson, 
.color_rect_popup.mediumvioletred, 
.color_rect_popup.darkorchid, 
.color_rect_popup.darkviolet, 
.color_rect_popup.darkmagenta, 
.color_rect_popup.purple, 
.color_rect_popup.indigo, 
.color_rect_popup.darkslateblue, 
.color_rect_popup.blueviolet, 
.color_rect_popup.slateblue {
    color:#fff;
}
.color_rect_popup_left {
    width:260px;
    padding-top:5px;
}
.color_rect_popup_right {
    width:25px;
}
.color_rect_popup_close {
    width:25px;
    height:25px;
    cursor: pointer;
    opacity: 0.7;
    border: 0;
    will-change: opacity;
    position: relative;
    transition-property: opacity;
    background-color: transparent;
}
.color_rect_popup_close;hover {
    opacity:1;
}
.color_rect_popup_close:before, .color_rect_popup_close:after {
    position: absolute;
    display: block;
    content: '';
    transition-property: background-color;
    background-color: #333;
}
.color_rect_popup.black .color_rect_popup_close:before, .color_rect_popup.black .color_rect_popup_close:after, 
.color_rect_popup.dimgray .color_rect_popup_close:before, .color_rect_popup.dimgray .color_rect_popup_close:after, 
.color_rect_popup.royalblue .color_rect_popup_close:before, .color_rect_popup.royalblue .color_rect_popup_close:after, 
.color_rect_popup.midnightblue .color_rect_popup_close:before, .color_rect_popup.midnightblue .color_rect_popup_close:after, 
.color_rect_popup.navy .color_rect_popup_close:before, .color_rect_popup.navy .color_rect_popup_close:after, 
.color_rect_popup.darkblue .color_rect_popup_close:before, .color_rect_popup.darkblue .color_rect_popup_close:after, 
.color_rect_popup.mediumblue .color_rect_popup_close:before, .color_rect_popup.mediumblue .color_rect_popup_close:after, 
.color_rect_popup.blue .color_rect_popup_close:before, .color_rect_popup.blue .color_rect_popup_close:after, 
.color_rect_popup.teal .color_rect_popup_close:before, .color_rect_popup.teal .color_rect_popup_close:after, 
.color_rect_popup.darkslategray .color_rect_popup_close:before, .color_rect_popup.darkslategray .color_rect_popup_close:after, 
.color_rect_popup.darkgreen .color_rect_popup_close:before, .color_rect_popup.darkgreen .color_rect_popup_close:after, 
.color_rect_popup.green .color_rect_popup_close:before, .color_rect_popup.green .color_rect_popup_close:after, 
.color_rect_popup.darkolivegreen .color_rect_popup_close:before, .color_rect_popup.darkolivegreen .color_rect_popup_close:after, 
.color_rect_popup.sienna .color_rect_popup_close:before, .color_rect_popup.sienna .color_rect_popup_close:after, 
.color_rect_popup.saddlebrown .color_rect_popup_close:before, .color_rect_popup.saddlebrown .color_rect_popup_close:after, 
.color_rect_popup.maroon .color_rect_popup_close:before, .color_rect_popup.maroon .color_rect_popup_close:after, 
.color_rect_popup.darkred .color_rect_popup_close:before, .color_rect_popup.darkred .color_rect_popup_close:after, 
.color_rect_popup.brown .color_rect_popup_close:before, .color_rect_popup.brown .color_rect_popup_close:after, 
.color_rect_popup.firebrick .color_rect_popup_close:before, .color_rect_popup.firebrick .color_rect_popup_close:after, 
.color_rect_popup.crimson .color_rect_popup_close:before, .color_rect_popup.crimson .color_rect_popup_close:after, 
.color_rect_popup.mediumvioletred .color_rect_popup_close:before, .color_rect_popup.mediumvioletred .color_rect_popup_close:after, 
.color_rect_popup.darkorchid .color_rect_popup_close:before, .color_rect_popup.darkorchid .color_rect_popup_close:after, 
.color_rect_popup.darkviolet .color_rect_popup_close:before, .color_rect_popup.darkviolet .color_rect_popup_close:after, 
.color_rect_popup.darkmagenta .color_rect_popup_close:before, .color_rect_popup.darkmagenta .color_rect_popup_close:after, 
.color_rect_popup.purple .color_rect_popup_close:before, .color_rect_popup.purple .color_rect_popup_close:after, 
.color_rect_popup.indigo .color_rect_popup_close:before, .color_rect_popup.indigo .color_rect_popup_close:after, 
.color_rect_popup.darkslateblue .color_rect_popup_close:before, .color_rect_popup.darkslateblue .color_rect_popup_close:after, 
.color_rect_popup.blueviolet .color_rect_popup_close:before, .color_rect_popup.blueviolet .color_rect_popup_close:after, 
.color_rect_popup.slateblue .color_rect_popup_close:before, .color_rect_popup.slateblue .color_rect_popup_close:after {
    background-color:#fff;
}
.color_rect_popup_close:before {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 12px;
    left: 0px;
    width: 24px;
    height: 2px;
}
.color_rect_popup_close:after {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 1px;
    left: 11px;
    width: 2px;
    height: 24px;
}
.color_rect_popup_label {
    width:50px;
}
.color_rect_popup_value {
    
}
.color_rect_popup_copy {
    padding-top:2px;
    padding-left:10px;
    cursor: pointer;
    font-size:14px;
    opacity: 0.7;
    color:orangered;
}
.color_rect_popup.coral .color_rect_popup_copy,
.color_rect_popup.tomato .color_rect_popup_copy,
.color_rect_popup.orangered .color_rect_popup_copy,
.color_rect_popup.red .color_rect_popup_copy,
.color_rect_popup.crimson .color_rect_popup_copy,
.color_rect_popup.mediumvioletred .color_rect_popup_copy,
.color_rect_popup.deeppink .color_rect_popup_copy,
.color_rect_popup.hotpink .color_rect_popup_copy,
.color_rect_popup.palevioletred .color_rect_popup_copy { 
    color:white;
}
.color_rect_popup_copy:hover {
    color:orange;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
  
  
}
/* ----------- 終了・515 /blog/html-css-color-x11/ HTML色見本・CSS3・X11・Extend ----------- */