/* Reset default browser settings */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-weight: normal;

}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: none; list-style:none; }
q:before, q:after { content:''; }


/* forces scroll bars so that the main window placement stays the same */
html{
		overflow-y:scroll;
}

/* define color(purple) and size of the links going out */

a{
	color: #660066;
	text-decoration:none;
	font-size: 14px;
}

a:hover{
	color: #FF0000;
}

/* removes dotted outline in Firefox */
a:focus {
     outline: none;
}

.menuItemSelected{
	color: #FF0000;
}
.menuItemSelected a:hover{
	color: #FF0000;
}

.menuItem a:hover {
	color: #FF0000;
}

.menuItem {
	color: #660066
}
.menuItem a:hover {
color: #FF0000;
}
/* more info pop-up link */

#more_info_pop_up{
	 font-size: 12px;
	 color: #FF0000;
}

/* define body */
body {
	font: bold 62.5% Arial, Helvetica, sans-serif;
	margin: 0px;
	background-color: #FFFFFF;
}

/* WRAPPER: wraps entire contents of page */
#wrapper{
	position: relative;
	background-color: #FFFFFF;
	width: 800px;
	margin: 0 auto;
}

/* top banner */
#banner{
	position: absolute;
	left: 26px;
	top: 14px;
}
/* basket_item_no */
#basket_item_no {
	margin-left: 699px;
	margin-top: -33px;
	text-align:center;
}


/* thumbnail links */
#links_internal{
	position: absolute;
	left: 30px;
	top: 95px;
}

#links_internal_2col{
	position: absolute;
	left: 94px;
	top: 95px;
}


/* thumbnail border and color */

#links_internal img:hover{
	border: 2px solid #FF0000;
}

#links_internal_2col img:hover{
	border: 2px solid #FF0000;
}

#links_internal_3col img:hover{
	border: 2px solid #FF0000;
}

#links_internal img{
	border: 2px solid #660066; 
	margin-top: 4px;
}

/* thumbnail border and color */
#links_internal_2col img{
	border: 2px solid #660066; 
	margin-top: 4px;
}

/* thumbnail border and color */
#links_internal_3col img{
	border: 2px solid #660066; 
	margin-top: 4px;
}

/* defines main pic */
#main_pic{
	padding-top: 90px;
	margin-bottom: 10px;
}


/* defines twitter widget */
#twitter_widget{
		padding-left: 60px;
	padding-top: 10px;
	margin-bottom: 10px;
}


/* cross ref thumbnail links */

#link_cross_1{
	position: absolute;
	left: 30px;
	top: 380px;
}

#link_cross_2{
	position: absolute;
	left: 94px;
	top: 380px;
}

#link_cross_3{
	position: absolute;
	left: 158px;
	top: 380px;
}

#link_cross_4{
	position: absolute;
	left: 222px;
	top: 380px;
}

#link_cross_5{
	position: absolute;
	left: 286px;
	top: 380px;
}
/* cross ref thumbnail border and color */

#links_crossref img:hover{
	border: 2px solid #FF0000;
}

#links_crossref img{
	border: 2px solid #660066; 
	margin-top: 4px;
	
}


/* defines cross ref text */

#cross_ref_text{
	position: absolute;
	left: 30px;
	top: 368px;
}

#cross_ref_text h1{
	color: #FF0000;

}


/* defines text and the various headings */

#text{
	position: absolute;
	left: 520px;
	top: 97px;
	width: 273px;
	
}

#news_content{
	position: absolute;
	left: 55px;
	top: 80px;
	width: 685px;
	height: 350px;
	padding-right: 10px;
	overflow-y: scroll;	
}


p{
	margin-top: 1px;
	margin-bottom: 8px;
	letter-spacing: 0px;
}

/* OBJECT */
h1{
	 letter-spacing: 1px;
	 color: #FF0000;
}
h1 p{
	color: #660066;
}

/* DESIGN */
h2{
	 letter-spacing: 1px;
	 color: #FF0000;
}

h2 p{
	color: #660066;
}

/* DESCRIPTION */
h3{
	letter-spacing: 1px;
	color: #FF0000;
}
h3 p{
	color: #660066;
	margin-top: 1px;
	margin-bottom: 0px;
}

#description_indent{
	text-indent: 8px;
}

/* prices */
h4{
	letter-spacing: 1px;
	color: #FF0000;
	margin-top: 8px;
}
h4 p{
	color: purple;
}

/* defines the links going out */



ul#mainNav{
		text-align:center;
		position:relative;
}


#mainNavContainer li{

}
#mainNav li{
		display: inline;
}

#mainNav li a{
		margin-left: 10px;
		margin-right: 10px;
}



/* defines the bottom banner */

#bottom_banner {
	background: url(../sharedimages/object_nav_img.png);
	background-repeat:repeat-x;
	width: 800px;
	height: 56px;
	margin-top: 10px;
	zoom: 1;
}
/* Simple fix for iPhone Safari scaling issue - works for iPhone 12 mini and iPhone Plus */
/* Add this to your existing CSS - it preserves layout but makes it scale */

/* iPhone SE and very small screens (320px) */
@media only screen and (max-width: 320px) {
    #wrapper {
        transform: scale(0.40); /* 320/800 = 0.40 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        width: 320px;
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone 12 mini and similar (375px) */
@media only screen and (min-width: 321px) and (max-width: 375px) {
    #wrapper {
        transform: scale(0.47); /* 375/800 = 0.47 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        width: 375px;
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Plus sizes (414px - like iPhone 6/7/8 Plus) */
@media only screen and (min-width: 376px) and (max-width: 390px) {
    #wrapper {
        transform: scale(0.52); /* 414/800 = 0.52 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone 14 Pro / iPhone 15 Pro (393px) */
@media only screen and (min-width: 391px) and (max-width: 400px) {
    #wrapper {
        transform: scale(0.48); /* Slightly smaller to prevent cutoff */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Plus sizes (414px - like iPhone 6/7/8 Plus) */
@media only screen and (min-width: 401px) and (max-width: 414px) {
    #wrapper {
        transform: scale(0.52); /* 414/800 = 0.52 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Pro Max and larger phones (428px and up to 450px for safety) */
@media only screen and (min-width: 415px) and (max-width: 450px) {
    #wrapper {
        transform: scale(0.535); /* 428/800 = 0.535 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}