/*AJS.CSS 1.00 June 2023 Copyright by Australian Jewellery Services */

/* File History 
2023-06-15 Original file creation based upon W3C CMS w3-v4.css
2023-06-30 Addition of responsive em dimensions with fallback
2023-07-08 Extensive commenting and explanations provided throughout
2023-07-13 All w3 CMS applied classes with dimensions in HTML reapplied to tag styles in CSS
2023-07-14 Removed all w3 class names 
2023-08-07 
*/

/*** SIZING NOTES ***/
/* Most spatial HTML elements can use any CSS distance measuring dimension, however, as 'absolute' 
	dimensions are fixed size (such as: in, cm, mm, Q, pt, pc, and *special case px), they won't 
	respond to changes in responsive web design and page flow, and so are unsuitable for a responsive 
	and consistent appearance website like AJS and will be avoided.
	Accordingly, 'relative' distance measuring dimensions (such as: percent, em, rem, ex, and rex) 
	are preferable. In this way, should the font family change, or the font size, so too will all its 
	related dimensions scale to match.
	 
	Where a fixed size dimension is better suited and responsive design is not important, the point 
	(pt) measuring dimension is to be used consistently on the same element, particularly for fonts, 
	padding and margins.
	 
	*Pixels are a special case because the pixel (px) value can vary depending upon its usage 
	circumstances. In particular, browsers utilise a viewport for smaller area screens, such as on 
	portable devices (mobiles, tablets, pods, pads, palms and laptops), and calculate their viewport 
	pixel count (vw, vh) as virtual pixels based upon the actual resolution dots per inch (dpi) pixel 
	density point (dp) of the screen. This can vary by a scale of up to 4X. 
	
	Percent (%) is relative to the parent of the element to which it is applied. As are Em (em) width 
	and Ex (ex) height, which are the computed values of the lower case letter 'm' and 'x' 
	respectively of the font family to which they are applied, or have inherited from their parent.
	To overcome an unintended inherited value, and as a method of resetting to the default size, the 
	root em (rem) and ex (rex) relative scale dimensions can be used. 
	For percentage scale measurement dimensions, 100% remains the same, 50% halves, and 200% doubles. 
	For all relative font-based scale measurement dimensions, the value of 1=100% (same), 
	0.5=50% (half), 2=200% (double). 	
/*	
/* When applying a relative scale dimension to match a previously known absolute measure dimension, 
	they can be converted.	 
	Generally,	1.000 em =  9pt = 12px = 100% 	(3:4 3pt=4px) as measured on 1920x1080px LED monitor
	 and 		1.333em = 12pt = 16px = 133.33% 
	 and 		1.667em = 15pt = 20px = 166.66% 
	 and 		2.000 em = 18pt = 24px = 200% 
	 and 		2.333em = 21pt = 28px = 233.33% 
	 and 		2.444em = 22pt = 30px = 244.44% 
	 and 		3.000 em = 27pt = 36px = 300% 
	 and 		3.555 em = 32pt = 42px = 350% 
*/

/* When declaring CSS dimensions, there is no space between the unit and the value (e.g. "10px", 
	not "10 px")
	When not using a dimension unit, the browser default will apply which may scale proportionately.
*/


/*** NOTES ***/

/* font-weight numeric scale provides a range of boldness, varying by the hundred from 100 no-change 
	to 900 bold with 500 half. Heading H tags respond, but the paragraph P tag does not. Some font
	families don't appear to respond either.
*/
/* duplicate sizes where provided are for fallback on unsupporting browsers, and may be redundant */

/* Percentages used in margins and padding are a percentage of the 'inline-width' of the element.
	As the width changes, so too will the percentage values applied to dimensions.

/* dimension properties are not inherited in CSS, like height, width and border-width values unless
	specifically stated as 'inherit' e.g. check {border-width:inherit} */
	
/* In CSS the forward arrow (>) selector represents parent>child relationship */


/*** TESTING ***/

.test-fontsize-1 {font-size: 32pt; /*3.555em*/ }
.test-fontsize-2 {font-size: 22pt; /*2.444em*/ }
.test-fontsize-3 {font-size: 15pt; /*1.667em*/ }

