/*--- INHERITED Properties
- `color`, `font-family`, `font-size`, `font-weight`, `font-style`
- `line-height`, `text-align`, `text-indent`, `letter-spacing`, `word-spacing`
- `text-transform`, `white-space`
- `border-collapse`, `border-spacing`, `caption-side`, `empty-cells`
- `cursor`, `direction`, `visibility`, `quotes`

--- NON-INHERITED Properties
- `width`, `height`,  `margin`, `padding`
- `border` (all border properties), `background` (all background properties)
- `display`, `overflow`, `position`, `top`, `right`, `bottom`, `left`
- `float`, `clear`, `z-index`
- `background-color`, `background-image`, `opacity`
- `box-shadow`, `outline`
- `flex`, `flex-direction`, `align-items`, etc., `grid-template-columns`, `grid-gap`, etc.*/

/*FONT DECLARATIONS*/

@font-face {
    font-family: 'vera';
    src: url('vera.eot');
    src: url('vera.eot?#iefix') format('embedded-opentype'),
         url('vera.woff') format('woff'),
         url('vera.ttf') format('truetype'),
         url('vera.svg#vera') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'vera';
    src: url('verab.eot');
    src: url('verab.eot?#iefix') format('embedded-opentype'),
         url('verab.woff') format('woff'),
         url('verab.ttf') format('truetype'),
         url('verab.svg#verab') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'vera';
    src: url('verai.eot');
    src: url('verai.eot?#iefix') format('embedded-opentype'),
         url('verai.woff') format('woff'),
         url('verai.ttf') format('truetype'),
         url('verai.svg#verai') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'vera';
    src: url('verabi.eot');
    src: url('verabi.eot?#iefix') format('embedded-opentype'),
         url('verabi.woff') format('woff'),
         url('verabi.ttf') format('truetype'),
         url('verabi.svg#verabi') format('svg');
    font-weight: bold;
    font-style: italic;
}

/* 1. CSS RESET & BASE */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* One rule that applies to ALL links */
a { text-decoration: none; }

html { -webkit-text-size-adjust: 100%; }

