/*---@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");--*/

body{
background: #9cbcda;
margin: 2.5em 15px 5px;
padding: 0;
}

body, td, p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
color: #3d3d3d;
}

button{
cursor:pointer;
}

/* === header elements === */

#hdrborders{
background:  #9cbcda url(/graphics/bluegradient.jpeg) bottom repeat-x;
border-top: none;
margin:  0 0 5px;
height: 8.75em;
padding: 0 0 0 0;
}

#header{
z-index:2;
position:absolute;
top:0;left:0;right:0;
margin: 0 16px;
height: 9.5em;
padding: .5em 10px 0 0;
text-align: right;
}

#header .header-logo{
height: 140px; width: auto;
}

#header .header-link{
position: absolute;
top:0;left:0;
}

#header .header-tagline{
border-top: 2px solid #567eb9;
clear: both;
color: #003b77;
font-size: 17px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
width: 100%;
}

#header img{
padding: 5px 0 0;
}

#usercenter, #cart, #search{
float: right;
overflow: auto;
}

#usercenter{
margin-bottom: -15px;
width: 18.5em;
height: 9.5em;
}

#cart{
width: 18em;
background: white;
}

#cart_content{
margin:0;
       margin-right:5px;
padding:0;
	font-size:85%;
}

#cart form{
padding:0;
margin:0;
}

.smaller{
	font-size: 80%;
padding:0 4px;
}

#cart button{
border:none;
       background-color:white;
color:#567eb9;
      font-weight:bolder;
      font-size:90%;
padding:0;
margin:0;
       margin-left:20px;
}

#cart form ol{
	list-style:none;
margin:0;
padding:0;
}

#cart form li{
display:block;
width:20em;
      text-align:right;
padding:0 0;
}

#cart .required{
display:none;
}

#cart form li.reqnote{
display:none;
}

#cart form div.element {
display: inline;
margin: 5px 0 0 5px;
padding: 0;
}

#cart a:link, #cart a:visited{
	text-decoration:none;
color:#567eb9;
}
#cart a:hover{
	text-decoration:underline;
}

#search{
margin: .5em 0 0 0;
width: 18em;
background: #567eb9;
}

#search input, #cart input{
	font-size: 70%;
}

#search button{
	background-color: #567eb9;
border:none;
color:white;
}

#search form{
margin: .25em 0;
}

/* === menu elements === */

#menu{
margin: 10px 0 5px;
	background-color:#567eb9;
	border-right: 1px solid #666666;
	border-top: 1px solid #666666;
	/*border-left:none;*/
overflow: auto;
clear: both;
       text-align: justify;
padding:1px;
}


#menu :link, #menu :visited{
color: white;
       text-decoration: none;
padding: 0 .25em 0 1em;
	 border-bottom: 1px solid #666666;border-top: none;
	 border-left: 1px solid #666666;border-right: none;
}

#menu a.current , #menu a.current, #menu :hover{
	background-color:#fed466;
color: #567eb9;
}

#menu a.last, #menu a.last{
	border-right: 1px solid #666666;
}

/* === leftbar elements === */

#leftbar{
margin: 5px 5px 5px 0;
width: 200px;
       min-height: 38em;
height:auto !important;
height:38em;
float:left;
overflow: auto;
background: white;
padding: 5px;
}

#leftbar a:link, #leftbar a:visited, #rightbar a:link, #rightbar a:visited{
	text-decoration:none;
display:block;
padding:2px 10px 2px 15px;
	text-indent:-10px;
color:#3d3d3d;
}

#leftbar a:hover, #rightbar a:hover{
	background-color:#fed466;
}

#leftbar h1 a:link, #leftbar  h1 a:visited{
color: white;
       text-decoration: none;
padding:0 0 0 10px;
margin:0;
}

#leftbar h1 a:hover{
background:#567eb9;
color: white;
}

#floater{
position: absolute;
top:20px;
left:-5000px;
     z-index:10;
     /*width:600px;*/
height:600px;
background: white;
padding: 15px;
overflow:auto;
display:none;
}
div.column a:link, div.column a:visited, #floater a:link, #floater a:visited{
display:block;
border:solid 1px white;
width:245px;
float:left;
color:#3d3d3d;
      text-decoration:none;
padding:0 10px 0 30px;
	text-indent: -25px;
}
div.column{
width:275px;
float:left;
}
#floater a:hover{
	background-color:#fed466;
}

/* === rightbar elements === */

