/**************************************************************************************************
| Software Name        : Site Template - Jo-Williams
| Software Author      : Neil Waters
| Website              : https://jo-williams-ceramics.co.uk/
| Copyright (c) Feb 2026 jo-williams-ceramics.co.uk. All rights reserved.
|**************************************************************************************************/


body {
        background: #CFECEC;
        font-family: "Lucida Sans", Verdana, sans-serif;
}

span.dropt {
        border-bottom: thin dotted; 
        background: #CDF0F6;
}
span.dropt:hover {
        text-decoration: none; 
        background: #CDF0F6; 
        z-index: 6; 
}
span.dropt span {
        z-index: 6;
}
span.dropt:hover span {
        left: 2%; 
        background: #CDF0F6;
} 
span.dropt span {
        position: absolute; 
        left: -9999px;
        margin: 2px 0 0 0px; 
        padding: 3px 3px 3px 3px; 
        border-style:solid; 
        border-color:black; 
        border-width:1px;
}
span.dropt:hover span {
        margin: 2px 0 0 170px; 
        background: #ffffff; 
        z-index:6;
} 


a:link {  
	color: #002100; 
	text-decoration: none;
}

a:visited { 
	color: #002100; 
	text-decoration: none;
}

a:hover { 
	color: #283628; 
	text-decoration: none;
}

.main img {
       width: 100%;
}

h1{
       font-size: 1.7em;
}

h2{
       font-size: 1.5em;
}

.jo {
    margin-left: 50px;
}

.jo img {
    width: 30px;
}
.header {
       padding: 1%;
       background: url(/img/head.png) no-repeat;
       background-size: cover;
       border: 1px solid #99FF99;
       border-radius: 1em;
}
.header h1{
      font-size: 1.7em;
      color: #FFFFFF;
      text-indent: 20px;
}

.menuitem {
      text-align: center;
      color:#000080;
      margin: 4.5%;
      margin-left: 0;
      margin-top: 0;
      padding: 4.5%;
      background-color: #92d3d3;
      border-bottom: 1px solid #3455cb;
      border-radius: 1em;
      cursor: pointer;
      box-shadow: 4px 4px 3px #7B7B7B;
      width: 98%;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.menuitem:hover {
     color:#000080;
      background-color: #3b9191;
      box-shadow: 3px 3px 2px #414141;
}
.menuitem a {
      display: block;
      width: 100%;
}
.main {
     padding: 2%;
}

.right {
     padding: 4.5%;
     background-color: #92d3d3;
     border: 1px solid;
     border-color: #b3b3ff;
     border-radius: 1em;
     text-align: left;
     text-indent: 8px;

}

.footer {
     padding: 1%;
     text-align: center;
     background-color: #92d3d3;
     border: 1px solid #b3b3ff;
     border-radius: 1em;
     font-size: 0.75em;
}
a.sig:link {
    color: #000066;
    font-family: Lucida Handwriting;
}

.gridcontainer {
     width: 100%;
}

.gridwrapper {
      width: 98%;
      overflow: hidden;
}

.gridbox {
    margin-bottom: 2%;
    margin-right: 2%;
    float: left;
}

.gridheader {
    width: 100%;
}

.gridmenu {
    width: 12%;
}

.gridmain {
    width: 58%;
}

.gridright {
    width: 23.5%;
    margin-right: 0;
}

.gridfooter {
    width: 100%;
    margin-bottom: 0;
}

input.btn {
    background: #03487D;
    border: 0;
    border-radius: 0.35em;
    padding: 5px;
    color: #fff;
    font-weight: bold;
    font: bold 1.2em "Trebuchet MS", Arial;
    cursor: pointer;
    box-shadow: 6px 6px 4px #7B7B7B;
}
input.btn:hover{
    background: #035596;
}
.mobmenu {
    display: none;
}
.menunav {
    display: block;
}
@media only screen and (max-width: 500px) {
.mobmenu {
    display: block;
    text-align: center;
} 
.menunav {
    display: none;
}    
.gridmenu {
    width: 98%;
    display: block;
    text-align: center;
    }

.header h1{
    text-indent: 0px;
}

.menuitem {
    width: 80%;
    margin-left: 10%;
    display: block;
    text-align: center;
}

.gridmain {
   width: 100%;
}

.main {
   padding: 1%;
}

.gridright {
   width: 100%;
}

.right {
   padding: 1%;
}

.gridbox {
   margin-right: 0;
   float: left;
}
}