/***************************************************** shrink big images **********************************************************/
@media screen and (max-width: 2000px) {
#bnw {width: 500px; height: 353px; background-size: 500px 353px;}	
#ss-fish {width: 480px; height: 262px; background-size: 480px 262px;}
#fq-newcastle {width: 480px; height: 260px; background-size: 480px 260px;}
#fq-burnley {width: 480px; height: 280px; background-size: 480px 280px;}
#fq-liverpool {width: 480px; height: 335px; background-size: 480px 335px;}

}


@media screen and (max-width: 700px) {
#bnw {width: 400px; height: 282px; background-size: 400px 282px;}	
#ss-fish {width: 400px; height: 218px; background-size: 400px 218px;}
#fq-newcastle {width: 400px; height: 217px; background-size: 400px 217px;}
#fq-burnley {width: 400px; height: 233px; background-size: 400px 233px;}
#fq-liverpool {width: 400px; height: 279px; background-size: 400px 279px;}

/** 3 **/
#lc-river, #lc-penguins, #lc-bird, #lc-space {width: 400px; height: 266px; background-size: 400px 266px;}
#lc-tulips {width: 400px; height: 232px; background-size: 400px 232px;}
#lc-hills {width: 400px; height: 225px; background-size: 400px 225px;}
#fq-northampton {width: 400px; height: 190px; background-size: 400px 190px;}
#fq-sunderland {width: 400px; height: 250px; background-size: 400px 250px;}
#fq-colchester {width: 400px; height: 253px; background-size: 400px 253px;}
#fq-everton {width: 400px; height: 277px; background-size: 400px 277px;}
#fq-blackburn {width: 400px; height: 271px; background-size: 400px 271px;}
#fq-bolton {width: 400px; height: 235px; background-size: 400px 235px;}
#fq-leeds {width: 400px; height: 271px; background-size: 400px 271px;}
#fq-ipswich {width: 400px; height: 320px; background-size: 400px 320px;}
#fq-rushden {width: 400px; height: 351px; background-size: 400px 351px;}

}


@media screen and (max-width: 500px) {
#bnw {width: 320px; height: 226px; background-size: 320px 226px;}	
#ss-fish {width: 320px; height: 175px; background-size: 320px 175px;}
#fq-newcastle {width: 320px; height: 174px; background-size: 320px 174px;}
#fq-burnley {width: 320px; height: 187px; background-size: 320px 187px;}
#fq-liverpool {width: 320px; height: 223px; background-size: 320px 223px;}

/** 3 **/
#lc-river, #lc-penguins, #lc-bird, #lc-space {width: 320px; height: 213px; background-size: 320px 213px;}
#lc-tulips {width: 320px; height: 186px; background-size: 320px 186px;}
#lc-hills {width: 320px; height: 180px; background-size: 320px 180px;}
#fq-northampton {width: 320px; height: 152px; background-size: 320px 152px;}
#fq-sunderland {width: 320px; height: 200px; background-size: 320px 200px;}
#fq-colchester {width: 320px; height: 202px; background-size: 320px 202px;}
#fq-everton {width: 320px; height: 221px; background-size: 320px 221px;}
#fq-blackburn {width: 320px; height: 217px; background-size: 320px 217px;}
#fq-bolton {width: 320px; height: 188px; background-size: 320px 188px;}
#fq-leeds {width: 320px; height: 217px; background-size: 320px 217px;}
#fq-ipswich {width: 320px; height: 256px; background-size: 320px 256px;}
#fq-rushden {width: 320px; height: 281px; background-size: 320px 281px;}

/** 2 **/
#guypd-beans {width: 320px; height: 240px; background-size: 320px 240px;}
#bo-front, #bo-back {width: 320px; height: 236px; background-size: 320px 236px;}
#fq-oldham {width: 320px; height: 299px; background-size: 320px 299px;}
#404badger {width: 320px; height: 281px; background-size: 320px 281px;}

}