#rightbar{
margin: 5px 0 5px 5px;
width: 200px;
float:right;
      min-height: 38em;
height:auto !important;
height:38em;
_height:1%; /* ie 6 hack */
overflow: auto;
background: white;
padding: 5px;
}

/* === main elements === */

#main{
margin: 10px 5px 5px;
	min-height: 38em;
height:auto !important;
height:38em;
_height:1%;/* ie 6 hack */
overflow: auto;
background: white;
padding:5px;
}

#main a:link, #main a:visited{
	text-decoration:none;
color:#567eb9;
}


#main h1 a:link, #main  h1 a:visited{
color: white;
       text-decoration: none;
padding:0;
margin:0;
}

#pagenav, #displayoptions{
	margin-bottom:.5em;
	font-size:80%;
clear: both;
overflow:auto;
}

.promo-grabber-image, .promo-grabber-text{
margin: 2em;
position: relative;
}

.promo-grabber-image img{
width: 100%;
height: auto;
}


/* === quickform ===*/
#main form{
margin: 0; 
}

#main form ol, #rightbar form ol{
	list-style:none;
margin:0 0;
padding:0;
}

#main form li, #rightbar form li{
	text-align:right;
padding:0 0;
margin:1px;
}

#main form legend, .required, .section{
color:#567eb9;
      font-weight:bolder;
}

fieldset{
display:block;
border:none;
overflow:auto;
padding:0;
}

#mainForm fieldset{
width: 400px;
float:left;
}

#mainForm fieldset.right{
float:right;
      margin-right:100px;
}

#mainForm fieldset.wide{
width:850px;
}

#mainForm li.reqnote{
display:none;
}

form.narrow fieldset{
width:325px;
}

form.special fieldset{
width:500px;
float:left;
}

#login fieldset, #sendpw fieldset, #customer fieldset, #phone fieldset{
float:left;
}

/** quick order **/
.quick-order-in-basket{
background: #fed466;
}

#quick-order-help{
background: white;
border: 1px solid black;
	box-shadow: 2px 2px 4px 4px gray;
display: none;
padding: 1em;
position: absolute;
width: 500px;
top: 150px; left: 300px;
}

#quick-order-help img{
	box-shadow: 2px 2px 4px 2px gray;
	margin-bottom: 2em;
}

.qohelp #quick-order-help{
display: block;
}

.get-quick-order-help{
color: #fed466;
cursor: pointer;
	font-weight: bold;
	font-size: 18pt;
	text-shadow: 2px 2px 4px gray;
}


#quicklogin fieldset{
float:right;
}

#main #customer td{
	font-size:10pt;
	text-align:left;
}

#main #customer td.section{
	font-size:12pt;
}

#main #customer td table{
float:left;
}

#main #customer td.ident{
	padding-right:10px;
	text-align:right;
width:125px;
}

#placeOrder fieldset, #checkOut fieldset{
width: expression(document.body.clientWidth > 1165? "650px" : "auto");
       max-width:650px;
}

#placeOrder button {
color:#567eb9;
      font-weight:bolder;
      font-size:90%;
padding:0;
margin:0;
       margin-left:20px;
}

#main form label.element {
display: block;
float: left;
width: 300px;
padding: 0;
margin: 0 0 0 0;
	text-align: right;
	font-size: 10pt;
}

#main form fieldset.wide label.element {
display: inline;
	 font-size: 10pt;
width:auto;
float:none;
}

#main form label.inline {
display: inline;
padding:0 5px;
	font-size: 10pt;
}

#main #mainForm input{
margin:0;
}

#breaker{
border: solid 1px black;
height:10px;
clear:both;
}


#main form #clearing{
float:none;
}


#main form div.element {
display: inline;
margin: 5px 0 0 10px;
padding: 0;
clear:right;
}

#main #addcart .reqnote, #main #addcart .required, form.inlinelist .required, form.inlinelist .reqnote{
display:none;
}

#addfavs{
clear:left;
float:left;

}

#addcart button, #addfavs button, #favorites button, button.subtle, a:link.linkButton, a:visited.linkButton,#main a:link.linkButton, #main a:visited.linkButton, form.inlinelist button, #threads button{
border:none;
       background-color:#567eb9;
color:white;
      font-size:90%;
padding: 2px 4px;
	 margin-right:5px;
}

#main a:link.linkButton.selected, #main a:visited.linkButton.selected{
	background-color: #fed466;
	box-shadow: 2px 2px #888888;
