body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}


@media screen and (min-width: 800px){
    #top-background {
	height: 70px; 
	background-repeat: repeat-x;
	background-image: url("../../media/pict/bg_header.jpg");
	/* opc-adapt-url background-image: url("../media/pict/bg_header.jpg"); */
    }

}


@media screen and (max-width: 800px){
    #top-background { background-color: #B8860B; height: 60px; }
    #top-title {height: 60px; }
}






/* ------------------------------------------------------------
   Color Collection 
 ____________________________________________________________ */

#color-cur { width: 100%; background-color: #eee; padding: 0.25em 0; }
#color-cur tr { height: 1.25em;}
#color-cur tr.cc-col { height: 2.5em;}
#color-cur tr.cc-txt { height: 2.5em;}
#color-cur td { width: 50%; text-align: center;}


#shop { text-align: left;}
#shop h4 {margin: 1em 0 0 0; font-size: 120%;}
#shop-list { font-family: monospace; padding-top: 1em;}


/* ------------------------------------------------------------
   Color fields
------------------------------------------------------------ */
.col-coll { cursor: crosshair; }
span.color-click { cursor: crosshair;}
.color-res { display: inline-block; width: 100%; padding: 0.2em 0.4em;}







/* ============================================================
   Gradienten
============================================================ */

form.grad input {text-align: center;}
form.grad { margin: 0 1em 1em 0;}
#res-block {float: left; }
#res-img { cursor: crosshair; max-width: 100%; }
#res-img-sub { text-align: right;}


#intro { display: flex; flex-wrap: wrap;}
#intro > div { width: 12em; text-align: center;}
#intro > div a { text-decoration: none; color: #00008B;}


#inp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 25em;

    border: solid 1px #888;
    background-color: #efefef;
}

#inp > div { text-align: center; margin: 0.25em 0.5em; min-width: 5em; }
#inp h5 { margin: 0.5em 0.25em 0.25em 0.25em; }
#inp > div#grad-start { width: 100%; ;}
#inp span.btn { cursor: pointer;}








/* ------------------------------------------------------------
   All Colors at once
------------------------------------------------------------ */

div.color-field-xs { cursor: crosshair; }
div.color-field-xs span { display: inline-block;}



/* ------------------------------------------------------------
   Single Color Item
------------------------------------------------------------ */

div.color-table-item { display: inline-block; margin-bottom: 0.5em; width: 6em;}
div.color-table-item span { display: block; text-align: center; padding: 0 0.25em;}
div.color-table-item span.color-name { overflow: hidden; }


/* Single elements */
span.color-hex   { padding-left: 1em; font-family: monospace;}
span.color-name  { padding-left: 1em; font-size: 80%; }




/* ------------------------------------------------------------
   Table-one and Table-name page
------------------------------------------------------------ */

#tab-header { display: flex; width: 100%; margin-bottom: 1em; }

#tab-header-left { flex-grow: 1; }
#tab-header-left > div > button { border: solid 1px #444; width: 2em; background-color: #F9E8C3; cursor: pointer;}
#tab-header-left > div > button.let-this {  background-color: black; color: #F5DEB3; }
#tab-header-left > div > button:hover {  background-color: #B8860B; color: white;}

#tab-header-right { margin-left: 1em; text-align: right; min-width: 9em;}
#tab-header-right > div { text-align: right;}




/* ------------------------------------------------------------
   Search Page 
------------------------------------------------------------ */

#srchres .srchres-btn { float: right; }
#srchres {margin-bottom: 1em; }