@media screen and (max-width: 349px) {
#bnw {width: 240px; height: 169px; background-size: 240px 169px;}	
#ss-fish {width: 240px; height: 131px; background-size: 240px 131px;}
#fq-newcastle {width: 240px; height: 130px; background-size: 240px 130px;}
#fq-burnley {width: 240px; height: 140px; background-size: 240px 140px;}
#fq-liverpool {width: 240px; height: 167px; background-size: 240px 167px;}

/** 3 **/
#lc-river, #lc-penguins, #lc-bird, #lc-space {width: 240px; height: 160px; background-size: 240px 160px;}
#lc-tulips {width: 240px; height: 139px; background-size: 240px 139px;}
#lc-hills {width: 240px; height: 135px; background-size: 240px 135px;}
#fq-northampton {width: 240px; height: 114px; background-size: 240px 114px;}
#fq-sunderland {width: 240px; height: 150px; background-size: 240px 150px;}
#fq-colchester {width: 240px; height: 152px; background-size: 240px 152px;}
#fq-everton {width: 240px; height: 166px; background-size: 240px 166px;}
#fq-blackburn {width: 240px; height: 163px; background-size: 240px 163px;}
#fq-bolton {width: 240px; height: 141px; background-size: 240px 141px;}
#fq-leeds {width: 240px; height: 163px; background-size: 240px 163px;}
#fq-ipswich {width: 240px; height: 192px; background-size: 240px 192px;}
#fq-rushden {width: 240px; height: 210px; background-size: 240px 210px;}

/** 2 **/
#guypd-beans {width: 240px; height: 180px; background-size: 240px 180px;}
#bo-front, #bo-back {width: 240px; height: 177px; background-size: 240px 177px;}
#fq-oldham {width: 240px; height: 224px; background-size: 240px 224px;}
#404badger {width: 240px; height: 211px; background-size: 240px 211px;}

/** 1 **/
#wqe-thing {width: 220px; height: 194px; background-size: 220px 194px;}
#fq-badger {width: 220px; height: 147px; background-size: 220px 147px;}
#fq-southend {width: 220px; height: 292px; background-size: 220px 292px;}
#waw-2buttons {width: 220px; height: 102px; background-size: 220px 102px;}

}


/***************************************************** just a little narrower **********************************************************/
@media screen and (max-width: 1440px) {
/** layout **/
#wrapper {width: 1280px;}
main {width: 730px;}
.mainfeatures {width: 320px;}
.mainmenu {margin: 40px 100px;}
.mainmenu li {margin: 25px 0;}
.mainmenu li:first-child {margin-top: 10px;}
#navleft {width: 280px;}
#navright {width: 280px;}
#navleft .navmenu {padding: 60px 0 0 45px;  width: 190px;}
#navright .navmenu {padding: 60px 0 0 55px; width: 185px;}

/** smaller images **/
.mainmenu h1 {padding: 16px 5px 0; width: 520px; height: 61px; background-size: 520px 61px;}
}

