/*for website to display OK in safari and other mobile browsers without resizing text styles*/
@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}

/*TO FORCE A VERTICAL SCROLLBAR ON ALL PAGES TO AVOID JUMPING*/
html {
	overflow-y: scroll; 
    font-size: 100%; /*-if set to 62.5%; all other sizes 1.4em=14px  and 1.6rem=16px-- */
}

/***************************
Adjust HTML font size to allow for larger text sizes required below 700 pixels ie on mobiles
***************************/
@media only screen and (min-device-width:701px) and (max-width: 1000px){html, h1, h2, h3, ol li {font-size:125%}}

@media only screen and (min-device-width:501px) and (max-width: 700px){html, h1, h2, h3, ol li {font-size:145%}}
@media only screen and (max-device-width: 500px) {html, h1, h2, h3, ol li {font-size:175%;}}

/***************************
Responsive notice
***************************/
.notice {padding-top:94px;}
.notice h4 {text-align: center; font-size:1rem; line-height:1.2rem; margin-bottom:21px; margin-top:60px;}
@media only screen and (min-device-width:701px){.notice h4 {display:none !important;} .notice-replacement {padding-bottom:90px;}} /*** set to display:none so notice message only displays on screens up to 700px ****/ 
@media only screen and (max-width: 700px){.notice-replacement {display:none !important;}} 

/*HOMEPAGE*/
.homepage-links {padding-bottom: 5px;}

/*FOR TABLE STYLING RE NEWS ITEMS*/
table.links {
	/*font-family: verdana,arial,sans-serif;*/
	/*font-size:11px;*/
	/*color:#333333;*/
	border-width: 0px;
	border-color: #550014;
	border-collapse: collapse;
	}
table.links th {   /*  top header row */
	background:#9cb283; /* url('../graphics/table-images/cell-blue.jpg');*/
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #333; /*  was #566556 border around the cells of the top header row 	*/
	}
table.links td {
	/*background:#dcddc0 url('../graphics/table-images/cell-grey.jpg');*/
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666;
	}
table.links tr {
    border-bottom: 1px solid #566556; /*  horiz line between rows */
    border: 1px solid #566556; /*  horiz line between rows */
	}
/*END OF TABLE STYLING RE NEWS ITEMS*/





body {
	background-color: #ffffff;
	/* */background-image1111:url('../graphics/bkgrnds/white-texture-new.gif'); 
	/*margin: 20px 0px 20px 0px;*/
	margin: 0px auto;
	padding: 0;
 	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
 	font-size: 15px;
 	line-height: 120%;/*was 110% until 9 march 2016*/
	}

#footer 
	{
	}

#header {
    background-color11:#fff;
    width: 985px;
    padding:10px 0 8px;
    margin: 10px auto -5px auto;  /**** was 10px auto 0 auto  before adding the padding,   -3px added to stop white line under menu *****/
}
/*****was this until changed to give header a bit more space, and to change background colour to white *******#header {
    background-color:#8a8f9d;
    width: 985px;
    margin: 10px 4px 0 auto;
} ****************/


#container {
	background-color11111111: #ffffff;  /***********commented ouit 6sep so the grey of header div goes 100% across window *****/
	margin-top:0px;
	margin-right: auto;
	margin-left: auto;
	width: 988px;	
/*  
	border-radius: 10px;	
	-moz-border-radius: 10px; 
  	-webkit-border-radius: 10px; 
	behavior: url(http://www.ibis-bindery.com/borders-round/border-radius.htc);
*/
	}

#content {
	clear: both;
	}


#content-table {
	padding: 0px 4px 0px 10px;
	}


#footer {
	font-size: 12px;	
	}

/*LINK STYLING*/

a, a:visited,
a:hover,
a:active {
	text-decoration: none;
	color1: #004795;	 /**********this colour messses up the new menu colours so commented out *******  only affect that commenting it out is that links on pages that reference the  styles-otherpages.css file are a slightly lighter shade of blue **/
	}



