/* europa css (c) Europa Pet Foods, 2004-2010 */

/* html and body set the overall standards for the web page */
html, body { 
  padding:0px;
  margin:0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#000099;
  text-align: left;
  word-wrap: break-word;   /* IE */
  scrollbar-base-color:#66ccff;
  scrollbar-arrow-color:white;
  scrollbar-track-color:#ccccff;
  scrollbar-shadow-color:#000099;
  scrollbar-lightshadow-color:#000099;
  scrollbar-darkshadow-color:blue;
  scrollbar-highlight-color:white;
  scrollbar-3dlight-color:#000099;
}

body {
  font-size: 0.8em;
}

/* The europa page is divided vertically into three areas - top, main and bot */
/* Top is a fixed height to hold the page header */
#top {
  height: 148px;
  border: 4px ridge #66ccff;
  background-color: #66ccff; 
  overflow: hidden;
}

#topborderleft {
  position: absolute;
  top: 0px;
  left: 0px;
  width 50%;
  z-index: 10;
  height: 148px;
  border-top: 4px ridge #66ccff;
  border-bottom: 4px ridge #66ccff;
  border-left: 4px ridge #66ccff;
}

#topborderright {
  position: absolute;
  top: 0px;
  right: 0px;
  width 50%;
  z-index: 10;
  height: 148px;
  border-top: 4px ridge #66ccff;
  border-bottom: 4px ridge #66ccff;
  border-right: 4px ridge #66ccff;
}

/* Adjust for IE5 and unadjust for strict IE6 */
* html #top {
height: 156px;
he\ight: 148px;
}
* html #topborderleft {
height: 156px;
he\ight: 148px;
}
* html #topborderright {
height: 156px;
he\ight: 148px;
}

/* top has three subareas */
/* top left holds the europa picture logo */
#topleft {
position: absolute;
top: 4px;
padding-top: 12px;
left: 4px;
z-index: 2;
width: 240px;
height: 136px;
text-align: right;
background-color: #66ccff;
}

/* topright1 holds the europa text logo */
#topright1 {
position: absolute;
top: 1px;
left: 250px;
height: 87px;
width: 300px;
z-index: 1;
text-align: left;
overflow: hidden;
}

/* topright2 holds the europa banners */
#topright2 {
position: absolute;
top: 88px;
right: 9px;
width: 466px;
height: 55px;
z-index: 1;
text-align: right;
}

/* top printlogo prints the europa logo */
#toplogoprint {
position: absolute;
top: 0px;
left: 0px;
width: 197px;
z-index: -1;
height: 193px;
}

/* mid is the main area of the page and has two wrappers to provide the vertical bars - outer and inner */
#midouter {
background-color: white;
background-image: url(images/leftborder174.gif);
background-position: left top;
background-repeat: repeat-y;
}
#midinner {
background-color: none;
background-image: url(images/rightborder174.gif);
background-position: right top;
background-repeat: repeat-y;
}

/* Fix IE bug with column dividers */
/* Hides from IE-mac \*/
* html #midouter {height: 1%;}
* html #midinner {height: 1%;}
/* End hide from IE-mac */

/* midleft holds the europa dogs pictures and the navigation menus */
#midleft {
float: left; 
width: 160px; 
padding: 5px;
background-image: url(images/leftborder174.gif);
background-position: left top;
background-repeat: repeat-y;
text-align: center;
font-size:14pt;
/* font-variant: small-caps; */
font-weight:bolder; 
vertical-align: top;
}

/* midright holds the accreditation logos and links */
#midright {
float: right; 
width: 160px; 
padding: 5px;
text-align: center;
background-image: url(images/rightborder174.gif);
background-position: right top;
background-repeat: repeat-y;
}

/* Adjust for IE5 and unadjust for strict IE6 */
* html #midleft {
width: 170px;
w\idth: 160px;
}

* html #midright {
width: 170px;
w\idth: 160px;
}

#midcentre {
margin-left: 174px; 
margin-right: 174px; 
padding-bottom: 10px; 
}

#midnoright {
margin-left: 174px; 
}

/* IE/win fix for peekaboo bug \*/
* html #midleft {height: 1%;}
* html #midcentre {height: 1%;}
* html #midnoright {height: 1%;}
/* End of IE/win fix for peekaboo bug */

/* midforum holds the forum link */
#midforum {
  border-bottom: 4px ridge #66ccff;
  text-align: center;
  font-size:13pt;
  font-weight:bolder; 
  margin-bottom: 10px; 
  padding-bottom: 10px; 
  line-height: 100%;
}

#midquality {
  border-top: 4px ridge #66ccff;
  text-align: center;
  font-size:13pt;
  margin-top: 48px; 
  padding-top: 10px; 
  text-align: justify; 
  line-height: 120%;
  font-size: 9px;
}

* html #midquality {
margin-top: 10px;
}

#midamazon {
  border-top: 4px ridge #66ccff;
  text-align: center;
  font-size:13pt;
  margin-top: 5px; 
  padding-top: 10px; 
  text-align: justify; 
  line-height: 120%;
  font-size: 9px;
}

/* midtitle holds the title for the page */
#midtitle {
height: 50px;
text-align: center;
background-image: url('images/multisep.gif');
background-repeat: no-repeat;
background-position: center; 
padding: 15px 5px 5px 5px; 
font-size:22pt;
font-weight:bolder;
font-family:FritzQuad, "Times New Roman", serif;
text-transform: uppercase;
vertical-align: top;
text-indent: 20px;
}

