HTML { FONT-FAMILY: Verdana, Arial, sans-serif; FONT-SIZE: 16px; }

BODY
{
border: 1px solid #666666;
 background-color: #ffffff;
 background-image: url('i/puzbg.jpg');
 COLOR: #000000;
 margin: 0 0 0 0;
 text-align: center;
 max-width: 100%;
}

INPUT, SELECT, TEXTAREA, SUBMIT, BUTTON  { BACKGROUND-COLOR: #ffffff; COLOR: black; FONT-SIZE: 1.0rem;  }
input[readonly], select[readonly] { background-color:#e0e0e0; }

.textinput { float: left; width: 100%; max-width: 500px; min-height: 75px; outline: none; resize: none; border: 1px solid grey; }

H1 { font-size: 1.4rem; display:inline; }
H2 { font-size: 1.2rem; display:inline; }
H3 { font-size: 1.1rem; display:inline; }

A { COLOR: #273720; FONT-WEIGHT: bold; }
A:hover { COLOR: red; TEXT-DECORATION: none; }

.banner-text
{
  border: 0 solid black;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}

.banner-logotxt { display:inline; }
.banner-logo { display:none; }
.contactdiv  { BACKGROUND-COLOR: #ffffff; border: 1px solid black; margin: auto; max-width: 96%;  padding: .5rem; text-align: left; }

img { max-width: 96%; }

.himg { 
display: none;
 }

.pic_cont { position: relative; max-width:500px; }
.delpic {position:absolute; right:50%; }
.puzpic { max-width: 96%; }
.puzpicth { float: left; max-width: 46%; margin: 0.2rem; border: 0px solid #666666;}

.puzstep
{
	border: 0px solid #666666;
        max-width:94%;
//        float: left;
 	padding: .4rem;
}

.puzdata, .puzdata-new, .puzdata-inact, .puzdata-backroom, .puzdata-backroomreq, .puzdata-backroomin, .puzdata-backroomout
{
	max-width: 52%;
        border: 0px solid #666666;
        float: left;
}

.puzdata-backroom
{
	background-color: #ffeedd;
}

.puzdata-backroomreq
{
	background-color: #ffddcc;
}

.puzdata-backroomin
{
	background-color: #ffccbb;
}

.puzdata-backroomout
{
	background-color: #ffbbaa;
}

.puzdata-new
{
	background-color: #ffaa99;
}

.puzdata-inact
{
	background-color: #ff9988;
}

.puzdiv
{
	border: 0px solid #666666;
        max-width:98%;
        min-height: 120px;
        float: left;
 	padding: .1rem;
	margin: .4rem auto;
}

.puzlib-info
{
	border: 0 solid #273720;
	margin: 0 auto;
        max-width:1000px;
}

.puzlib-details
{
        border: 0px solid #273720;
 	background-color: #ffffff;
 	margin: 0.5rem;
        max-width:900px;
 	padding: 0.1rem;
        text-align: left;
}

.puzlib-highlight, .puzlib-highlight-new
{
        border: 1px solid #555555;
        background-color: #ffffee;
 	margin: 0.5rem;
 	padding: 0.1rem;
        text-align: left;
}

.puzlib-highlight-new
{
        background-color: #ffffcc;
}

.smallonly
{
        border: 0px solid #273720;
 	background-color: #ffffff;
 	margin: 0.5rem;
 	padding: 0.1rem;
        text-align: left;
}

.float-box
{
 background-color: #eeeeee;
 border: 1px solid #273720;
 display: inline-block;
 margin: 0.2rem;
 max-width: 98%;
 padding: 1.0rem;
 text-align: left;
 vertical-align: top;
}

.yellow-box
{
 background-color: #FFFFCC;
 border: 2px solid black;
}


/* max width of lg stylo 3 */
@media screen and (min-width: 985px)
{
.puzdata, .puzdata-new, .puzdata-inact, .puzdata-backroom, .puzdata-backroomreq, .puzdata-backroomin, .puzdata-backroomout { max-width: 55%; }
.puzpic { max-width: 500px; }
.smallonly { display:none; }
.puzpicth { max-height: 160px; max-width: 200px; }
.puzdiv, .pzdiv-new { width: 49%; min-height: 170px; }
.contactdiv { max-width: 500px; }
.banner-logotxt { max-width: 78%; }
.banner-logo { display:inline; max-width: 20%; }
.float-box { max-width: 28%; }

}