/**************************************************** black stripes touching sides ********************************************************/
@media screen and (max-width: 1300px) {
/** layout **/
body {background-color: #000;}
#wrapper {width: 1210px; background-color: #fff;}
main {width: 710px;}
.mainfeatures {width: 310px;}
#navleft {width: 250px; background: #000 url(../images/stripes-right.png) repeat-y top right;}
#navright {width: 250px; background: #000 url(../images/stripes-left.png) repeat-y top left;}
#navleft .navmenu {padding: 60px 0 0 0;  width: 190px;}
#navright .navmenu {padding: 60px 0 0 58px; width: 185px;}

/** individual page adjustments **/
#squirrelkillswrapper, #longcutwrapper {background-color: #fff;}
}

@media screen and (max-width: 1260px) {
#navleft .navmenu {padding: 60px 0 0 10px;  width: 190px;}
#navright .navmenu {padding: 60px 0 0 48px; width: 185px;}
}

@media screen and (max-width: 1230px) {
#wrapper {width: 1180px;}
main {width: 700px;}
.mainfeatures {width: 305px;}
#navleft {width: 240px;}
#navright {width: 240px;}
#navleft .navmenu {padding: 60px 0 0 5px;  width: 190px;}
#navright .navmenu {padding: 60px 0 0 48px; width: 185px;}
}

/*********************************************** vertical layout (two horizontal black stripes) (grey box) ******************************************************/
@media screen and (max-width: 1210px) {
/** layout **/
body {background-color: #fff;}
#wrapper {flex-direction: column; width: 100%;  padding-bottom: 240px; background: #fff url(../images/badgers-road-sign-tablet.png) no-repeat bottom center;}
main {order: 1;	margin: 0 auto; padding-bottom: 20px; width: 810px; background: none;}
.mainfeatureswrapper {
	border: 40px solid transparent;
	-webkit-border-image: url(../images/mainmenuborder.png) 10% stretch;
	-moz-border-image: url(../images/mainmenuborder.png) 10% stretch;
	-o-border-image: url(../images/mainmenuborder.png) 10% stretch;
	border-image: url(../images/mainmenuborder.png) 10% stretch; /** 20% **/
	border-image-width: 40px; /** 20px **/
	margin: 40px auto;
	padding: 0;
}
.mainfeatureswrapperinner {padding: 10px 0px; background-color: rgb(212,212,212);}
.mainfeatures {margin: 0 30px; width: 320px;}
.mainmenu {margin: 40px auto; width: 70%;}
#home main {padding-bottom: 0;}
#navleft {order: 3; margin: 130px auto 35px; width: 100%; 
	background-image: url(../images/stripes-top.png), url(../images/stripes-bottom.png);
	background-position: top left, bottom left;
	background-repeat: repeat-x;}
#navright {order: 2; padding-bottom: 0; margin: 5px auto 20px; width: 100%; 
	background-image: url(../images/stripes-top.png), url(../images/stripes-bottom.png);
	background-position: top left, bottom left;
	background-repeat: repeat-x;}

/** nav stripes **/
#navleft .navmenu {margin: 40px auto 100px; width: 311px;}
#navright .navmenu {margin: 40px auto 100px; width: 311px;}
#somemoreshortcuts {margin-bottom: 18px; width: 292px; height: 30px; background: url(../images/navcuts-somemoreshortcuts-long.png) no-repeat top left;}
#afewmoreshortcuts {width: 298px; height: 28px; background: url(../images/navcuts-afewmoreshortcuts-long.png) no-repeat top left;}
#nomoreshortcuts {width: 249px; height: 26px; background: url(../images/navcuts-nomoreshortcuts-long.png) no-repeat top left;}

}

/*********************************************** main 100pc and logo first shrink (grey lines) ****************************************************/
@media screen and (max-width: 820px) { 
/** layout **/
main {margin: 0 0 25px; width: 100%;}
#maincontent {margin: 0 auto; padding: 0; width: 90%;}
.mainfeatureswrapper {margin: 40px 0 30px; border: none; width: 100%;}
.mainfeatureswrapperinner {margin: 0; padding: 10px 0 50px; 
	background-image: url(../images/mainmenuborder-top.png), url(../images/mainmenuborder-bot.png);
	background-position: top left, bottom left;
	background-repeat: repeat-x;
	background-color: rgb(212,212,212);}
.mainfeatures > ul > li {margin-top: 40px;}

#home .mainfeatures {float: none; margin: 0 auto; padding: 0; width: 90%;} 
.mainmenu {margin: 0 auto; width: 84%;}
.mainmenu li {margin: 30px 0;}
.mainmenu h1 {margin: 50px auto 0;}
#mainmenufirst h1 {margin-top: 8px;}

/** smaller images **/
header {width: 548px; height: 110px; background-size: 548px 110px;}
#thumb-guessthenumber, #thumb-athletesfoot, #thumb-badgersong, #thumb-cheeseroll, #thumb-wordoftheday, #thumb-weeklyawardwinners, #thumb-nationalbadgerday, #thumb-weareallmoles, #thumb-postmanalgebrachallenge, #thumb-meettheteam, #thumb-badgerquest, #thumb-bravenewword, #thumb-reallifebadgernews, #thumb-badgerorgy {width: 60px; height: 60px; background-size: 60px 60px;}
#thumb-colouroftheday, #thumb-jobsonjobsworthcv, #thumb-jobsonjobsworthapp, #thumb-footballquiz, #thumb-giveusyourpersonaldata, #thumb-badgersdirect, #thumb-bluequits, #thumb-tommytomkinsfanclub, #thumb-jokepage, #thumb-strangesentences {width: 55px; height: 55px; background-size: 55px 55px;}
#thumb-meettheteam {margin-left: 0; background: url(../images/thumb-reallifebadgernews.png) no-repeat top left; width: 60px; height: 60px; background-size: 60px 60px;}
.mainmenu div div {display: none;} /** remove arrow images **/

/** spacings **/
.mainfeatures > ul > li:first-child {margin-top: 40px;}
.mainmenu h2 {margin-left: 85px;} 
.mainmenu p {margin-left: 85px;}
#maincontent ul {margin: 20px;}
#home #maincontent ul {margin: 20px;}
#returnhome {margin-left: 22px;}

/** text size **/
#maincontent h1 {margin: 19px 0 5px; font-size: 40px;}
#maincontent h2, #maincontent h3 {font-size: 30px;}

/** individual page adjustments **/
#jobsonjobsworthwrapper #maincontent #headingadjust1 {margin-bottom: 6px;}
#jobsonjobsworthwrapper #maincontent #headingadjust2 {margin-top: 19px;}
}