.test-bdr-1 {border: 1px solid blue}    /* highlight for testing layout */
.test-bdr-2 {border: 1px solid magenta} /* highlight for testing layout */
.test-bdr-3 {border: 1px solid green}   /* highlight for testing layout */
.test-bdr-4 {border: 1px solid yellow}  /* highlight for testing layout */
.test-bdr-5 {border: 1px solid red}     /* highlight for testing layout */
.test-bdr-6 {border: 1px solid purple}  /* highlight for testing layout */

/*.index-list {border: 1px red solid}*/ /* highlight for testing layout */

/* display normally hidden, forced show only during testing for screen analysis */
#statusline {display: block} /*display: none*/
 

/*** CUSTOM IDs ***/
/* Note hashtag ids have higher specificity than HTML tags and classes.*/

/* Note border req to cover body backgnd gap */
#banner {display: block; width: 100%; background-color: #086E88; border: 1px solid #086E88}
#btn-close {display: block; float: right; position: relative; font-size: small}
#cat-link {
	display: block;
	position: relative;
	margin: 0px;
	text-align: center;
	top: -6px;
	width: 100%;
}

#div-btn-trc { 
	display: block; 
	float: right; 
	margin: 0.25em 0em;
	padding: 0em;
	position: relative;
	text-align: right;
	width: 50%;
}

#article-todo #article-title {
	display: block; 
	float: left; 
	margin-top: 0.25em; 
	position: relative; 
	width: 50%;
} 


.article-title {
	display: block; 
	float: left; 
	margin-top: 0.25em; 
	position: relative; 
	width: 85%;
} 

.div-btn-trc { 
	background-color: #FDDEB3;
	border: 2px solid #D4AF36; 
	border-radius: 5px;
	color: #086E88;
	display: block; 
	font-size: 1.1em; 
	float: right; 
	margin: 0.25em 0em 2em 0em;
	padding: 0.5em; 
	position: relative; 
	text-align: center; 
	width: 15%;
}

.div-btn-trc:hover { 
	background-color: #D4AF36;
	border-color: #eee;
	color: #eee;
	font-weight: bold;
}
.div-btn-trc a {text-decoration: none}
.div-btn-trc a:hover {text-decoration: none}
.div-btn-trc a:visited {text-decoration: none}

#content {display: block; min-height: 31.5em; padding: 0em 0.25em} 
#content {background-color: #FDDEB3; border: 3px solid #D4AF36}
#content hr {border: none; margin: 1px auto; width:100%; height: 2px}
#content hr {background-color: #D4AF36}
#f1 {display: block; width: 100%; padding: 2px 0px}
#f1 p {font-size: 1.0em} /*12px*/
#f2 {display: none; width: 10%; padding: 4px 0px}
#fineprint {display: block; width: 100%; border: 1px solid #086E88;
	background-color: #D4AF36; text-align: center; color: #888}
#fineprint p {font-size: 0.83em} /*10px*/
#home {/*HTML bookmark for navigation, no content*/}
#inline {width: 100%; margin: 1em 0}
#inline img {display: block; margin: 0 auto;} /*image centred*/ 
#logo {display: block; float: right; margin: 0.33em 0em}
#menubar {display: block; background-color: #086E88; border: 1px solid #086E88} 
#statusline{width: 100%; color: #999; background-color: #FDDEB3; border: 1px solid #086E88}
#titlebar {display: block; text-align: center; color: #086E88; 
	background-color: #086E88; border: 1px solid #086E88}
#tip-rotate {color: orange; font-size: 1.0em; background-color: #fff; 
	border: 1px solid orange} /*12px*/
/* display normally hidden, forced show only during testing for screen analysis in TESTING section */
#statusline{text-align: left; font-size: 0.83em;}
#scrnH, #scrnL, #scrnP, #scrnW {font-size: inherit; margin: 0; padding: 0}
/* display normally hidden, forced show only during media match in MEDIA QUERIES section (below) */
#tip-rotate{text-align: center; width: 100%}/*default hidden class is applied within the HTML markup*/


/*** HTML TAGS STYLES ***/

/* HTML tag style rules override user-agents - unless overridden by applied element IDs or classes */

/*** anchors ***/	
a {color: inherit}
li a {text-decoration: none}
li a:hover {font-weight: bolder}
li a:visited {text-decoration: none}