/*TEXT - STANDARD HTML TAG STYLING*/
p {font-family:Roboto; color: #000033; font-size: 1.1rem; line-height:1.4rem; font-weight: 400;}
h1 {font-family:Questrial; color: #000033; font-size: 2rem; line-height:2.2rem; font-weight: 400;}
h2 {font-family:Questrial; color: #000033; font-size: 1.7rem; line-height:1.9rem; font-weight: 400;}
h3 {font-family:Questrial; color: #000033; font-size: 1.5rem; line-height:1.7rem; font-weight: 400;}
h4 {font-family:Questrial; color: #000033; font-size: 1.3rem; line-height:1.5rem; font-weight: 400;}
h5 {font-family:Questrial; color: #000033; font-size: 1.2rem; line-height:1.4rem; font-weight: 400;}
h6 {font-family:Questrial; color: #000000; font-size: 1.1rem; line-height:1.3rem; font-weight: 400;}

/*TEXT - CLASSES FOR CAPTIONS AND BULLET LISTS*/

.captions{
font-size: 12px;
color: #000033;
}

.list-bullets{
font-size: 12px;
color: #000033;
}

.link-text{
font-size: 13px;
color: #000033;
}

#bullet-options li{
    list-style-image: url('http://www.ibis-bindery.com/graphics/bullet-points/star.gif');
}

.other-text-on-h1-row {font-size: 14px; font-weight: 400;}

/*SLIDESHOW STYLES*/

#slideshow {
	padding:2px 0px;
	}

/*.............................*\
NAV - now in own nav.css file
\*.............................*/



/************************************************************************************
CSS for text links for LIGHT backgrounds
*************************************************************************************/
a.link-light:link, a.link-light:visited, a.link-light:active, a.link-light:hover {
	color: #000;
    text-decoration: none;
	padding: 3px 10px 3px 10px;
    font-size:1.1rem;
	line-height: 1.3rem;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
    min-width: 300px;
	}

a.link-light:hover {
	background-color: #d3d3d3;
	}


/************************************************************************************
CSS for text links for DARK backgrounds
*************************************************************************************/
a.link-dark:link {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}
a.link-dark:visited {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}

a.link-dark:hover {
	color: #f5f5f5;
	text-decoration: none;
	background-color: #2f9abf;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}
a.link-dark:active {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}

/************************************************************************************
CSS for images with captions inserted within text - div.figure-right used on Introduction page, in John's quote section
*************************************************************************************/

div.figure-right{
  clear: left; /* if have two adjacent images - and want image to start below, rather than to the side of previous image */
  float: right; /* for image to RIGHT of text*/
  padding: 2px; /* the padding between the photo and border, 1px or 2px looks good */
  /* background:  #333; if required, colour of background of the whole photo/caption block */  
  margin-right: 16px; /* use to bring in from right-hand margin a bit - looks better that way */
  margin-left: 25px; /* margin on left of photo/caption block */
  margin-top: 5px; /* brings the photo block down just slightly so on line with text to right */
  margin-bottom: 5px; /* may not be required - just adds a bit more space below the caption */
  color: #2B000A; /* caption text colour */
  font-size: 85%;  /* caption text size */
  text-align: center; /*centers the caption */       
  /* for larger margin under photo/caption block for particular photo add "height:600px;" in "div style" string in html*/
  }

div.figure-left{
  border11: 2px solid #000; /* use for tests only */
  clear1111: right; /* enable if have two two adjacent images and want 2nds image to start below, rather than to the side of previous image */
  float: left; /* for image to LEFT of text*/
  padding11: 2px; /* the padding between the photo and border, 1px or 2px looks good */
  /* background:  #333; if required, colour of background of the whole photo/caption block */   
  margin-right: 25px; /* margin on right between photo block and the text */
  margin-top: 5px; /* brings the photo block down just slightly so on line with text to right */
  margin-bottom: 5px; /* may not be required - just adds a bit more space below the caption */
  color: #2B000A; /* caption text colour */
  font-size: 85%;  /* caption text size */
  text-align: center; /*centers the caption */     
  /* for larger margin under photo/caption block for particular photo add "height:600px;" in "div style" string in html*/  
}

/************************************************************************************
Quotation marks - re positioning of the closing quotation mark image, as used in Customer Feedback section
*************************************************************************************/
.quote-open {margin-bottom: -33px;}
.closing-quote {margin-top: -35px;}

/************************************************************************************
Styling of the header (with download links) in the 'Smart-binder' webpage section of the site
*************************************************************************************/
.sb-spacer {padding-left: 318px;}
.sb-spacer-new {padding-left: 84px;}
.sb h1 {padding-top: 12px;}
.download {font-size: 14px;}

/************************************************************************************
Image captions used in images - so can use actual text
*************************************************************************************/
.img1, .img2, .img3, .img4, .img5, .img6 {margin: 0 auto; background-position: top; background-repeat: no-repeat;}
.c-img1-01, .c-img1-02, .c-img1-03, .c-img1-04, .c-img1-05, .c-img1-06, .c-img1-07, .c-img1-08, .c-img1-09, .c-img1-10,
.c-img2-01, .c-img2-02, .c-img2-03, .c-img2-04, .c-img2-05, .c-img2-06, .c-img2-07, .c-img2-08, .c-img2-09, .c-img2-10,
.c-img3-01, .c-img3-02, .c-img3-03, .c-img3-04, .c-img3-05, .c-img3-06, .c-img3-07, .c-img3-08, .c-img3-09, .c-img3-10,
.c-img4-01, .c-img4-02, .c-img4-03, .c-img4-04, .c-img4-05, .c-img4-06, .c-img4-07, .c-img4-08, .c-img4-09, .c-img4-10,
.c-img5-01, .c-img5-02, .c-img5-03, .c-img5-04, .c-img5-05, .c-img5-06, .c-img5-07, .c-img5-08, .c-img5-09, .c-img5-10,
.c-img6-01, .c-img6-02, .c-img6-03, .c-img6-04, .c-img6-05, .c-img6-06, .c-img6-07, .c-img6-08, .c-img6-09, .c-img6-10
{color: #000; position:absolute; font-style:italic; font-weight: 600; font-size: 13px;  line-height: 14px; text-align: left;}

.c-img1-01-c, .c-img1-02-c, .c-img1-03-c, .c-img1-04-c, .c-img1-05-c, .c-img1-06-c, .c-img1-07-c, .c-img1-08-c, .c-img1-09-c, .c-img1-10-c,
.c-img2-01-c, .c-img2-02-c, .c-img2-03-c, .c-img2-04-c, .c-img2-05-c, .c-img2-06-c, .c-img2-07-c, .c-img2-08-c, .c-img2-09-c, .c-img2-10-c,
.c-img3-01-c, .c-img3-02-c, .c-img3-03-c, .c-img3-04-c, .c-img3-05-c, .c-img3-06-c, .c-img3-07-c, .c-img3-08-c, .c-img3-09-c, .c-img3-10-c,
.c-img4-01-c, .c-img4-02-c, .c-img4-03-c, .c-img4-04-c, .c-img4-05-c, .c-img4-06-c, .c-img4-07-c, .c-img4-08-c, .c-img4-09-c, .c-img4-10-c,
.c-img5-01-c, .c-img5-02-c, .c-img5-03-c, .c-img5-04-c, .c-img5-05-c, .c-img5-06-c, .c-img5-07-c, .c-img5-08-c, .c-img5-09-c, .c-img5-10-c,
.c-img6-01-c, .c-img6-02-c, .c-img6-03-c, .c-img6-04-c, .c-img6-05-c, .c-img6-06-c, .c-img6-07-c, .c-img6-08-c, .c-img6-09-c, .c-img6-10-c
{color: #000; position:absolute; font-style:italic; font-weight: 600; font-size: 13px;  line-height: 14px; text-align: center;}
.main-caption {font-size: 15px; line-height:16px; font-weight: 600; text-align: center;}  

.header-logo{width:982px; height:105px;}
.vert-spacer-10px {padding-top:10px;}
.vert-spacer-20px {padding-top:20px;}
.vert-spacer-30px {padding-top:30px;} 

/**********************************************************
10px space below menu container, adding this means that menu height is not cut short when viewing on iphones 
**********************************************************/    
.menu-outer-container {margin-bottom:10px;}



/*****************************************************
NEW FOOTER BOTTOM OF PAGE WITH LOTS OF LINKS
*******************************************************/
      .dark-blue-bkgrnd {background:#1073b7;} /**** was #46566d ****/
        
.bkgrnd-footer-dark-blue {background:#003066; border1111:1px solid red;  margin: 0 auto; padding:17px 0;}
.bkgrnd-footer-dark-blue p {color:#cccccc;}

/***** Strapline, just above the dark-blue bkgrnd footer content ******/
.footer-strap-line {margin: 35px auto 0; text-align:center;} 
.footer-strap-line h3 {font-family:Questrial; color:#172e72; font-size:2rem; line-height:2.2rem; text-align: center;}
@media only screen and (max-width: 600px) {.footer-strap-line h3 {font-size: 1.8rem; line-height:2rem;}}

/***Footer content - within dark-blue bkgrnd******/
.footer-subheaders p {font-size:15px; color:#e8e8e8; text-align: left;} /*** colour wqs #e0b76d subheader texts within footer***/
.ibis-address p {color:#ccc; font-size:13px;}
.webaddress p {font-size:18px; color:#e0b76d;}
        .bestgraphics {font-size:13px;}
.phone-number {color:#ccc;}
.tel-mob-email p {font-size:16px; color:#fff;}
.tel-mob-email-inner {font-size:14px; color:#ccc; }
.tel-mob-email img {max-width:20px;}
.othertext {font-size:14px; color:#ccc;}


/******************************************************************
Links in Footer (the reduced height footer used on every page except homepage)
*****************************************************************/
a.link-footer-dark-blue-bg:link, a.link-footer-dark-blue-bg:visited, a.link-footer-dark-blue-bg:active {
	
    text-align:center;
    color:#ccc; /*--was #333 ---*/
    font-size:13px;
    line-height:18px;
    text-align1:left;
    background1:#6f6f6f;
    padding:5px 10px;
    margin: 0 auto;
    left:0;
    right:0;
    text-decoration: none;
    border:1px solid #ada6a6;
    border-radius:5px;
    margin:4px 0;
	}
a.link-footer-dark-blue-bg:hover {color: #ccc;	background-color: #181f3c;}
        
/*******************************************
Lower footer banner, darker blue, for with copyright notice
*********************************************/
.bkgrnd-footer-darker-blue {background:#4e65b0; height:25px; padding:5px 0 0px;} /*** was #323a52 ****/
.footer-lower-strap-line {margin-top:-10px;}
.footer-lower-strap-line p {font-family: Maven Pro; font-size:14px; line-height:3px; text-align:center; color:#e8e6e6; padding-top:5px;}       


/**************************************
footer new - 18 oct 2023
***************************************/
.footer-new {height:66px; width:100%; background-color:#46566d; }
.footer-new-lower {height:33px; width:100%; background-color:#081438; margin-top:-18px;}
.footer-new-lower p {padding-top:13px; padding-bottom:3px;}
.footer-subheaders p {font-size:18px; color:#fdc735;}
.bestgraphics {font-size:15px;}
/**************************************
more css so webpages on larger screens have appropriately sized hi and h2 texts 
*********************************** 
h1 {margin-left: -6px;}
#content h1 {font-size:1.6rem; line-height:1.8rem;}
#content h2 {font-size:1.4rem; line-height:1.4rem;}
ol li {font-size:1.2rem; line-height:1.2rem;} ******/ /****above four lines commented out on 18feb 2024 *****/