/* reset, typog., colors ==============================*/
* { margin: 0; padding: 0; }
body { background: #f4f3eb; font: normal 12px "Verdana", sans-serif; margin: 0px; padding: 0px; }
input, button, textarea, select {  font: normal 12px/12px "Verdana", sans-serif; color:#373737; vertical-align: middle; }
legend { display: none; }
fieldset { border: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { display: none; }
img { padding: 0px; margin: 0px; border: none; }
a:link { text-decoration: none; color : #319bd8; border: 0px; }
a:active { text-decoration: underline; color : #319bd8; border: 0px; }
a:visited { text-decoration: none; color : #319bd8; border: 0px; }
a:hover	{ text-decoration: underline; color : #669900; border: 0px; } 
a:focus { outline: none;}
h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif, "Arial Black" ; padding:5px 0; }

/* specific ==============================*/
body { margin:10px; padding:10px; }
.ir-examples { position:relative; margin:20px 0px 20px 0px; padding:15px; }
h2 { /* height:60px; width:600px; */ }


/* JIR starts here 444444444444444444444444
   class first, general settings
   then specific settings based on dimensions
   of image used, no bg image here
*/

h2.jir { 
 margin-top: 15px; /* for this particular site, set this as you like */
 position: relative; /* allows child element to be placed positioned wrt this one */
 overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */
 padding: 0; /* needed to counter the reset/default styles */
 /* border:1px red dotted; /* use this for testing */
}
h2.jir a { 
 position: absolute; /* defaults to top:0, left:0 and so these can be left out */
 /* height: 0; /* hiding text, prevent it peaking out */
 width: 100%; /* 686px; fill the parent element */
 /* border:1px green dotted; /* use this for testing */
}

h2#jir {
 height: 60px; width:632px; /* dimensions of replacement image */ 
}
h2#jir a {
 height: 60px; width: 632px; 
/* padding-top: 0px; /* height of the replacement image */
/* background:#C00; /* use this for testing */ 
}
h2#jir a::before { 
 content: url("images/replacement/jir.png");
}

/* end JIR here ------------------------ */


/* LLJ3 starts here 333333333333333333333333
   class first, general settings
   then specific settings based on dimensions
   of image used, no bg image here
*/

h2.llj3 { 
 margin-top: 15px; /* for this particular site, set this as you like */
 position: relative; /* allows child element to be placed positioned wrt this one */
 overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */
 padding: 0; /* needed to counter the reset/default styles */
 /* border:1px red dotted; /* use this for testing */
}
h2.llj3 a { 
 position: absolute; /* defaults to top:0, left:0 and so these can be left out */
 /* height: 0; /* hiding text, prevent it peaking out */
 width: 100%; /* 686px; fill the parent element */
 /* border:1px green dotted; /* use this for testing */
}

h2#llj3 { height:60px; width:686px; }
h2#llj3 img { 
 height: 60px; width:686px; /* height of replacement image */ 
}
h2#llj3 a { 
 padding-top: 0px; /* height of the replacement image */
 /* background:#C00; /* use this for testing */ 
}
/* end LLJ3 here ------------------------ */

/* LLJ2 starts here 222222222222222222222222
   class first, general settings
   then specific settings based on dimensions
   of image used, no bg image here
*/

h2.llj2 { 
 margin-top: 15px; /* for this particular site, set this as you like */
 position: relative; /* allows child element to be placed positioned wrt this one */
 overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */
 padding: 0; /* needed to counter the reset/default styles */
 /* border:1px red dotted; /* use this for testing */
}
h2.llj2 a { 
 position: absolute; /* defaults to top:0, left:0 and so these can be left out */
 /*height: 0; /* hiding text, prevent it peaking out */
 width: 100%; /* 686px; fill the parent element */
 /* border:1px green dotted; /* use this for testing */
}

h2#llj2 { height:60px; width:686px; }
h2#llj2 img { 
 height: 60px; width:686px; /* height of replacement image */ 
}
h2#llj2 a { 
 padding-top: 0px; /* height of the replacement image */
}
/* end LLJ2 here ------------------------ */



/* LLJ starts here +++++++++++++++++++++++
   class first, general settings
   then specific settings based on dimensions
   of image used
*/

h2.llj { 
 margin-top: 15px; /* for this particular site, set this as you like */
 position: relative; /* allows child element to be placed positioned wrt this one */
 overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */
 padding: 0; /* needed to counter the reset/default styles */
 /* border:1px red dotted; /* use this for testing */
}
h2.llj a { 
 position: absolute; /* defaults to top:0, left:0 and so these can be left out */
 height: 0; /* hiding text, prevent it peaking out */
 width: 100%; /* 686px; fill the parent element */
 background-position: left top; 
 background-repeat: no-repeat;
 /* border:1px green dotted; /* use this for testing */
}

h2#llj { 
 height: 60px; /* height of replacement image */ 
}
h2#llj a { 
 padding-top: 60px; /* height of the replacement image */
 background-image: url("images/replacement/llj.png"); /* the replacement image */
}
/* end LLJ here ------------------------- */


h2#lls {
padding-top: 60px; /* height of the replacement image */
height: 0px;
overflow: hidden;
background: url("images/replacement/lls.png") no-repeat left bottom;
}

h2#tip {position:relative}
h2#tip a {
z-index:1;
position:absolute;
top:0;
left:0;
width:600px;
height:2.7em;
min-height:60px;
background:transparent url("images/replacement/tip.png") no-repeat left bottom;
/* border:1px dotted red; */
font-size:1em
}


h2#glp {
margin:0; padding:0;
position:relative;
width:600px; height:60px;
overflow:hidden;
/* opacity:0; /* try opacity 0 to hide text behind transparent png, test it for browsers you're bothered about! */
}
h2#glp a {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:600px; height:60px;
margin:0; padding:0;
background:url("images/replacement/glp.png") bottom left no-repeat;
}

h2.mrp {
text-indent:-9000px;
background:url("images/replacement/mrp.png") bottom left no-repeat;
height:60px;
}

h2#pos { height:60px; }
h2#pos img {
position:absolute;
}

h2#fir {
height:60px;
text-indent:-9000px;
background:url("images/replacement/fir.png") bottom left no-repeat;
}

/* testing ============================== */
h2 a { opacity: 1; }
h2 span { opacity: 1; }
h2 * { opacity: 1; }

/* img { display: none; } /* use to put images off */