article {min-height: 28em; width: 100%; padding: 0em 0.5em; background-color: #FDDEB3}
.article-title {color: #086E88}

body {/***PAGE BASE VALUES***/
	background-color: black;
	box-sizing: inherit;
	color: black;
	display:block;
	float: none;
	font-family: Verdana,sans-serif; 
	font-size: 9pt;/* fixed base value - 'em' scales proportionally when this base value changes */
	font-weight: normal;
	line-height: normal;
	margin: 0pt;
	overflow: auto;
	padding: 0pt;
	-webkit-text-size-adjust:100%;
}

b,strong {font-weight: bolder}
.bolder {font-weight: bolder}
.lighter {font-weight: lighter}

button {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; 
	-moz-user-select: none; -ms-user-select: none; user-select: none}   
button, input, select, textarea, optgroup {font: inherit; margin: 0pt}


/* custom classes */
/* Note applied classes override HTML tags and hashtag IDs*/
.bannerline {color: #ccc; font-size: 1.5em; text-align : center} 
.caption {text-align: center; font-size: 0.8em; margin: 0.5em 0} 
.card-h {color: #086E88; font-size: 1.25em; margin-top: 0.5em}
.card-metal {color: #999; font-size: 1.0em; margin: 0.0em; margin-block: 0em}
.card-desc {color: #333; font-size: 0.85em}
.card-price {float: right; color: #999; font-size: 1.5em; text-align: right; 
	margin-block: 0em; padding: 0.3em 0.5em}
.cat-link {color: #086E88; font-size: 0.75em; margin: 0em; padding: 0px}
.code-num {color: #D4AF36; font-size: 0.75em}
.h-main {color: #D4AF36; font-family: "Perpetua Titling MT"; font-size: 2.0em} 
.h-second {color: #ccc; font-size: 1.4em} 
.h-third {text-align: center; font-size: 1.4em; margin: 1em}
.index-list {display: flex; width: 100%; padding: 0em 0.5em}
.index-list {background-color: #FDDEB3; color: #086E88; text-align: center}
.index-item {display: inline-block; min-height: 2em; min-width: 6.0em}
.index-item {margin: 0.25em; padding: 0.167em} /*overwritten in Media queries for larger screens*/  
.index-item {background-color: #D4AF36; border-radius: 6px; border: 2px solid #086E88; color: #086E88}
.index-item {box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.35), 3px 5px 5px 0px rgba(0,0,0,0.2)}
.index-item {font-size: larger; text-decoration: none; cursor: pointer; overflow:hidden}   
.menubar {color: #086E88; text-align: center}

p.bio {font-family: cursive; font-size: small} 
p.indent-left {padding-left: 6pt}
p.quote {font-family: serif; font-style: italic; font-size: 1.2em; }
p.quote {margin: 0.25em 1em;}
p.sign {font-family: serif; font-style: italic; font-size: large; } 
p.subhead {font-weight: bolder; margin-top: 6pt; margin-bottom: 0pt; padding: 0pt}
p.warning {font-style: italic; font-weight: bold; }
p.important {color: #FF6600; font-style: italic; font-weight: bold; }
span.initCase {font-size: 1.5em; }
span.label {color: red; }
span.quals {font-family: sans-serif;  font-size: xx-small; vertical-align: sub; } 

div {font-size: 1em; margin: inherit; padding: inherit}

footer p {display: block; margin-block: 1pt; padding: 0pt 1pt}
footer {display: flex; width: 100%;}
footer {padding: 0em 0.5em; background-color: #999; border: 1px solid #086E88}


/* forms */
form {
	background-color: #FDDEB3;
	border: 2px solid #D4AF36;
	border-radius: 1em;
	color: #086E88;
	display: block;
	font-family: Verdana,sans-serif; 
	font-size: 12pt;
	font-weight: normal;
	line-height: 1.0em;
	margin: 1em auto;
	max-width: 390px;
	padding: 0.5em;
	text-align : center;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav { padding: 0em 0.5em;}


/*** FONTS CLASSES ***/
 
/* specific font faces */
.font-serif {font-family: serif}
.font-sans-serif {font-family: sans-serif}
.font-cursive {font-family: cursive}
.font-monospace {font-family: monospace}
.font-wide {letter-spacing: 4px; letter-spacing: 3pt}

/* specific font sizing */
.txt-tiny {font-size: 0.83em} /*10px*/
.txt-small {font-size: 1.0em} /*12px*/
.txt-medium {font-size: 1.1667em} /*14px*/
.txt-large  {font-size: 1.333em} /*16px*/
.txt-xlarge {font-size: 1.5em} /*18px*/
.txt-xxlarge {font-size: 2.0em} /*24px*/
.txt-xxxlarge {font-size: 3.0em} /*36px*/

/* specific font formatting */
.cancelled {color: red} /*red*/
.strikethrough {color: #999; text-decoration: line-through} /*dgrey*/
.unassessed {color: blue} /*blue*/
.underway {color: green} /*green*/
.underreview {color: #F90} /*orange*/

/* codes */
/* Note: Code tag doesn't seem to recognise top/bottom margin values. 
	Tag and the wrapper needs to be wrapped and classed.*/
div.codeholder {margin: 1.0em 6pt}
.code, .codespan {font-family: Consolas,"courier new"; font-size: 1em; line-height: 2}
.code {border: 1px solid #999; background-color: #ddd; padding: 3px; word-wrap: break-word}
.codespan {color: crimson; background-color: #f1f1f1; padding-left: 4px; padding-right: 4px; 
	font-size: 110%}


/*** GRAPHICS ***/

/* HTML tag graphics */
hr {border: 0px; border-top: 1px solid #999; margin: 0; margin-inline:0;} 
img {vertical-align: middle}

/* class graphics */
.image {max-width: 100%; height: auto}
.img-card, .card-img {width: 100%}

/*** HEADINGS ***/
/* In order to easily follow 'mobile-first' design principles, the page fonts, margins, and padding 
	have all been set to match the smallest screen size first, here, and are adjusted by slight 
	increases across larger screen size thresholds using CSS media queries (detailed further below).
*/
/* NOTE: For the purposes of screen sizes less than 480px wide, these are the CSS defaults for 
	headings, inherited in media queries until later over-written or scaled-up. 
	The use of em's automatically scales-up as the base font-size increases. 
	
	The use of different margin-top values for each heading is to prevent CSS margin-collapse. 
	(See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
*/
/* HTML tag headings */
/* Initial low res small screens default inherited by larger screens unless overwritten */
h1, h2, h3, h4, h5, h6 {font-family: "Segoe UI",Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {color: #086E88; line-height: 90%; margin: 0.5em 0em}
h1 {font-size: 2.00em; font-weight: normal; margin-top: 0em} 
h2 {font-size: 1.75em; font-weight: normal; margin-top: 0.3em} 
h3 {font-size: 1.60em; font-weight: normal; margin-top: 0.5em} 
h4 {font-size: 1.40em; font-weight: normal; margin-top: 0.7em} 
h5 {font-size: 1.20em; font-weight: 500; margin-top: 0.6em} 
h6 {font-size: 1.10em; font-weight: 500; margin-top: 0.5em} 

html {box-sizing: border-box}
*, *:before, *:after {box-sizing: inherit}
html {text-size-adjust: 100%}/*resets text sizes*/

p {margin: 0em; padding: 0.125em 0em}
p {font-size: inherit}


/*** WIDTHS CLASSES ***/

/* framework widths */
.framework {width: 100%; min-width: 393px; max-width: 1366px} /*min iPhone 14+ & max iPadPro*/

/* flexible % widths */
.width-100 {width: 100%}
.width-80 {width: 80%}
.width-75 {width: 75%}
.width-66 {width: 66.6%}
.width-50 {width: 50%}
.width-33 {width: 33.3%}
.width-30 {width: 30%}
.width-25 {width: 25%}
.width-20 {width: 20%}
.width-0 {width: 0%}

/* flexible % col widths */
.col.1 {width: 8.33333%}
.col.2 {width: 16.66666%}
.col.3, .quarter {width: 24.99999%}
.col.4, .third {width: 33.33333%}
.col.5 {width: 41.66666%}
.col.6, .half {width: 49.99999%}
.col.7 {width: 58.33333%}
.col.8, .twothird {width: 66.66666%}
.col.9, .threequarter {width: 74.99999%}
.col.10 {width: 83.33333%}
.col.11 {width: 91.66666%}
.col.12 {width: 99.99999%}
.col {width: 100%}


/*** LAYOUT CLASSES ***/

/* floats */
/*TIP: To have an object float, ensure its display also is set to block */
/*NOTE: Non-floating text divs and paragraphs will "flow" around floats, 
however their box-sizing will still be aligned to their parent element. 
To overcome this, use the margins of the float to space flow items away,
and set list groups (ul/ol) to also be relative block floats to show marker*/
.float {display: block; position:relative; float: left}
.float-left {float: left}
.float-right {float: right}
.col, .half, .third, .twothird, .threequarter, .quarter {float: left}

/* displays */
.block {display: block}
.hide {display: none}
.show, .show-block {display: block}
.show-inline-block {display: inline-block}

/* wraps and overflows */
.overflow {overflow: visible}
.nowrap {white-space: nowrap}
.nooverflow {overflow: auto}

/* alignments */
.align-txt-left {text-align: left}
.align-txt-right {text-align: right}
.align-txt-justify {text-align: justify}
.align-txt-center {text-align: center}
.pic-top {vertical-align: top} /* to align adjacent column text for 'Responsive row/cells' */
.icon {width: 18px; vertical-align: middle} /* inline images within text */


/* LISTS */
ol {
	display: block; 
	font-size: inherit; 
	list-style-type: decimal; 
	margin-block: 0 0.125em; 
	margin-inline: 0.5em; 
	padding-inline: 1em;
}

.flex-box {display: flex; width: 100%; padding: 0; column-gap: 0.5em;}
.flex-item {display: inline-block; min-width: 25%; padding: 0 0.25em;}
.flex-item {border: 2px solid #086E88; border-radius: 8px; background-color: #FDDEB3;}


ul {
	display: block; 
	font-size: inherit; 
	margin-block: 0 0.5em; 
	margin-inline: 0.5em; 
	padding-inline: 1em;
}
li {font-size: inherit; margin-left: 0; padding-left: 0}

.menu {
	list-style-type: none; 
	margin-block: 0; 
	margin-inline: 0; 
	padding-inline: 0;
	width: 100%;
}
.menu li {
	background-color: #FDDEB3;
	color: #086E88;
	font-size: 1.1em; 
	margin: 0.25em 0; 
	padding: 0.5em; 
	border: 2px solid #D4AF36; 
	border-radius: 5px;
}

.menu li:hover {
	background-color: #D4AF36;
	border-color: #eee;
	color: #eee;
	font-weight: bold;
	text-decoration: none; 
}
.ol {padding: 0px 24px; margin-top: 0px}
.ul {list-style-type: none; padding: 0pt; margin: 0pt}
.ul li {padding: 0pt; border-bottom: 1px solid #ddd}
.ul li:last-child {border-bottom: none}


/*** BORDERS CLASSES ***/

/* NOTE: For the purposes of screen sizes less than 480px wide, these are the CSS defaults for 
	borders, inherited in media queries until later over-written.  
*/

/* custom borders */
.bdr-3d-ajs-gold-3x {border: 3px solid #D4AF36}
.bdr-3d-ajs-gold-2x {border: 2px solid #D4AF36}
.bdr-right-ajs-gold-2x {border-right: 2px solid #D4AF36}
.bdr-bottom-ajs-gold-2x {border-bottom: 2px solid #D4AF36}

/* fixed set thin borders (all 1px silver) */
.bdr-0 {border: 0} /* no border */
.bdr {border: 1px solid #ccc}
.bdr-top {border-top: 1px solid #ccc}
.bdr-bottom {border-bottom: 1px solid #ccc}
.bdr-left {border-left: 1px solid #ccc}
.bdr-right {border-right: 1px solid #ccc}

/* fixed set thick borders (all 6px silver) */
.topbar {border-top: 6px solid #ccc}
.bottombar {border-bottom: 6px solid #ccc}
.leftbar {border-left: 6px solid #ccc}
.rightbar {border-right: 6px solid #ccc}

/* border curves */
.circle {border-radius: 50%}
.bdr-cnr-rnd-rad-small {border-radius: 2px}
.bdr-cnr-rnd-rad, .bdr-cnr-rnd-rad-medium {border-radius: 4px} /* default round */
.bdr-cnr-rnd-rad-large {border-radius: 8px}
.bdr-cnr-rnd-rad-xlarge {border-radius: 16px}
.bdr-cnr-rnd-rad-xxlarge {border-radius: 32px}


/*** MARGINS CLASSES ***
/* In order to easily follow 'mobile-first' design principles, the page fonts, margins, and padding 
	have all been set to match the smallest screen size first, here, and are adjusted by slight 
	increases cross larger screen size thresholds using CSS media queries (detailed further below).
*/
/* margin is the extra space around an element outside the border, in contrast with  
	padding which is the additional space placed between the content and the border.
*/
/* NOTE: For the purposes of screen sizes less than 480px wide, these are the CSS defaults for 
	margins, inherited in media queries until later over-written.  
*/
/* Syntax:
	margin full 4 values = 1.Top 2.Right 3.Bottom 4.Left 
	margin shorthand 2 values = 1.Top/Bottom 2.Left/Right 
	margin shorthand single value = all sides
*/

/* fixed set margins (all 16px) */
.section, .code {margin-top: 16px; margin-bottom: 16px}
.margin {margin: 16px}
.margin-top {margin-top: 16px}
.margin-bottom {margin-bottom: 16px}
.margin-left {margin-left: 16px}
.margin-right {margin-right: 16px}
.stretch {margin-left: -16px; margin-right: -16px}

/* variable set sized margins */
.margin-top-6x {margin-top: 0.5em} /*6px*//*4.5pt*/
.margin-top-8x {margin-top: 0.667em} /*8px*//*6.0pt*/
.margin-top-10x {margin-top: 0.833em} /*10px*//*7.5pt*/
.margin-top-12x {margin-top: 1.0em} /*12px*//*9.0pt*/
.margin-top-24x {margin-top: 2.0em} /*24px*//*18.0pt*/

.margin-all-0x {margin: 0em} /*0px*//*0pt*/
.margin-all-6x {margin: 0.5em} /*6px*//*4.5pt*/
.margin-all-8x {margin: 0.667em} /*8px*//*6.0pt*/
.margin-all-10x {margin: 0.833em} /*10px*//*7.5pt*/
.margin-all-12x {margin: 1.0em} /*12px*//*9.0pt*/
.margin-all-24x {margin: 2.0em} /*24px*//*18.0pt*/

.margin-all-1x {margin: 1px}
.margin-top-1x {margin-top: 1px}
.margin-right-1x {margin-right: 1px}
.margin-bottom-1x {margin-bottom: 1px}
.margin-left-1x {margin-left: 1px}

.margin-all-3t {margin: 3pt}
.margin-top-3t {margin-top: 3pt}
.margin-right-3t {margin-right: 3pt}
.margin-bottom-3t {margin-bottom: 3pt}
.margin-left-3t {margin-left: 3pt}


/*** PADDINGS CLASSES ***
/* In order to easily follow 'mobile-first' design principles, the page fonts, margins, and padding 
	have all been set to match the smallest screen size first, here, and are adjusted by slight 
	increases across larger screen size thresholds using CSS media queries (detailed further below).
*/
/* padding is the additional space placed between the content and the border, in contrast with 
	margin which is the extra space around an element outside the border.
*/
/* NOTE: For the purposes of screen sizes less than 480px wide, these are the CSS defaults for 
	paddings, inherited in media queries until later over-written.  
*/
/* Syntax:
	padding full 4 values = 1.Top 2.Right 3.Bottom 4.Left 
	padding shorthand 2 values = 1.Top/Bottom 2.Left/Right 
	padding shorthand single value = all sides
*/

/* various set sized paddings */
.padding-paralist {padding: 4px 6px} /*3pt*//*4.5pt*/
.padding-0-6x {padding: 0px 6px} /*0pt* *4.5pt*/
.padding-all-16x {padding: 16px} /*16px 9pt*/ 

/* varying sized paddings */
.panel {padding: 1px 6px} /*0.75pt 4.5pt*/
.panel {margin-top: 1em; margin-bottom: 1em} /*12px*/
/* In CSS the forward arrow (>) selector represents parent>child relationship */
.row-padding>.half, .row-padding>.third, .row-padding>.twothird, 
	.row-padding>.threequarter, .row-padding>.quarter, .row-padding>.col {padding: 0px 9px}


/*** BUTTONS, CARDS, HOVERS, & SHADOWS CLASSES ***/

/* NOTE: For the purposes of screen sizes less than 480px wide, these are the CSS defaults for 
	buttons, cards, hovers and shadows inherited in media queries until later over-written.  
*/
/* buttons and shadows */
.btn-close {color: orange; background-color: white; border: none}
.btn-menu {display: inline-block; min-width: 4.0em; max-width:10em; width: 15%; 
	padding: 8px 4px; vertical-align: middle; overflow: hidden; border-radius: 18px; 
	text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; 
	color: inherit; border: 2px solid #086E88; background-color: #D4AF36}
.btn-menu:hover {box-shadow: 0pt 8px 16px 0pt rgba(0,0,0,0.5),0pt 6px 20px 0pt rgba(0,0,0,0.2)} 

.card button {
	  background-color: #FDDEB3;/*D4AF36*/
	  border: 2px solid #086E88;
	  border-radius: 18px;
	  color: #086E88;
	  height: 3em;
	  float: left;
	  font-size: 1em;
	  margin: 0px;
	  text-align: center;
	  width: 100px;
	}
	
.card .button:hover {
	  background-color: #D4AF36;
	  border-color: #086E88;
	  color: #eee;
	  box-shadow: 0pt 8px 16px 0pt rgba(0,0,0,0.5), 0pt 6px 20px 0pt rgba(0,0,0,0.2);
	  font-weight: bold;
	  text-decoration: none; 
	}

.cat-butt {
	  background-color: #FDDEB3;
	  border: 1px solid #086E88;
	  border-radius: 18px;
	  color: #086E88;
	  text-decoration: none;
	  padding: 1px 3px;	
}
.cat-butt:hover {
	  background-color: #D4AF36;
	  border-color: #086E88;
	  color: #eee;
	  box-shadow: 0pt 8px 16px 0pt rgba(0,0,0,0.5), 0pt 6px 20px 0pt rgba(0,0,0,0.2);
	  font-weight: bold;
	  text-decoration: none; 
}

.btn-trc { 
	background-color: #D4AF36; 
	border: 2px solid #086E88; 
	border-radius: 18px; 
	color: #086E88; 
	font-size: 1em; 
	height: 3em; 
	margin: 0em; 
	text-align: center; 
	width: 100px; 
} 

.btn-trc:hover { 
	  background-color: #D4AF36;
	  border-color: #eee;
	  color: #eee;
	  box-shadow: 0pt 8px 16px 0pt rgba(0,0,0,0.5), 0pt 6px 20px 0pt rgba(0,0,0,0.2);
	  font-weight: bold;
	  text-decoration: none; 
} 


/* hovers */ 
.btn-close:hover {color: #fff; background-color: #999; font-weight: bolder}
.btn-menu:hover {color: #eee; border-color: #eee; font-weight: bolder; text-decoration: none}
.index-item:hover {color: #fff; background-color: #999; font-weight: bolder}
.index-item:hover {color: #eee; border-color: #eee; text-decoration: underline}

.ul.hoverable li:hover {background-color: #ccc}
.transparent, .hover-none:hover {background-color: transparent}
.hover-none:hover {box-shadow: none}

/* cards */
/*NOTE: As card item floats, use margins to create surrounding free space */
.card {max-width: 256px; min-width: 128px;}
.card {display: block; position: relative; float: left}
.card {margin: 0.5em 2.0em 1.5em 0.5em; padding: 0.25em 1em} 
.card {border-radius: 16px; background-color: white; border: 2px solid #086E88;}
.card {box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.35), 3px 5px 5px 0px rgba(0,0,0,0.2)}


/*** COLOURS CLASSES ***/

/* custom colours */
.txt-ajs-dblue {color: #086E88}
.txt-ajs-gold {color: #D4AF36}
.txt-palloys-gold {color: #B7A476}
.txt-white {color: #fff}
.txt-lvl1grey, .txt-lgrey {color: #eee}
.txt-lvl2grey {color: #ddd}
.txt-lvl3grey, .txt-silver {color: #ccc}
.txt-lvl4grey {color: #bbb}
.txt-lvl5grey {color: #aaa}
.txt-lvl6grey, .txt-dgrey {color: #999}
.txt-orange {color: orange}

.bg-ajs-dblue {background-color: #086E88}
.bg-ajs-gold {background-color: #D4AF36}
.bg-palloys-gold {background-color: #B7A476}
.bg-ajs-oblue {background-color: #08A8C8}
.bg-ajs-sblue {background-color: #B0D9ED}
.bg-ajs-wheat {background-color: #FDDEB3}
.bg-white {background-color: #fff}
.bg-lvl1grey, .bg-lgrey {background-color: #eee}
.bg-lvl2grey {background-color: #ddd}
.bg-lvl3grey, .bg-silver {background-color: #ccc}
.bg-lvl4grey {background-color: #bbb}
.bg-lvl5grey {background-color: #aaa}
.bg-lvl6grey, .bg-dgrey {background-color: #999}

.bdr-ajs-gold {border: 1px solid #D4AF36}
.bdr-ajs-wheat {border: 1px solid #FDDEB3}
.bdr-ajs-dblue {border: 1px solid #086E88}
.bdr-orange {border: 1px solid orange}


/*** MEDIA QUERIES ***/
/*In order to easily follow 'mobile-first' design principles, the page fonts, margins, and padding 
	have all been set to match the smallest screen size first, above, and are adjusted by slight 
	increases across larger screen size thresholds using CSS media queries (detailed here below).
*/
/* syntax */
/* @media screen and (min-width: 420px) and (max-width: 760px) {...}
/* example media query multiple condition syntax (when screen is greater than 420px wide but less 
	than 760px)*/

/* media rule widths */
/*@media screen and (min-width: 480px){body{background-color: FireBrick}} /*to id screen width*/
/*@media screen and (min-width: 640px){body{background-color: Orange}} /*to id screen width*/
/*@media screen and (min-width: 760px){body{background-color: Pink}} /*to id screen width*/
/*@media screen and (min-width: 840px){body{background-color: LightSeaGreen}}/*to id screen width*/
/*@media screen and (min-width: 1040px){body{background-color: LawnGreen}} /*to id screen width*/
/*@media screen and (min-width: 1240px){body{background-color: SkyBlue}} /*to id screen width*/

/* NOTE: For the purposes of screen sizes less than 480px wide, the CSS defaults for fonts, margins 
	and padding are set earlier (above) in this CSS file prior to this Media Queries section. 
*/

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
	#tip-rotate {display: block} /*show*/
	#scrnL {display: none} /*hide*/
	#scrnP {display: inline-block} /*show*/
	#content {min-height: 35em}
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	#scrnP {display: none} /*hide*/
	#scrnL {display: inline-block} /*show*/
	/*body {background-color: yellow}*//***Testing***/

/*Note that Chrome behaves badly on iOS in Landscape mode by zooming in on undefined sized 
	elements. The solution is to declare a set size-adjust value to stop the browser "helping". */
	body {-webkit-text-size-adjust: 100%}
}

@media screen and (min-width: 480px) {
	#content {min-height: 40em}
	#f1 {width: 75%} /*reduce to allow for f2 display*/
	#f2 {display: block} /*show from this width and up*/
	body{font-size: 9.0pt} /*base default*/
	footer p {margin-block: 2pt; padding: 0pt 2pt}
	h1 {font-size: 2.5em} /*30px*//*22.5pt*/
	h2 {font-size: 2.125em} /*25.5px*//*19.125pt*/
	h3 {font-size: 1.8em} /*21.6px*//*16.2pt*/
	h4 {font-size: 1.534em} /*18.4px*//*13.8pt*/
	h5 {font-size: 1.35em} /*16.2px*//*12.15pt*/
	h6 {font-size: 1.2em} /*14.4px*//*10.8pt*/
	p.left-indent{left-padding: 5pt}
	.btn-menu {font-size: larger}
	.card {max-width: 300px; /*width: 87.5%*/}
	.card-metal {font-size: 1.2em}
	.card-desc {font-size: 1.0em}
	.card-price {font-size: 1.75em}
	.card-h {font-size: 1.5em}
	.h-main {font-size: 2.4em}
	.h-second {font-size: 1.6em}
	.index-item {margin: 0.5em; padding: 0.25em}
}

@media screen and (min-width: 520px) {
}

@media screen and (min-width: 580px) {
}

@media screen and (min-width: 640px) {
	body{font-size: 9.5pt} /*increase*/
}

@media screen and (min-width: 700px) {
}

@media screen and (min-width: 768px) {
	#content {min-height: 40em}
	body{font-size: 10pt} /*increase*/
	footer p {margin-block: 3pt; padding: 0pt 3pt}
	p.left-indent{left-padding: 6pt}
	.card {max-width: 330px; width: 100%}
}

@media screen and (min-width: 840px) {
}

@media screen and (min-width: 940px) {
}

@media screen and (min-width: 1100px) {
}

@media screen and (min-width: 1240px) {
}

@media screen and (min-width: 1367px) {
	.framework {margin: 0px auto} /*centre page*/
}


/* END-OF-FILE */