/*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, Verdana, "Segoe UI", 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:#0000CC; }
.bodyyellow{background-color:#FFFFDF; color:#800000; }
.bodygreen{background-color:#D8F3DC; color:#336600; }
.bodyred{ background-color:#FFCCCC; color:#800000; }

/* 2. LAYOUT & CONTAINERS */

#container {
    margin: 0 auto;       /* Centers horizontally */
    width: 100%;          /* Full width */
    max-width: 1800px;    /* 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%;
  padding: 0;
  margin: 0;
}

.divred1, .bgred1 { background-color: #800000; color: #FFFF00; }
.divred2, .bgred2 { background-color: #FF0000; color: #000000; }
.divred3, .bgred3 { background-color: #FF4D4D; color: #000000; }
.divred4, .bgred4 { background-color: #FF9999; color: #000000; }
.divred5, .bgred5 { background-color: #FFCCCC; color: #000000; }

.divgreen1, .bggreen1 { background-color: #336600; color: #FFFF00; }
.divgreen2, .bggreen2 { background-color: #74C69D; color: #000000; }
.divgreen3, .bggreen3 { background-color: #95d5b2; color: #000000; }
.divgreen4, .bggreen4 { background-color: #B7E4C7; color: #000000; }
.divgreen5, .bggreen5 { background-color: #D8F3DC; color: #000000; }

.divblue1, .bgblue1 {background-color: #0000CC; color: #FFFF00; }
.divblue2, .bgblue2 {background-color: #1E88E5; color: #000000; }
.divblue3, .bgblue3 {background-color: #42A5F5; color: #000000; }
.divblue4, .bgblue4 {background-color: #99CCFF; color: #000000; }
.divblue5, .bgblue5 {background-color: #BFE9FF; color: #000000; }

.divyellow1, .bgyellow1 {background-color: #FFFF00; color: #800000; }
.divyellow3, .bgyellow3 {background-color: #FFFF88; color: #800000; }
.divyellow5, .bgyellow5 {background-color: #FFFFDF; color: #800000; }

.divwhite, .bgwhite {background-color:#FFFFFF;color:#000000; }

.divred,
.divsilver,
.divblue,
.divgreen,
.divyellow{font-size: 1.7vw; font-weight: 700; line-height: 1.2; text-align:center; margin:0 auto;padding:0.1em 0;border-width: 0.2em; border-radius:18px; }

.divred{ background-color: #FF4D4D; color: #FFFF00; width:80%; border: #FFFF00 solid 0.2em; }
.divsilver{ background-color: #C0C0C0; color: #0000CC; width:80%; border: #0000CC solid 0.2em; }
.divblue{ background-color: #99CCFF; color: #0000CC; width:90%; border: #0000CC solid 0.2em; }
.divgreen{ background-color: #95d5b2; color: #FFFFFF; width:80%; border: #FFFFFF solid 0.2em; }
.divyellow{ background-color: #FFFF88; color: #FF0000; width:80%; border: #FF0000 solid 0.2em; }

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

/* header1 centred */
h1 {
    font-variant: small-caps;    /* Requests small-caps rendering */
    font-weight: 700;            /* Bold weight */
    font-size: 2.8vw;            /* 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: 2.0vw;
	line-height: 1.3;
	text-align: left;
	padding-left: 3.0vw;
	margin-bottom: 0.5vw;
}

/*  Special paragraph variants */

.menu{font:1.7vw/1.35 vera;margin:0;padding:0;background-color:#D8F3DC}

.pugmenu,
.dolmenu,
.ausmenu,
.jagmenu,
.wiremenu {
  font-weight: 700;
  font-size: 2.2vw;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

.listleft,
.listright {
	font-weight:400;
	font-size: 1.7vw;
	line-height:1.2;
	padding:0.1em 0;
	margin:0;
	letter-spacing:0.1em
}
.listleft {	float: left; }
.listright { float: right; } 

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

.indexleft,
.indexright{
	font-size: 2.1vw;
	line-height: 1.5;
	font-weight: 700;
	margin:0;
	padding:0.1em;
	letter-spacing:0.1em;
}

.indexleft{float: left;}
.indexright{float: right; }

.menuleft, .menuright {
    font-variant: small-caps;	
    font-weight: 900;
    font-size: 2.5vw;
    line-height: 1.6;
    letter-spacing: 0.2em;
    padding: 0;
}

.menuleft {
    float: left;
    text-align: left;
    margin-left: 1.7em;
}

.menuright {
    float: right;
    text-align: right;
    margin-right: 1.7em;
}

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

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

/* Link Colours */

.ablue1 { color: #FFFF00; background: #0000CC; }
.ablue1:hover { color:#0000CC; background: #FFFF00; font-style: italic; } 

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

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

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

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

.agreen1 { color: #FFFF00; background: #336600; }
.agreen1:hover { color: #336600; background: #FFFF00; font-style: italic; } 

.agreen2 { color: #000000; background: #74c69d; }
.agreen2:hover { color: #74C69D; background: #000000; font-style: italic; }

.agreen3 { color: #000000; background: #95D5b2; }
.agreen3:hover { color: #95D5b2; background: #000000; font-style: italic; }

.agreen4 {color: #000000; background: #B7E4C7; }
.agreen4:hover { color: #B7E4C7; background: #000000; font-style: italic; } 

.agreen5 { color: #000000; background: #D8F3DC }
.agreen5:hover { color: #D8F3DC; background: #000000; font-style: italic; }

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

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

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

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

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

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

.ayellow3 { color: #000000; background: #FFFF88; }
.ayellow3:hover { color: #FFFF88; background: #000000; font-style: italic; }

.ayellow5 { color: #000000; background: #FFFFDF; }
.ayellow5:hover { color: #FFFFDF; background: #000000; 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-weight: 400;
  font-style: normal;	
  font-size: 2.0vw;
  line-height: 1.3; /* Space between lines within each item */
  padding-left: 0.3vw; /* Indent content within items */
  margin-bottom: 0.7vw; /* Space between items */
}

ol, ul {padding-left: 7.5vw;  } /* Indent entire list */
ol.wide, ul.wide {padding-left: 12vw; }

/*  6. UTILITY CLASSES  */

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

/* Font weight/style */
.bold{ font-weight: 900; font-style: normal; letter-spacing:0.05em;}
.italic{ font-weight: 400; font-style: italic; letter-spacing:0.02em;}
.bolditalic{ font-weight: 900; 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.4vw; line-height: 1.3; font-weight: 700; letter-spacing:0.05em; }
.bigitalic{ font-size:2.4vw; line-height: 1.3; font-family: verabi;letter-spacing:0.05em; }
.huge{ font-size: 2.8vw; 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:#0000CC}
.spangreen{color: #336600}
.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}

#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: 100%}
.sticky + .content {padding-top: 100px}

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

table{width:100%; font:2.0vw/1.2 vera; margin:0 0}
table.small{width:100%; font:1.2vw/1.2 vera; margin:0 0}

td.green{color:#004D00}
td.blue1{color:"Navy Blue"}
td.white{color:#FFFFFF}
td.yellow{color:#FFFF00;font-weight:bold}

//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:6vw; }
.img7l{width:6vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin 0.3em 0}
.img8{width:8vw; }
.img8l{width:7vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin:0.3em 0}
.img9l{width:8vw;float:left;border:2px solid maroon;border-radius:4px;padding:2px;margin:0.5em 0}
.img10{width:10vw; }
.img10l{width:8vw;float:left}
.img10r{width:8vw;float:right}
.img11{width:11vw; }
.img11l{width:10vw;float:left; border:2px solid green;border-radius:4px;padding:0em;margin:0em}
.img12{width:12vw; }
.img12l{width:12vw;float:left}
.img12r{width:12vw;float:right}
.img15r{width:15vw,float:right}
.img15{width:15vw; }
.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;}    <script src="9top.js" defer></script>
  <!-- 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>