﻿/************************************ BASE HTML STYLES **************************************************/


  /** fonts **/

  body {
    font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
    /*background: #FFFFFF url('/images/back.jpg') repeat;*/
    
    /*background: #FFFFFF url('/tmp/115b.gif') repeat;*/
  }


  #page {
    font-size: 12px; /* 16px x .75 = 12px */
    line-height: 1.5em; /* 12px x 1.5 = 18px */
  }


  body, caption, th, td, input, textarea, select, option, legend, fieldset {
    font-family:Arial,Helvetica,sans-serif;
    color:#333333;
  }

  pre, code {
    font-size: 1.1em; /* Monospace fonts can be hard to read */
    font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
  }
  
  .clearfix {
    clear:both;
  }
  

  /** headings **/
  h1 , h2 , h3, h4, h5 {
    font-family: Arial,Helvetica,sans-serif;   
    line-height : 1.5em;    
  }
  
  h2, h4 {
    color:#675C53; 
  }

  h1 {
      
   color: #004990;
   font-size:22px;       
    margin-top: 0;
    margin-bottom: 0.1em; /* 0.5em is equavalent to 1em in the page's base font.
                             Remember, a margin specified in ems is relative to
                             the element's font-size, not to the pages' base
                             font size. So, for example, if we want a 1em margin
                             (relative to the base font), we have to divide that
                             length by the element's font-size:
                             1em / 2em = 0.5em */
  }
  

  h2 {
    font-size: 1.5em;
    margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
    margin-bottom: 0.667em;
    color:#675C53;
  }

  h3 {
    font-size: 1.2em;
    margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
    margin-bottom: 0.769em;
  }

  h4, h5, h6 {
    font-size: 1.1em;
    margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
    margin-bottom: 0.909em;
    font-weight:normal;
  }


/** block-level elements **/
  p, ul, ol, dl, pre, table, fieldset, blockquote {
    margin: 1em 0;
  }

/** lists **/
  /* standardize list item indentation */
  ul, ol {
    margin-left: 0;
    padding-left: 2em;
  }

  .block ul, /* Drupal overrides */
  .item-list ul {
  }

  ul ul, ul ol,
  ol ol, ol ul,
  .block ul ul, .block ul ol,
  .block ol ol, .block ol ul,
  .item-list ul ul, .item-list ul ol,
  .item-list ol ol, .item-list ol ul
  {
    margin: 0;
  }

  li {
    margin: 0;
    padding: 0;
  }

  .item-list ul li /* Drupal override */ {
    margin: 0;
    padding: 0;
    list-style: inherit;
  }

  ul.menu li, /* Drupal override */
  li.expanded,
  li.collapsed,
  li.leaf {
    margin: 0;
    padding: 0;
  }

  ul          { list-style-type: disc; }
  ul ul       { list-style-type: circle; }
  ul ul ul    { list-style-type: square; }
  ul ul ul ul { list-style-type: circle; }
  ol          { list-style-type: decimal; }
  ol ol       { list-style-type: lower-alpha; }
  ol ol ol    { list-style-type: decimal; }

  dt {
    margin: 0;
    padding: 0;
  }

  dd {
    margin: 0 0 0 2em;
    padding: 0;
  }

  /** links **/
  
  /* We wont be using underlined links on this site so lets get rid of them here */
  a:link,
  a:visited,
  a:hover,
  a:focus,
  a:active {
    text-decoration: none;
  }
   
  a:link {
}

  a:visited{
  }

  a:hover,
  a:focus{
  }

  a:active{
  }

  /** tables **/
  
  /* Override Drupal default CSS */
  table {
    border-collapse: collapse;
    /* width: 100%; */ /* Prevent cramped-looking tables */
  }

  th,
  thead th,
  tbody th {
    text-align: left;
    padding-right: 0;
    border-bottom: none;
  }

  tbody {
    border-top: none;
  }

  /** abbreviations **/
  abbr {
    border-bottom: 1px dotted #666;
    cursor: help;
    white-space: nowrap;
  }

  /* Date-based "abbreviations" show computer-friendly timestamps which are not
     human-friendly. */
  abbr.created {
    border: none;
    cursor: auto;
    white-space: normal;
  }

  /** images **/
  img {
    border: 0;
  }

  /** horizontal rules **/
  hr {
    height: 1px;
    border: 1px solid #666;
  }

  /** forms **/
  form {
    margin: 0;
    padding: 0;
  }

  fieldset {
    margin: 1em 0;
    padding: 0.5em;
  }


/************************************* LAYOUT/ PAGE STRUCTURE/ SKELETON ***************************************************/