/******************************************* logo second shrink **************************************************/
@media screen and (max-width: 600px) {
/** smaller images **/
header {width: 500px; height: 100px; background-size: 500px 100px;}
.mainmenu h1 {padding: 11px 5px 0; width: 400px; height: 47px; background-size: 400px 47px;}
.mainmenu h2 a:hover {background: url(../images/dot.png) no-repeat 0 0;}

/** text size **/
body {font-size: 17px; line-height: 23px;}

/** individual page adjustments **/
#cheeserollwrapper #cheeserollmain {width: 350px;}
#cheeserollmain h1 {font-size: 35px; line-height: 60px;}
.input-question, .answer {font: 30px 'badgerscript', 'Comic Sans MS', sans-serif;}
}

/************************************************************************************************************************************/
/******************************************************** small mobiles *************************************************************/
/************************************************************************************************************************************/
@media screen and (max-width: 550px) {
header {width: 450px; height: 90px; background-size: 450px 90px;}
}

@media screen and (max-width: 510px) {
header {width: 411px; height: 82px; background-size: 411px 82px;}
}

/**CHROME reaches just past here**/
@media screen and (max-width: 500px) {
/** layout **/
.mainmenu {width: 90%;}

/** smaller images **/
.mainmenu h1 {padding: 7px 5px 0; width: 300px; height: 35px; background-size: 300px 35px;}

#imagbisc {margin: 30px auto; width: 300px; height: 218px; background-size: 300px 218px;}
#weboyear {margin: 30px auto; width: 300px; height: 191px; background-size: 300px 191px;}
#seekhelp {margin: 30px auto; width: 300px; height: 179px; background-size: 300px 179px;}

#thumb-guessthenumber, #thumb-athletesfoot, #thumb-badgersong, #thumb-cheeseroll, #thumb-wordoftheday, #thumb-weeklyawardwinners, #thumb-nationalbadgerday, #thumb-weareallmoles, #thumb-postmanalgebrachallenge, #thumb-meettheteam, #thumb-badgerquest, #thumb-bravenewword, #thumb-reallifebadgernews, #thumb-meettheteam, #thumb-badgerorgy {width: 50px; height: 50px; background-size: 50px 50px;}
#thumb-colouroftheday, #thumb-jobsonjobsworthcv, #thumb-jobsonjobsworthapp, #thumb-footballquiz, #thumb-giveusyourpersonaldata, #thumb-badgersdirect, #thumb-bluequits, #thumb-tommytomkinsfanclub, #thumb-jokepage, #thumb-strangesentences {width: 45px; height: 45px; background-size: 45px 45px;}
.thumb {margin-left: 2px;}

/** spacings **/
#maincontent ul {margin: 15px 0;}
#home #maincontent ul {margin: 15px 0;}
.mainmenu h2 {margin-left: 65px;} 
.mainmenu p {margin-left: 65px;}

/** text size **/
#maincontent h1 {font-size: 35px;}
#maincontent h2, #maincontent h3 {font-size: 25px;}
p {margin: 15px 0;}
.mainfeatures h2 {font-size: 32px;} 
.mainmenu h1 {font-size: 30px;} 
.mainmenu h2 {font-size: 29px;} 

/** individual page adjustments **/
#maincontent #form li, #maincontent #wordlist li {background: none;}
#tommyquotes {width: 250px;}
#sentences {width: 250px;}
#cheeserollwrapper #cheeserollmain {width: 250px;}
#cheeserollmain h1 {font-size: 35px; line-height: 60px;}
#bluequitsbox-arrow {width: 1px; height: 1px; background: url(../images/dot.png) no-repeat top left;}
}

/************************************************************************************************************************************/
@media screen and (max-width: 465px) {
header {width: 390px; height: 78px; background-size: 390px 78px;}
}