/* 2. BODY STYLES */
body {
    font-family: vera, "Comic sans MS", "Segoe UI", Verdana, sans-serif;
    width: 100%;
    max-width: 1200px; /* Optional: prevents content from stretching too wide */
    margin: 0 auto;
    padding: 0 20px; /* Optional: adds some breathing room on mobile */
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.bodyblue{ background-color:#BFE9FF; color:#1565C0; }
.bodyyellow{background-color:#FFFFCC; color:#800000; }
.bodygreen{background-color:#C2D6C2; color:#003300; }
.bodyred{ background-color:#FFCCCC; color:#800000; }

/* 2. LAYOUT & CONTAINERS */

#container {
    margin: 0 auto;       /* Centers horizontally */
    width: 100%;          /* Full width */
    max-width: 1200px;    /* Optional: constraint for large screens */
}

#preload{
	display:none;
}

/* Width utility classes - simplified naming */

.width100{width:100%;}
.width90{width:90%;}
.width80{width:80%;}
.width60{width:60%;}
.width50{width:50%;}
.width40{width:40%;}

.width100,.width90,.width80,.width60,.width50,.width40;{	clear: both; margin: 0 auto; padding: 0; }

/* General DIV styling */
div{
	clear: both;
	text-align: left;
	width: 100%;
	font-family: vera, "Comic sans MS", "Segoe UI", Verdana, sans-serif;
	padding: 0;
	margin: 0
}

.divblue1{background-color:#1565C0;color:#FFFF33}
.divblue2{background-color:#1E88E5;color:#FFFF33}
.divblue3{background-color:#42A5F5;color:#FFFFFF}
.divblue4{background-color:#99CCFF;color:#1565C0}
.divblue5{background-color:#BFE9FF;color:#1565C0}
.divred1{background-color:#800000;color:#FFFF33}
.divred2{background-color:#FF0000;color:#FFFF33}
.divred3{background-color:#FF4D4D;color:#FFFFFF}
.divred4{background-color:#FF9999;color:#800000}
.divred5{background-color:#FFCCCC;color:#800000}
.divgreen1{background-color:#005500;color:#FFD700}
.divgreen2{background-color:#006600;color:#FFD700}
.divgreen3{background-color:#669966;color:#FFFFFF}
.divgreen4{background-color:#A3C2A3;color:#003300}
.divgreen5{background-color:#C2D6C2;color:#004D00}
.divyellow1{background-color:#FFFF00;color:#800000}
.divyellow2{background-color:#FFFF33;color:#800000}
.divyellow3{background-color:#FFFF66;color:#800000}
.divyellow4{background-color:#FFFF99;color:#800000}
.divyellow5{background-color:#FFFFCC;color:#800000}
.divwhite{background-color:#FFFFFF;color:#800000}

.divsilver{ background-color: #C0C0C0; color: #1E88E5; border: #1E88E5 solid 0.2em;
	font-size: 1.7vw; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-radius:18px;width:80%;}
.divblue{ background-color: #99CCFF; color: #1565C0; border: #1565C0 solid 0.2em;
	font-size: 1.7vw; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-radius:18px;width:80%;}
.divgreen{ background-color: #669966; color: #FFFFFF; border: #FFFFFF solid 0.2em;
	font-size: 1.7vw; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-radius:18px;width:80%;}
.divred{ background-color: #FF4D4D; color: #800000; border: #800000 solid 0.2em;
	font-size: 1.7vw; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-radius:18px;width:80%;}
.divyellow{ background-color: #FFFF66; color: #FF0000; border: #FF0000 solid 0.2em;
	font-size: 1.7vw; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-radius:18px;width:80%;}

/* 3. HEADINGS (h1-h6) */

/* header1 centred */
h1 {
    font-variant: small-caps;    /* Requests small-caps rendering */
    font-weight: 700;            /* Bold weight */
    font-size: 3.0vw;            /* Responsive font size */
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.25em;
    padding: 0.1em 0;
    margin: 0;
}

/* heading2 centred */
h2 {
	font-variant: small-caps;
  	font-weight: 700;
  	font-size: 2.3vw;
  	line-height: 1.2;
  	text-align: center;
  	letter-spacing: 0.25em;
  	padding: 0.4em 0;
  	margin: 0;
}

/* heading3 centred */
h3 {
  	font-weight: 700;
  	font-size: 2.0vw;
  	line-height: 1.2;
  	text-align: center;
  	letter-spacing: 0.1em;
  	padding: 0.1em 0;
  	margin: 0 auto;
}

/* heading4 bold; italic; centred */
h4 {
	font-style: italic;
  	font-weight: 700;
  	font-size: 1.7vw;
  	line-height: 1.3;
  	text-align: center;
  	letter-spacing: 0.1em;
  	padding: 0.5em 0;
  	margin: 0;
}

/* para heading1 left aligned bold */
h5 {
  	font-weight: 700;
  	font-size: 2.0vw;
  	line-height: 1.3;
  	text-align: left;
  	padding: 0.1em;
  	margin: 0.1em 0.3em;
}

/* para heading left aligned */
h6 {
  	font-weight: 400;
  	font-size: 1.7vw;
  	line-height: 1.3;
  	text-align: left;
  	letter-spacing: 0.3em;
  	padding: 0.3em 1.8em;
  	margin: 0;
}

/*  4. PARAGRAPHS & TEXT */

p {
	font-weight: 400;
	font-style: normal;
	font-size: 1.7vw;
	color: #000000; 
	line-height: 1.3;
	text-align: left;
	padding: 0.3em 1.8em;
	margin: 0;
}

/*  Special paragraph variants */

.menu{font:1.8vw/1.35 vera;margin:0;padding:0;background-color:#C2D6C2}
.pugmenu{ font-weight:700; font-size:2.3vw; line-height: 1.35; margin:0; padding:0 0.1em; background-color:#FFFFFF}
.dolmenu{ font-weight:700; font-size:2.3vw; line-height: 1.35; margin:0; padding:0 0.1em; background-color:#FFFFFF}
.ausmenu{ font-weight:700; font-size:2.3vw; line-height: 1.35; margin:0; padding:0 0.1em; background-color:#FFFFFF}
.jagmenu{ font-weight:700; font-size:2.3vw; line-height: 1.35; margin:0; padding:0 0.1em; background-color:#FFFFFF}
.wiremenu{ font-weight:700; font-size:2.3vw; line-height: 1.35; margin:0; padding:0 0.1em; background-color:#FFFFFF}

.indent{
	font-weight: 400;
	font-size: 1.7vw;
	line-height: 1.3;
	text-align: left;
	padding: 0.3em 0 0 5.5em;
	margin: 0;
}

.indexleft{
	font-size: 1.7vw;
	line-height: 1.5;
	font-weight: 400;
	float:left;
	margin:0;
	padding:0.2;
	letter-spacing:0.2em;
}

.indexright{
	font-size: 1.7vw;
	line-height: 1.5;
	font-weight: 400;
	float:right;
	margin:0;
	padding:0.2;
	letter-spacing:0.2em;
}

.menuleft{
	font-variant: small-caps;	
	font-weight: 700;
	font-size: 2.3vw;
	float: left;
	line-height: 1.6;
	text-align: left;
	letter-spacing: 0.2em;
	padding: 0;
	margin-left: 1.5em;
}

.menuright{
	font-variant: small-caps;	
	font-weight: 700;
	font-size: 2.3vw;
	float: right;
	line-height: 1.6;
	text-align: right;
	letter-spacing:0.2em;
	padding:0em;
	margin-right: 1.5em;
}

.listleft{font:1.7vw/1.2;float:left;padding:0.1em 0;margin:0;letter-spacing:0.1em}
.listright{font:1.7vw/1.2;float:right;padding:0.1em 0;margin:0;letter-spacing:0.1em}

.menuwideright{
	font-variant: small-caps;
	font-weight: 700;
	font-size: 2.2vw;
	float: right;
	line-height: 1.6;
	text-align: right;
	letter-spacing:0.2em;
	padding:0;
	margin-right: 0.8em;
}

.menuwideleft{
	font-variant: small-caps;
	font-weight: 700;
	font-size: 2.2vw;
	float: left;
	line-height: 1.6;
	text-align: left;
	letter-spacing:0.2em;
	padding:0;
	margin-left: 0.8em;
}

/* Link Colours */

.ablue1 { color: #FFFF33; background: #1565C0; }
.ablue1:hover { color:#1565C0; background: #FFFF33; font-style: italic; } 

.ablue2 { color:  #FFFF33; background: #1E88E5; } 
.ablue2:hover { color: #1E88E5; background: #FFFF33; font-style: italic; } 

.ablue3 { color: #FFFFFF; background: #42A5F5; } 
.ablue3:hover { color: #42A5F5; background: #FFFFFF; font-style: italic; } 

.ablue4 { color: #1565C0; background: #99CCFF; } 
.ablue4:hover { color: #FFD700; background: #1565C0; font-style: italic; } 

.ablue5 { color: #1565C0; background: #BFE9FF; } 
.ablue5:hover { color: #BFE9FF; background: #1565C0; font-style: italic; }

.agreen1 { color: #FFD700; background: #003300; }
.agreen1:hover { color: #003300; background: #FFD700; font-style: italic; } 

.agreen2 { color: #FFD700; background: #006600; }
.agreen2:hover { color: #006600; background: #FFD700; font-style: italic; }

.agreen3 { color: #FFFFFF; background: #527A52; }
.agreen3:hover { color: #527A52; background: #FFFFFF; font-style: italic; }

.agreen4 {color: #003300; background: #A3C2A3; }
.agreen4:hover { color: #A3C2A3; background: #003300; font-style: italic; } 

.agreen5 { color: #004D00; background: #C2D6C2 }
.agreen5:hover { color: #C2D6C2; background: #004D00; font-style: italic; }

.ared1 { color:#FFFF33; background: #800000; }
.ared1:hover { color: #800000; background: #FFFF33; font-style: italic; }

.ared2{ color: #FFFF33; background: #FF0000; } 
.ared2:hover { color: #FF0000; background: #FFFF33; font-style: italic; } 

.ared3{ color: #FFFFFF; background: #FF4D4D; }
.ared3:hover { color: #FF4D4D; background: #FFFFFF; font-style: italic; } 

.ared4{ color: #800000; background: #FF9999; }
.ared4:hover { color: #FF9999; background: #800000; font-style: italic; }

.ared5{color:#800000; background:#FFCCCC; }
.ared5:hover { color: #FFCCCC; background: #800000; font-style: italic; }

.ayellow1 { color: #800000; background: #FFFF00; }
.ayellow1:hover { color: #FFFF00; background: #800000; font-style: italic; }

.ayellow2 { color: #800000; background:#FFFF33; }
.ayellow2:hover { color: #FFFF33 background: #800000; font-style: italic; } 

.ayellow3 { color: #800000; background: #FFFF66; }
.ayellow3:hover { color: #FFFF66; background: #800000; font-style: italic; }

.ayellow4 { color: #800000; background: #FFFF99; }
.ayellow4:hover { color: #FFFF99; background: #800000; font-style: italic; }

.ayellow5 { color: #800000; background: #FFFF00; }
.ayellow5:hover { color: #FFFF00; background: #800000; font-style: italic; }

.awhite { color: #000000; background:#FFFFFF; } 
.awhite:hover { color: #FFFFFF; background: #000000; font-style: italic; }

.asilver{ color: #1E88E5; background: #C0C0C0; }
.asilver:hover { color: #C0C0C0; background: #1E88E5; font-style: italic; }


/*  5. LISTS  */

li {
	font-size: 1.8vw;
	color: #000000; 
	padding: 0.15em 0em;
	margin: 0;
}

ol,ul { 
	padding: 0vw 7.0vw;
	margin: 0;
}

/*  6. UTILITY CLASSES  */

/* Text alignment */
.center{ text-align: center;}
.right{ text-align: right;}
.left { text-align: left;}

/* Font weight/style */
.bold{ font-weight: 700; font-style: normal; letter-spacing:0.05em;}
.italic{ font-weight: 400; font-style: italic; letter-spacing:0.02em;}
.bolditalic{ font-weight: 700; font-style: italic; letter-spacing:0.05em;}

/* Size Utilities */
.small{ font-size:1.7vw; line-height: 1.1; font-weight: 400; }
.big{ font-size: 2.0vw; line-height: 1.3; font-weight: 700; letter-spacing:0.05em; }
.bigitalic{ font-size:2.0vw; line-height: 1.3; font-family: verabi;letter-spacing:0.05em; }
.huge{ font-size: 2.5vw; line-height: 1.35; font-family: verab; font-weight: 700; letter-spacing:0.07em; }

/* Span colours */
.spanred{color:#FF0000}
.spanmaroon{color:#800000}
.spanyellow{color:#FFFF00}
.spanblue{color:#1565C0}
.spangreen{color:#669966}
.spanwhite{color:#FFFFFF}
.spanblack{color:#000000}
.small{font:0.8vw/1.0 vera}
.smallitalic{font:0.8em/1.0 verai}
.fraction{font-size:0.75em;font-weight:bold}

/* Vertical spacing */
.spacer{font:0.5vw/0.5 vera}
.space{margin-bottom:4px}

#idred{font:2.0vw/1.0 verabi;text-align:center;margin:0 auto;padding:0.2em 0.1em;border-radius:6px;width:85%}
#id1{font:1.0vw/1.2 vera;margin:0 auto;padding:0;border:0}
#id2{font:1.5vw/1.2 verabi;text-align:center;margin:0 auto;padding:0.2em 0}
#id3{font:1.75vw/1.2 verabi;text-align:center;margin:0 auto;padding:0.2em 0;border:currentcolor solid 0.2em;border-radius:12px;width:75%}
#idblue{font:1.3vw/1.2 verabi;text-align:center;margin:0 auto;padding:0.2em 0;border:currentcolor solid 0.2em;border-radius:12px;width:95%}

#thumbBox{position:absolute;left:0;top:0;width:auto;padding:0.1em;background:black;visibility:hidden;z-index:10;}
#thumbBox .footerbar{font:bold 1.0em/1.0 vera;color:yellow;padding:0.1em;text-align:center}
#thumbBox #thumbImage{background-color:black}
#thumbLoading{position:absolute;visibility:hidden;border:black solid 1px;background-color:black;padding:0px;z-index:5}


.px25{letter-spacing:0.5em}
.px18{letter-spacing:0.36em}
.px15{letter-spacing:0.3em}
.px12{letter-spacing:0.24em}
.px9{letter-spacing:0.18em}
.px6{letter-spacing:0.12em}
.px3{letter-spacing:0.06em}

.header { padding: 0px 0px}
.sticky {position: fixed;top: 0;width: 98%}
.sticky + .content {padding-top: 102px}

.listleft{font:1.7vw/1.2 vera;float:left;padding:0.1em 0;margin:0;letter-spacing:0.1em}
.listright{font:1.7vw/1.2 vera;float:right;padding:0.1em 0;margin:0;letter-spacing:0.1em}

select {font:1.3vw/1.25 verab; padding:0.25vw 1.5vw}

//don't alter
img:hover {box-shadow: 0 0 2px 3px red;}

.img3{width:3vw}
.img5l{width:2.5vw;float:left;border:1px solid black;border-radius:4px;padding:2px;margin 0.3em 0}
.img6{width:5vw}
.img7l{width:4vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin 0.3em 0}
.img8l{width:5vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin:0.3em 0}
.img9l{width:6vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin:0.5em 0}
.img10l{width:8vw;float:left}
.img10r{width:8vw;float:right}
.img11{width:10vw;float:left}
.img11l{width:10vw;float:left; border:2px solid green;border-radius:4px;padding:0em;margin:0em}
.img12{width:10vw}
.img12l{width:12vw;float:left}
.img12r{width:12vw;float:right}
.img15r{width:15vw,float:right}
.img15{width:18vw}
.img25l{width:22vw;float:left;padding:0 0 0 1%}
.img25r{width:15vw;float:right;border:1px solid black;border-radius:4px;padding:2px;margin:0.3em 0}

.imgcar{width:8vw;float:left;padding:0 0 0 1%}

//don't alter

object.boxlong{clear:both;font-size:1.8em;border:#0000C3 solid 2px;background-color:#8fdeff;}

  <!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 START -->
<script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script>
<script type='text/javascript'><!--
wm_custnum='e1544a8dc5b3dd5e';
wm_page_name='0styles.css';
wm_group_name='/services/webpages/j/i/jimbutterworth.co.uk/public';
wm_campaign_key='campaign_id';
wm_track_alt='';
wiredminds.count();
// -->
</script>
<!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 END -->
</body>
</html>