/*
 * LAYOUT STYLES for the page regions and major divs that form the overall skeleton of the page
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/** body **/
  body {
    background-color:#FFFFFF;
  }
  

  #page,
  #closure-blocks
  {
    /*
     * If you want to make the page a fixed width and centered in the viewport,
     * this is the standards-compliant way to do that. See also the ie.css file
     * for the necessary IE5 hack to center a div.
     */
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    max-width: 100%;
  }

  #page-inner {
    background-color:white;
    padding: 0 0px;   
  }
  
  #page-inner, #page-inner.front {
    border: 1px solid #CDCDCD;
  }

  #navigation-top,
  #navigation {
    position: absolute; /* Take the named anchors out of the doc flow    */
    left: -1000%;     /* and prevent any anchor styles from appearing. */
  }

  #skip-to-nav {
    float: right;
    margin: 0 !important;
    font-size: 0.8em;
  }

  #skip-to-nav a:link, #skip-to-nav a:visited {
    color: #fff; /* Same as background color of page */
  }

  #skip-to-nav a:hover {
    color: #000;
    text-decoration: none;
  }

  /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
     to the link. Un-comment the following CSS to use this technique. */
  
  #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited {
    position: absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #skip-to-nav a:active, #skip-to-nav a:focus {
    position: static;
    width: auto;
    height: auto;
  }
  
  #logo {
    float: left;
    margin-top : 1em;    
  }
  
  #search-box {              
    margin-right: 1em;
    float:right;
    clear:right;
  }
  
  #search-box .form-submit { 
    border-style: none;
	border-color: inherit;
	border-width: medium;
	height:24px;     
    	width:24px;
    	vertical-align:middle;   
    background-image:url('/images/search.png');    
    	cursor:pointer;    
  }
  
  #search-box .form-text {      
    color: black;
    height: 18px;
    width: 200px;
  }      
    
  /** main (container for everything else) **/
  #main {
  }

  #main-inner {
  }

  /** content **/
  #content,
  .no-sidebars #content {
    float: left;
    width: 100%;
    margin-left: 0;
    margin-right: -100%; /* Negative value of #content's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
  }

  .sidebar-left #content {
    width: 80%;
    margin-left: 20%; /* The width of #sidebar-left. */
    margin-right: -100%; /* Negative value of #content's width + left margin. */
    padding-right: 20px;
    border-left: 1px solid #CDCDCD;
  }

  .sidebar-right #content {
    width: 80%;
    margin-left: 0;
    margin-right: -80%; /* Negative value of #content's width + left margin. */
  }

  .two-sidebars #content {
    width: 62%;
    margin-left: 20%; /* The width of #sidebar-left */
    margin-right: -80%; /* Negative value of #content's width + left margin. */
  }

  #content-inner {
    margin: 0;
    min-height: 500px;
  }
  
  #content-area {
    padding:0 20px 10px 20px;
  }
  
  .breadcrumb:before {
    content: "You are here: ";
  }
  
  .breadcrumb {   
    background-color:#EEEEEE;
    padding: 5px 0 5px 10px;
    color: #1e79c2;
  }
     
  .breadcrumb a:link, 
  .breadcrumb a:visited {
    color: #848484
  }
   
  #sidebar-left {
    float: left;
    width: 18%;
    margin-left: 0;
    margin-right: -20%; /* Negative value of #sidebar-left's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
  }

  #sidebar-left-inner {
    margin: 10px 10px 0 0;    
    padding-left: 10px;
  }

  #sidebar-right {
    float: left;
    width: 20%;
    margin-left: 80%; /* Width of content + sidebar-left. */
    margin-right: -100%; /* Negative value of #sidebar-right's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
  }

  #sidebar-right-inner {
    margin: 10px 0 0 0px;
    padding: 0;
  }

  #header,
  #content,
  #navbar,
  #sidebar-left,
  #sidebar-right,
  #footer,
  #closure-blocks {
    overflow: visible;
  }
  
  #header {
    height:120px;
  }
       
  #sidebar-left #block-menu-primary-links.block-menu ul {        
    margin-left:0px;      
  }
           
  #sidebar-left #block-menu-primary-links.block-menu li {
    font-weight:bold;
    margin-bottom:0.2em;   
  }

  #sidebar-left #block-menu-primary-links.block-menu li li{      
    margin-bottom:0;   
    border: 0;
    font-weight:normal;
    font-size:0.9em;
    padding:0.3em 0.3em 0em 0.4em;         
  }    

  #sidebar-left #block-menu-primary-links.block-menu li.active-trail a {
    color:#bf2e1a;
  }

  #sidebar-left #block-menu-primary-links.block-menu li.active-trail li a { 
    color:#004990;
  }

  #sidebar-left #block-menu-primary-links.block-menu li.leaf {
    list-style: none;
  }    

  #sidebar-left #block-menu-primary-links.block-menu ul {
    padding:0;
  } 

  #sidebar-left #block-menu-primary-links.block-menu ul li.active-trail li{
    background-color:white;
  }        
    
  #sidebar-left #block-menu-primary-links.block-menu li.leaf,
  #sidebar-left #block-menu-primary-links.block-menu li.collapsed,
  #sidebar-left #block-menu-primary-links.block-menu li.expanded {
    list-style-image: url('/images/RedArrow.gif');  
    list-style-type: none;
  }

  #sidebar-left #block-menu-primary-links.block-menu li.expanded li.leaf,
  #sidebar-left #block-menu-primary-links.block-menu li.expanded li.collapsed {
    list-style-image: none;  
    list-style-type: none;
  }
    
  #sidebar-left #block-menu-primary-links.block-menu li li.active-trail {
    background-color: #EEEEEE !important;      
  }    
            
  #sidebar-left #block-menu-primary-links.block-menu a:link,
  #sidebar-left #block-menu-primary-links.block-menu a:visited {    
    padding-left: 1em;
    line-height:2em;  
    color:#484848;
    font-size:12px;
    font-weight: normal;
  }
    
  #sidebar-left #block-menu-primary-links.block-menu a.active,
  #sidebar-left #block-menu-primary-links.block-menu a:hover,
  #block-menu-menu-footerlinks ul li a:hover {
    color:blue;
  }    
                

  #block-menu-menu-footerlinks ul li {
    display:inline;  
    padding: 1em;  
    font-weight: bold;      
  }

  #block-menu-menu-footerlinks ul li a:link, 
  #block-menu-menu-footerlinks ul li a:visited {
    color: #707070;
  }
  
  #block-menu-menu-footerlinks {
    margin-top: 25px;
  }

    


/************* Images ***********************************************/