@media screen and (max-width: 430px) {
header {width: 350px; height: 70px; background-size: 350px 70px;}
}

@media screen and (max-width: 400px) {
/** smaller images **/
header {width: 320px; height: 64px; background-size: 320px 64px;}

/** spacings **/
#returnhome {margin-left: 13px;}
#navleft .navmenu, #navright .navmenu {padding: 50px 0 0; width: 90%;}

/** individual page adjustments **/
#maincontent #wordlist {width: auto;}
}

/************************************************************************************************************************************/
@media screen and (max-width: 349px) {
/** smaller images **/
header {width: 270px; height: 54px; background-size: 270px 54px;}

#imagbisc {width: 240px; height: 174px; background-size: 240px 174px;}
#weboyear {width: 240px; height: 152px; background-size: 240px 152px;}
#seekhelp {width: 240px; height: 143px; background-size: 240px 143px;}

#returnhome {margin: 20px 0 0 10px; width: 133px; height: 46px; background-size: 133px 46px;} /** resize to 80% **/

#twitter {width: 126px; height: 24px; background-size: 126px 24px;} /** resize to 80% **/ 
#facebook {width: 124px; height: 26px; background-size: 124px 26px;}
#blog {width: 87px; height: 30px; background-size: 87px 30px;}
#shop {width: 153px; height: 29px; background-size: 153px 29px;}
#linkedin {width: 106px; height: 25px; background-size: 106px 25px;}
#jobvacancies {width: 146px; height: 23px; background-size: 146px 23px;}
#contactus {width: 152px; height: 26px; background-size: 152px 26px;}

#shortcuts {margin-top: 0; width: 118px; height: 23px; background-size: 118px 23px;} /** resize to 90% **/ 
#longcuts {margin-top: 35px; width: 102px; height: 32px; background-size: 102px 32px;}
#somemoreshortcuts {background: url(../images/navcuts-somemoreshortcuts-tall.png) no-repeat top left;}
#somemoreshortcuts {margin-top: 45px; width: 129px; height: 56px; background-size: 129px 56px;}
#afewmoreshortcuts {background: url(../images/navcuts-afewmoreshortcuts-tall.png) no-repeat top left;}
#afewmoreshortcuts {margin-top: 35px; width: 137px; height: 64px; background-size: 137px 64px;}
#nomoreshortcuts {width: 1px; height: 1px; margin: 0; padding:0; background-size: : url(../images/dot.png) no-repeat top left;}
#falselinks  {display: none;}

#maincontent li {padding-left: 28px; background: url(../images/bullets-main-mobile.png) no-repeat 0 0;}
#home #maincontent li {padding-left: 28px; background: url(../images/bullets-main-mobile.png) no-repeat 0 0;}
.mainfeatures ul ul li {padding-left: 28px; background: url(../images/bullets-main-mobile.png) no-repeat 0 0;}
.navmenu li {padding-left: 21px; background: url(../images/bullets-nav-mobile.png) no-repeat 0 7px;}

.mainmenu h1 {padding: 1px 5px 0; width: 200px; height: 24px; background-size: 200px 24px;}

/** remove thumbnails **/ 
.mainmenu div {width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; background: url(../images/dot.png) no-repeat top left !important;}

/** spacings **/
#homejobson {padding-bottom: 40px;}
.mainmenu h2 {margin-left: 10px;} 
.mainmenu p {margin-left: 10px;}

/** text size **/
#maincontent h1 {font-size: 30px;}
#maincontent h2, #maincontent h3 {font-size: 25px;}
}

/************************************************************************************************************************************/
@media screen and (max-width: 319px) {
/** smaller images **/
header {width: 220px; height: 44px; background-size: 220px 44px;}
}

/************************************************************************************************************************************/
@media screen and (max-width: 279px) {
/** smaller images **/
#imagbisc, #weboyear, #seekhelp {display: none; width: 1px; height: 1px; margin: 0; padding:0; background: url(../images/dot.png) no-repeat top left;}
}

/************************************************************************************************************************************/
@media screen and (max-width: 199px) {
/** smaller images **/
header {width: 120px; height: 24px; background-size: 120px 24px;}

/** individual page adjustments **/
.input-question, .answer {font: 16px arial, verdana, garuda, sans-serif;}
}