@import url("reset.css");
@import url("support.css");
@import url("forms.css");

html{ height: 100%; }
body{
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #0C0C0C;
  font-family: arial;
  font-size: 14px;
}
p{ line-height: 20px; overflow: hidden; text-align: justify; }
p#notfoundmessage{
  padding: 100px;
  background-image: url(../images/common/404.jpg);
  background-repeat: no-repeat;
  text-align: center;
}

#parent{  
  display: block;
  width: 100%;
  margin: 0 auto;
}
  #parent > div{ display: block; margin: 0 auto; }
  
#headercntr{ height: 50px; background-color: #242424; }
  #headercntr #header{ display: block; width: 1000px; margin: 0 auto; overflow: hidden; }
    #headercntr #header #logo{ float: left; padding: 8px 0 0; color: #FFFFFF; font-size: 30px; text-decoration: none; }

#mainnav{ float: right; }
  #mainnav li{  
    position: relative;
    float: left;
    margin: 0 1px;
  }
    #mainnav li a{ display: block; padding: 12px 25px 0; color: #EFE6CE; font-size: 18px; text-decoration: none; }
      #mainnav li a:hover{ color: #FFFFFF; }
      #mainnav li.selected a,#mainnav li a.selected{ color: #FFFFFF; }
      #mainnav li.flag{ /*display: none; visibility: hidden;*/ float: right; padding: 3px 0 0; }
        #mainnav li.flag a{ float: right; }
          #mainnav li.flag a:hover{  }
#mainnav li.flag a img{ display: block; width: 20px; }
      
      #mainnav li ul.child{  
        position: absolute;
        left: 0;
        top: 10px;
      }
        #mainnav li ul.child li{  }
          #mainnav li ul.child li a{  }
            #mainnav li ul.child li a:hover{  }
            #mainnav li ul.child li a.selected{ font-weight: bold; }
        
#focus{ position: relative; width: 100%; height: 565px; overflow: hidden; }
  #focus ul{ width: 100%; height: 565px; overflow: hidden; }
    #focus ul li{ width: 100%; height: 565px; overflow: hidden; }
      #focus ul li img{ display: block; width: 100%; }
  #focus h1{
    position: absolute;
    bottom: 0;
    z-index: 100;
    display: block;
    width: 100%;
    padding: 10px 0;
    background-image: url(../images/common/h1-bg.png);
    color: #FFFFFF;
    font-size: 30px;
    font-weight: normal;
  }
    #focus h1 span{ display: block; width: 1000px; margin: 0 auto; }
  #focus.short{ height: 283px; }
    #focus.short ul{ height: 283px; }
      #focus ul.short li{ height: 283px; }
    
/*#productsmenu{ margin: 1px 0 0; overflow: hidden; }
  #productsmenu li{ float: left; width: 16.6%; outline: solid 1px #FFFFFF; }*/
#productsmenu{ margin: 1px 0 0; overflow: hidden; text-align: center; }
  #productsmenu li{ display: inline-block; width: 16%; outline: solid 1px #FFFFFF; }
    #productsmenu li:last-child{ outline-right: solid 1px #FFFFFF; }
    #productsmenu li a{ display: block; padding: 10px 0; color: #FFFFFF; font-size: 24px; text-align: center; text-decoration: none; }
      #productsmenu li.red a,#productsmenu li.colour1 a{ background-color: #ED8787; }
      #productsmenu li.blue a, #productsmenu li.colour2 a{ background-color: #87C5ED; }
      #productsmenu li.mustard a, #productsmenu li.colour3 a{ background-color: #D4D063; }
      #productsmenu li.purple a, #productsmenu li.colour4 a{ background-color: #CD87ED; }
      #productsmenu li.yellow a, #productsmenu li.colour5 a{ background-color: #6cbf78; }
      #productsmenu li.lilac a, #productsmenu li.colour6 a{ background-color: #FDAEAE; }
      #productsmenu li a:hover{ background-color: #242424; }

#maincontent{ display: block; width: 1000px; margin: 30px auto !important; overflow: hidden; }

ul#productslist{ display: block; margin: 0 0 30px; overflow: hidden; }
  ul#productslist li{ float: left; width: 20%; margin: 10px; }
    ul#productslist li a{ display: block; width: 150px; background-color: #242424; color: #FFFFFF; text-decoration: none; }
      ul#productslist li a:hover{  }
      ul#productslist li a span{ display: block; width: 150px; }
        ul#productslist li a span.image{ height: 100px; overflow: hidden; }
          ul#productslist li a span.image img{ display: block; width: 100%;  }
        /*ul#productslist li a span.title{ height: 24px; padding: 5px 0; font-size: 11px; line-height: 14px; text-align: center; overflow: hidden; }*/
        ul#productslist li a span.title{ height: 65px; padding: 5px; font-size: 11px; line-height: 14px; text-align: center; overflow: hidden; }

p span.image{ float: left; width: 600px; min-height: 400px; margin: 0 30px 10px 0; /*overflow: hidden;*/ }
  p span.image img{ display: block; width: 100%; }
p span.title{ float: left; width: 350px; margin: 0 0 20px; font-size: 18px; line-height: 30px;  }
p span.description{ float: left; width: 350px; font-size: 14px; line-height: 20px; text-align: justify;  }
        
p.contactbar{ clear: both; float: none; display: block; margin: 100px 0 50px; font-size: 18px; text-align: center; }
  p.contactbar strong{ color: #8EBB2E; font-size: 30px; }
    p.contactbar strong a{ color: #8EBB2E; font-size: 30px; text-decoration: none; }
      p.contactbar strong a:hover{ color: #0C0C0C; }
  p.contactbar img.icon{ vertical-align: -12px; }
  p.contactbar span.separator{ padding: 0 30px; }

#footercntr{
  display: block;
  width: 100% !important;
  margin: 30px auto 0 !important;
  background-color: #242424;
}
  #footercntr.fixed{  }
  #footer{ display: block; width: 1000px; margin: 0 auto; padding: 5px; overflow: hidden; }
    #footer p{ padding: 0px 10px; font-size: 10px; color: #FFFFFF; }
      #footer p.copyright{ float: right; padding: 2px 0 0; }
      #footer p.credit{ float: right; }
      #footer p a{ color: #FFFFFF; }
        #footer p a:hover{  }
        #footer p a img{ vertical-align: -6px; }
        
a.zoomimglink{ position: relative; float: left; margin: 5px 5px 20px 0; }
  a.zoomimglink+a.zoomimglink:last-child{ margin: 5px 0 20px; }
  #lcol>p>span>a.zoomimglink{ margin: 10px 10px 20px 0 !important; }
  a.zoomimglink img.thumb{ position: relative; left: 0; top: 0; z-index: 1; }
  a.zoomimglink img.zoomicon{ position: absolute; right: 0; top: 0; z-index: 10; }
#zoompane{  
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999999;
  width: 540px;
  /*height: 378px;*/
  margin: -120px 0 0 -145px;
  padding: 20px;
  background-color: #EEEEEE;
  background-image: url(../images/common/closezoom.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  cursor: pointer;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px #000000;
}
  #zoompane.hidden{ display: none; visibility: hidden; }
  #zoompane img{ display: block; width: 100%; padding: 0 0 30px; }