.image_main_right {
  float:right;
  padding: 1em;
}

#topsplit-front{
  background-image:url('/images/Home_TopLine.jpg');
  height:8px;
  margin-bottom:20px;
}


#dots{
  background-image:url('/images/dots.gif');
  height:1px;
  margin:5px;  
  width:920px;
}

#mbannertext{
  float:left;
  height:auto;
  margin-top:15px;
  padding-left:50px;
  width:500px;
}

#mbannerpic {
  width:250px;
  float:right;
  margin-top:5px;
}

#shadl{
  /*background-image:url(/images/Shadow_Left.jpg);*/
  float:left;
  height:300px;
  width:50px;
}

#shadr{
  /*background-image:url(/images/Shadow_Right.jpg);*/
  float:left;
  height:300px;
  width:50px;
}

#footer-inner {
  width:350px;
  margin:auto;
}

.view-products h2,
.node-type-product h2{
}

.view-products h3,
.node-type-product h3{
  color:grey;
  font-weight:bold;
}


.product-title-desc {
/*	background-image: url('/images/up.jpg'); */
	background-repeat: no-repeat;
}

#search-box {
  margin-top:0px;  
}

#topbanner {
	background-image: url('bg.jpg');
	height: 170px;
	padding-left: 30px;
}

#topbanner h1, 
#topbanner h2 {
  font-weight: normal;
  margin:0;
  padding:0;
  letter-spacing:-1px;
  font-family:verdana;
}

#topbanner h1 {
  padding-top: 10px;
  font-size:26px;
  margin-left:20px;
  font-family: arial;
}

#topbanner h2 {
  color: #BF2E1A;
  margin-left:30px;
  font-size:22px;
  margin-top:-7px;
}

#topbanner h4 {
  width: 270px;
  margin-left:30px;
  margin-top:1px;
  font-size: 12px;
  color:black;
}

#prod-pic {
  margin-top:15px;
  width:350px;
}

#product-features {
  list-style-image: url('/images/tick.png');
  list-style-type: none;
}

strong, b {  
  font-weight: bold;
}


#fronttop {
  margin-left: 50px;
  width: 500px;
}

#fronttop h2 {
  color: #BF2E1A; 
  font-size: 22px;
  font-weight: normal;
  margin:0;
}

.frontmain-section {
  float:left; 
  width:265px; 
  margin: 0 10px; 
}

.front-image {
  padding-top:10px;
  width:265px;
}

.front-image img {
  width:265px;
}

h3.frontmain_field {
  margin: 0px;
  color:#0083F0;
}

h4.frontmain_field {
  margin:0px;
  line-height: 1.3em;
  letter-spacing: -0.5px;
}


.product-page-box {
  width:47%;
  float:left;
  margin-right:10px;  
  padding: 5px;
  
}



.newstitle a:link,
.newstitle a:visited{
  color:#CC6600;
}

.newstitle a:hover{
  color:black;
}


#contact-mail-page p {
}

#contact-mail-page .contact-main {
  margin-left:10px;
}

.contact-option {
  width: 227px;
  float:left;
  height:177px;
  margin-right:2%;
  margin-bottom:20px;
  background-image: url('/images/Content-Box.png');
  background-repeat: no-repeat;
}

.contact-option p {
  padding-left:15px;
}

.contact-option h2 {
  color: #BF2E1A;  
  margin:0px;
  padding:5px 5px 5px 15px;
  
}

.third-option {
  
}

.enquiry {
  padding-top: 15px;
}

.product-view-title, .frontmain_field {
  font-family: arial;
  font-weight:normal;
  margin-left:20px;
}

#contact-top {
  
}

#contact-image {
  float:left;
  width:40%;
}

#contact-text {
  margin-top:20px;
  float:left;
  width:360px;
  height:180px;
  padding:10px;
  /*background-image: url(/images/Content-Box-large.png);*/
  background-repeat: no-repeat;  
}

h4.frontmain_field {
  height:59px;
}

#loz {
  padding-top: 50px;
}

