@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');

BODY{
background:#FFFFFF url(../gifs/back2.jpg) repeat-x;
background: linear-gradient(to top, #5aa4dc 0%, #a3def8 100%);
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
margin:11px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {overflow-y: scroll;} 


P.clear{
clear:both;
}



#home
{
  display: block;
  width: 152px;
  height:48px;
margin:0px;
padding:0px;
  background: url("../gifs/homeicon.jpg") no-repeat 0 0;
float:none;
}

#home span
{
  position: relative;
  top: -999em;
}


#terms
{
  display: block;
  width: 152px;
  height:48px;
margin:0px;
padding:0px;
  background: url("../gifs/termsicon.jpg") no-repeat 0 0;
float:none;
}

#terms span
{
  position: relative;
  top: -999em;
}


#reviews
{
  display: block;
  width: 152px;
  height:48px;
margin:0px;
padding:0px;
  background: url("../gifs/reviewsicon.jpg") no-repeat 0 0;
float:none;
}

#reviews span
{
  position: relative;
  top: -999em;
}

#contact
{
  display: block;
  width: 152px;
  height:48px;
margin:0px;
padding:0px;
  background: url("../gifs/contacticon.jpg") no-repeat 0 0;
float:none;
}

#contact span
{
  position: relative;
  top: -999em;
}

.productboxsleeve{
width:970px;
margin-right:auto;
margin-left:auto;
}

.featuredbox{
float:left;
min-height:99px;
margin:9px;
}

.mainscreen{
text-align:center;
width:980px;
margin-right:auto;
margin-left:auto;
}

.topmainpanel{
background:transparent;
width:980px;
clear:both;
}

.mainpanel{
background:#FFFFFF url(../gifs/header2025.jpg) no-repeat;
width:980px;
margin:0px;
border-radius: 16px;
}

.footersleeve{
margin-top:55px;
padding-top:17px;
padding-bottom:45px;
background:#FFFFFF url(../gifs/back2.jpg) repeat-x;
width:100%;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
border-radius: 16px;
}
.footer{
margin-right:auto;
margin-left:auto;
}
IMG.creditcards{
float:right;
}

.navigation{
padding:0px;
}

.textblock{
width:640px;
background:transparent;
border:0px;
float:left;
margin-top:330px;
}

.leftblock{
width:190px;
background:transparent;
border:0px;
float:left;
margin-top:160px;
margin-left:6px;
}

.logobox{
width:340px;
float:left;
margin-left:7px;
margin-top:168px;
}


.navigationbox{
width:179px;
background:#a71e7d;
color:#FFFFFF;
font-family:Verdana, Tahoma,Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
float:left;
padding:0px;
margin:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

.boxtop{
height:31px;
width:179px;
background:url(../gifs/boxtop.gif) top no-repeat;
}


.boxbtm{
height:31px;
width:179px;
background:url(../gifs/boxbtm.gif) top no-repeat;
}


.navigationbox2{
width:179px;
background:url(../gifs/boxbg2.gif) bottom repeat-y;
color:#FFFFFF;
font-family:Verdana, Tahoma,Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
float:left;
}

.boxtop2{
height:31px;
width:179px;
background:url(../gifs/boxtop2.gif) top no-repeat;
}


.boxbtm2{
height:31px;
width:179px;
background:url(../gifs/boxbtm2.gif) top no-repeat;
}


.navigationbox3{
width:250px;
background:url(../gifs/boxbg3.gif) bottom repeat-y;
color:#FFFFFF;
font-family:Verdana, Tahoma,Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
float:left;
}

.boxtop3{
height:31px;
width:250px;
background:url(../gifs/boxtop3.gif) top no-repeat;
}


.boxbtm3{
height:31px;
width:250px;
background:url(../gifs/boxbtm3.gif) top no-repeat;
}



a:link{
color:#003300;
text-decoration:none;
font-style:normal;
background:transparent;
font-weight:bold;
}

a:hover{
color:#003300;
text-decoration:underline;
font-style:normal;
background:#FFFFFF;
font-weight:bold;
}

a:active{
color:#000000;
text-decoration:none;
font-style:normal;
background:transparent;
font-weight:bold;
}

a:visited{
color:#336633;
font-style:normal;
background:transparent;
font-weight:bold;
text-decoration:none;
}

a:hover{
color:#000000;
font-style:normal;
background:transparent;
font-weight:bold;
text-decoration:underline;
}

H1{
padding:0px;
font-weight:300;
color:#a71e7d;
text-align:left;
font-size:32px;
font-family:"Annie Use Your Telescope",cursive;
letter-spacing:0.1em;
background:transparent url(../gifs/star_blue.gif) no-repeat;
padding-left:30px;
margin-top:79px;
}

H2{
font-family:"Annie Use Your Telescope",cursive;
font-size:26px;
font-weight:normal;
text-decoration:none;
padding-left:4px;
color:#a71e7d;
letter-spacing:0em;
background:transparent url(../gifs/star_grey.gif) no-repeat;
margin:2px;
font-style:normal;
text-align:left;
padding-left:30px;
}


H3{
font-family:"Annie Use Your Telescope",cursive;
font-size:23px;
font-weight:normal;
text-decoration:none;
padding-left:4px;
color:#a71e7d;
letter-spacing:0em;
margin:2px;
font-style:normal;
text-align:left;
padding-left:30px;
}

P{
font-family:"open sans", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:normal;
text-decoration:none;
padding-left:4px;
padding-right:15px;
color:#333333;
letter-spacing:0.05em;
background:transparent;
margin:4px;
margin-bottom:10px;
margin-left:30px;
text-align:left;
line-height:150%;
}

UL{
margin-left:11px;
padding-left:11px;
}

LI{
font-family:"open sans", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:normal;
color:#003333;
letter-spacing:0.8px;
background:transparent;
text-align:left;
margin-left:4px;
padding-left:11px;
letter-spacing:0.05em;
list-style:disc;
line-height:150%;
}

LI.navbox2{
font-family:Verdana, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
color:#FFFFFF;
letter-spacing:0.8px;
background:transparent;
list-style-image:url(../gifs/navbox2.gif);
text-align:left;
margin-right:10px;
}


LI.bullets{
font-family:Verdana, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
color:#4cacc4;
letter-spacing:0.8px;
background:transparent;
list-style-image:url(../gifs/redtriangle.gif);
text-align:left;
}

EM{
font-family:"open sans",Verdana, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:bold;
text-decoration:none;
padding-left:4px;
color:#a71e7d;
letter-spacing:0.1em;
background:transparent;
font-style:normal;
}

 .select { 
    border: 1px solid #c4c4c4; 
    width: 300px; 
    font-size: 14px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

.smallselect{
font-family:Verdana, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
text-decoration:none;
letter-spacing:0px;
margin:3px;
color:#333300;
background:#F2F2F2;
border:1px;
width:130px;
}

.button {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* <-- Add this */
}

.button:hover {
  background-color: #2c80b4;
  transform: scale(1.05);
}


.buttonOLD {
	background-color:#c0c7fc;
	text-indent:0;
	display:inline-block;
	color:#000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	padding:11px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ded17c; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border:0px;
    margin:0px;
}
.buttonOLD:hover {
	background-color:#fde3e2;
}
.buttonOLD:active {
	position:relative;
	top:1px;
}




IMG.border{
border:#333333 solid 1px;
}


IMG.left{
float:left;
margin:5px;
}

IMG.right{
float:right;
margin:5px;
}


.Button1 {
background:url(../gifs/btn.gif) no-repeat top;
width:152px;
float:left;
} 

.Button1 a:link {
width:152px;
margin:auto;
display:block;
text-align:center;
padding:0px 0;
padding-top:5px;
padding-bottom:5px;
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
text-decoration:none;
color:#333333;
letter-spacing:0.05em;
background:transparent;
} 


.Button1 a:visited {
width:152px;
margin:auto;
display:block;
text-align:center;
padding:0px 0;
padding-top:5px;
padding-bottom:5px;
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
text-decoration:none;
color:#333333;
letter-spacing:0.05em;
background:transparent;
} 

.Button1 a:hover {
width:152px;
margin:auto;
display:block;
text-align:center;
padding:0px 0;
padding-top:5px;
padding-bottom:5px;
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
text-decoration:underline;
color:#333333;
letter-spacing:0.05em;
background:transparent;
} 

LI.navlinks{
height:3em;
margin:0px;
padding:0px;
list-style:none;
padding-top:10px;
text-align:left;
}

.navlinks a {
height:3em;
background:transparent url(../gifs/star_red.gif) no-repeat;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin:0px;
background-position-x:0px;
padding:5px;
padding-left:22px;
border-left:1px #FFFFFF solid;
}

.navlinks a:visited {
height:3em;
background:transparent url(../gifs/star_red.gif) no-repeat;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin:0px;
background-position-x:0px;
padding:5px;
padding-left:22px;
border-left:1px #FFFFFF solid;
}

.navlinks a:active {
height:3em;
background:transparent url(../gifs/star_red.gif) no-repeat;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin:0px;
padding:0px;
background-position-x:0px;
padding:5px;
padding-left:22px;
border-left:1px #FFFFFF solid;
}

.navlinks a:hover {
height:3em;
background:transparent url(../gifs/star_red.gif) no-repeat;
color:#FFFFFF;
text-decoration:underline;
font-weight:bold;
margin:0px;
padding:5px;
padding-left:22px;
border-left:1px #FFFFFF solid;
}

.bcsbox{
float:left;
background:#FFFFFF;
padding:1px;
width:29%;
min-height:322px;
text-align:center;
padding-top:7px;
margin:2px;
margin-right:1px;
background: #ffffff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bcsbox:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.bcsboxitem{
float:left;
background:#FFFFFF;
padding:1px;
width:299px;
min-height:392px;
text-align:center;
padding-top:7px;
margin:7px;
margin-right:18px;
background: #b0eaea;
background:#FFFFFF;
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
}



P.clear2{
clear:none;
}

P.clear3{
clear:both;
}


.mobshow{display:none;}


@media only screen and (min-width : 800px) and (max-width : 999px) {

.bcsbox{
width:45%;
float:left;
}

.logobox{
width:90%;
float:left;
}

.textblock{width:90%;}

.mainscreen{
text-align:center;
width:790px;
}

.topmainpanel{
background:transparent;
width:790px;
clear:both;
}

.mainpanel{
background:#FFFFFF url(../gifs/pineapplefun7902023.jpg) no-repeat;
width:790px;
}


P.clear2{
clear:both;
}

P.clear3{
clear:none;
}

}


@media only screen and (max-width : 799px) {

.mobshow{display:inline;}

.bcsbox{
width:45%;
}
.productboxsleeve{
width:90%;
}

.bcsboxitem{
width:90%;
}
.mainscreen{
text-align:center;
width:100%;
}

.topmainpanel{
background:transparent;
width:100%;
clear:both;
}

.mainpanel{
background:#FFFFFF url(../gifs/pineapplefun79092023.jpg) no-repeat;
width:100%;
}


.textblock{width:90%;}

 
.select {width:90%;}

.logobox{
width:100%;
float:left;
margin-top:168px;
}


}


@media only screen and (max-width : 649px) {

.bcsbox{
width:95%;
}

}