color: black;
}


.inlinelist ol li{
display:inline;
}

#main #addcart div.element {
display: inline;
margin: 5px 0 0 10px;
padding: 0;
}

#main #addcart label.element {
display: inline;
clear:none;
float:none;
width:0;
}
/* === thumbnails === */
.thumbnail{
position:relative;
display:block;
float:left;
border: solid white 1px;
width: 130px;
height: 160px;
	font-size: 80%;
padding:5px;
overflow:hidden;
}

#rightbar .thumbnail{
height:auto;
}

.thumbnail:link, .thumbnail:visited{
	text-decoration:none;
color:#3d3d3d;
}
.imagetag{
	font-size: 80%;
}

#rightbar .thumbnail:hover, #rightbar .imagetag:hover{
	background-color:white;
}

.thumbnail img{
border: solid 1px #567eb9;
padding: 2px;
}

.image-container{
position: relative;
}
.image-container img{
	max-width: 100%; max-height: 100%;
}
/*----icons----*/
div.special{
background:url(/graphics/icons1.gif) no-repeat -3px -38px;
position:absolute;
top:28px;
left: 2px;
width:45px;
height:27px;
}

div.new{
background:url(/graphics/icons1.gif) no-repeat -3px -3px;
position:absolute;
top:2px;
left:2px;
width:45px;
height:27px;

}

div.top50{
background:url(/graphics/icons1.gif) no-repeat 0px -69px;
position:absolute;
top:1px;
left:50px;
width:55px;
height:27px;

}

div.pending{
	background-color:#567eb9;
border:2px #fed466 dashed;
position:absolute;
top:3em;
left:2px;

}
div.inside{
	background-color:white;
color:red;
border:1px black solid;
padding:1px 4px;
}

span.rightarrow{
background:url(/graphics/icons1.gif) no-repeat -65px -9px;
padding: 0px 8px;
margin:0px 0px;
}


span.lastarrow{
background:url(/graphics/icons1.gif) no-repeat -62px -102px;
padding: 0px 10px;
margin:0px 0px;
}

span.leftarrow{
background:url(/graphics/icons1.gif) no-repeat -62px -39px;
padding: 0px 8px;
margin:0px 0px;
}

span.firstarrow{
background:url(/graphics/icons1.gif) no-repeat -62px -75px;
padding: 0px 10px;
margin:0px 0px;
}
/* === calendars === */

.tinycalendar{
	font-size: 10px;
}

.calendarHeader{
	background-color: #9cbcda;
padding:3px 0;
width:14.28%;
      font-style: normal;
      font-weight:100;
color: white;
}

.calendarDay{
	background-color: white;
border: solid 1px #516140;
}

.calendarBlank{
	background-color: #eae9e8;
border: solid 1px #516140;
}

.calendarToday{
	background-color: #fed466;
border: inset 1px #516140;
}
.calendarToday a{
	background-color: #fed466;
}

/* === details === */

.detail .text{
padding:5px;
float:left;
width: auto !important;
width: 350px;
       min-width:200px;
       max-width:350px;
}

.detail dt, .dterm{
width: 7em;
       text-align:right;
color:#567eb9;
      font-weight:bold;
display:inline-block;
	white-space:normal;
	word-wrap:break-word;
}

.detail dd{
	margin-left: 7.5em;
position:relative;
top: -1.15em;
     margin-bottom:-.65em;
     text-align:left;
}

.detail .image-container{
margin:15px;
border: none;
}

.detail .items{
    margin-top: 0;
    margin-bottom: 0;
}

.detailleft{
float:left;
}

.detail-only{
display: none;
}

.detail .detail-only{
display: block;
}

/*===== misc display elements =====*/
.grayborders, h1{
border: 1px solid #666666;
}

h1{
background:#567eb9;
color: white;
padding:5px;
	font-size:100%;
	font-weight:normal;
margin: 0;
}

input{
border: 1px solid #666666;
margin:1px;
padding:2px;
}

th{
	font-weight:normal;
	text-align:center;
	background-color:#D4E2EF;
	border-bottom:solid 1px #666666;
}

.warning, dt.warning{
color:red;
}

.numeric{
	text-align:right;
}

.even{
	background-color:#D4E2EF;
}

.orderftr{
	background-color:#FFFFCC;
}

.closer:link, .closer:link{
	background-color:silver;
color:black;
}

.closer:hover{
	background-color:white;
color:black;
}

.hilight{
	background-color:pink;
}