* html #midtitle {
height: 70px;
he\ight: 50px;
}

/* midmain holds the main text for a page */
/* midtop and midbot hold full width text for a two column layout */
#midmain, #midtop, #midbot {
padding: 0px 10px 0px 15px;
text-align: left;
}
/* IE/win fix for peekaboo bug \*/
* html #midmain {height: 1%;}
/* End hide from IE-mac */

/* midcol1 and 2 are the left and right columns respectively of a two column page */

#midcol1wrap {
float: left;
width: 49.9%;
}

#midcol2wrap {
float: right;
width: 49.9%;
}

#midcol1 {
padding: 0px 5px 0px 15px;
text-align: justify;
}

#midcol2 {
padding: 0px 15px 0px 15px;
text-align: justify;
}

* html #midcol2 {
padding: 0px 10px 0px 15px;
}

/* bot is the full width area at the bottom of the page */
#bot {
float: none;
clear: both;
text-align: center;
border: 4px ridge #66ccff;
background-color: #66ccff;
}

/* Following classes provide easy alignment for text */
.left {
text-align: left
}

.center {
text-align: center
}

.right {
text-align: right
}

.imageleft {
float: left;
position: relative;
padding: 5px 10px 5px 0px;
}

.imageright {
float: right;
position: relative;
padding: 5px 0px 5px 10px;
text-align: right;
}

.textbreak {
background-image: url('images/multithin.gif');
background-repeat: no-repeat;
background-position: center; 
clear: none;
padding: 10px 0px 5px 0px;
}

.clearboth {
clear: none;
}

/* Mod for IE clear bug */
* html .textbreak {
padding: 5px 0px 5px 0px;
clear:both;
}
* html .clearboth {
clear:both;
}

.forumtext {
font-size: 10pt; 
font-weight: bold; 
line-height: 100%;
padding: 0px 5px 0px 5px;
margin: 0px;
}

/* Define paragraph style for main contents text */
p, ul, tip {
letter-spacing: normal;
word-wrap: break-word;
line-height: 140%;
}

p {
margin: 10px 0px 10px 0px;
text-indent: 10px;
}

ul {
list-style-image: url('images/butico.gif');
margin-left: 5px; 
padding-left: 55px;
vertical-align: top;
text-indent: 0px
}

li {
margin: 10px 0px 10px 0px;
}

ul.font-family {
list-style-position: outside
}

/* IE/Win rendering bug - comment end escaped for IE/Mac \*/
* html ul {
margin-left: 55px; 
padding-left: 0px;
}
/* End of IE/Win rendering fix */

h1 {
font-size:2.25em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant:small-caps;
/* text-decoration: underline; */
text-transform: capitalize;
vertical-align: bottom;
text-align: center;
color:red;
}

h2 {
font-size: 1.75em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant:small-caps;
letter-spacing:normal;
/* text-decoration: underline; */
text-transform: capitalize;
text-align: left;
}

h3 {
font-size: 1.5em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing:normal;
text-align: left;
}

h4 {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing:normal;
text-align: left;
}

pre {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing:normal;
text-align: left;
margin: 10px 40px 10px 40px;
}

strong {
font-size:1.5em;
}

a {
  color: #9400D3;
  display: inline;
}

a.tip {
  text-decoration: none; 
  cursor : help;
}

.sidebar {
  float: right;
  width: 33%;
  background-color: #ffffcc;
  margin: 0px 0px 5px 5px;
  border: 2px solid;
  border-color: #66ccff #000080 #000080 #66ccff;
  padding: 0px 10px 0px 10px;
}

.email {
  background-color: #ffffcc;
  border: 2px solid;
  border-color: #66ccff #000080 #000080 #66ccff;
  padding: 0px 10px 0px 10px;
  margin: 5px 0px 5px 0px;
}

div.email p, div.sidebar p {
  text-indent: 0;
}

.hintsClass {
  text-align: center; 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #FFFFCC;
  white-space: -moz-pre-wrap;  /* Mozilla, supported since 1999 */
  white-space: -pre-wrap; /* Opera 4 - 6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: pre-wrap;   /* CSS3 - Text module */
  word-wrap: break-word; /* IE */
  border: 1px solid;
  border-color: #66ccff #000080 #000080 #66ccff;
}


/* CSS for printing */
.printonly {display: none;}
@media print {
.noprint {display: none;}
.printonly {display: block;}
a {font-weight: bold}
/*
#midouter a:link:after, #midouter a:visited:after {
   content: "(http://www.europa-pet-food.co.uk/" attr(href) ")";
   font-size: 90%;
   }
#midouter a[href^="http://"]:after {
   content: "(" attr(href) ")";
   font-size: 90%;
   }
#midouter a[href^="/"]:after {
   content: "(http://www.europa-pet-food.co.uk" attr(href) ")";
   font-size: 90%;
   }
*/
#midcentre, #midnoright { margin-left: 0px; margin-right: 0px; }
#midouter, #midinner { background-image: none; }
html, body {font-family:"Times New Roman", serif; }
body {font-size: 1.0em; color:black;}
#top {height: 0px; border: none;  background-color: transparent; margin-bottom: 52px; }
#bot {margin-top: 1cm; }