@charset "utf-8";

/*
Author: Glynn Johnson
Project: Timberlink
*/

*{margin: 0; padding:0}

html{
   font-size:100%;
   background: #01895a /*url(../images/layout/shadow.gif) 50% 0% repeat*/;
   }
   
body{
   font-size:62.5%;
   font-family: Helvetica, arial, tahoma, verdana;
   background: transparent url(../images/layout/backstrip.gif) 0 0 repeat-x;
   }
   
html, body{height: 100%}

a img{border: none; cursor: pointer}

#container{
  /*min-height: 100%;
  height: auto !important;
  height: 100%;*/
  margin: 0 auto;
  background: #FFFFFF;
  margin: 0 auto;
  width: 980px;
  }
  
#header{
  background: #FFFFFF url(../images/layout/headBack1.gif) 0 37px repeat-x;
  min-height: 107px;
  width: 100%;
  display: block;
  }
  
/*--------------------------*/
/*---Sticky Bottom Footer---*/
/*--------------------------*/

#footer, #push{
  clear: both;
  margin: 0 auto;
  width: 980px;
  background: transparent;
  height: 110px;
  }

#footer{background: #FFFFFF}


/*--------------------------*/
/*-----Header Content-------*/
/*--------------------------*/

#logo{margin: 15px 0 10px 30px; float: left}

#phone-number{
  font-size: 1.9em;
  font-weight: normal;
  line-height: 25px;
  margin: 15px 28px 2px 0;
  color: #008457;
  float: right;
  }

#opening-times{
  font-size: 1.1em;
  float: right;
  margin-right: 30px;
  clear: right;
  }

#opening-times strong{margin: 0 7px}


/*--------------------------*/
/*--------Navigation--------*/
/*--------------------------*/

/*----------Normal----------*/

#core-navigation{
  clear: both;
  margin: 0 0 0 30px;
  z-index: 100;
  display: block;
  }

#core-navigation li{
  position: relative;
  list-style-type: none;
  float: left;
  height: 35px;
  margin: 0 1px 0 -5px;
  padding: 0 10px;
  background: transparent url(../images/layout/menuCurve.gif) 0 0 no-repeat;
  }

#core-navigation li a{
  text-decoration: none;
  display: block;
  color: #FFFFFF;
  font-size: 1.4em;
  line-height: 35px;
  background: transparent url(../images/layout/menuCurve.gif) 100% 0 no-repeat;
  padding: 0 15px;
  margin-right: -10px;
  margin-left: -10px;
  }


/*-----------Home-----------*/

#core-navigation li.home{background: transparent url(../images/layout/homeBack.gif) 0 5px no-repeat; margin: 0 5px 0 0}

#core-navigation li.home a{padding: 5px 0 0; background: none !important}

#core-navigation li.home:hover{background: url(../images/layout/homeBack.gif) 0 -30px no-repeat !important;}

/*-----------Wide-----------*/

#core-navigation li.wide{background: transparent url(../images/layout/menuCurveLong.gif) 0 0 no-repeat}

#core-navigation li.wide a{background: transparent url(../images/layout/menuCurveLong.gif) 100% 0 no-repeat}

/*----------Small-----------*/

#core-navigation li.small{background: transparent url(../images/layout/menuCurveSmall.gif) 0 0 no-repeat}

#core-navigation li.small a{background: transparent url(../images/layout/menuCurveSmall.gif) 100% 0 no-repeat}


/*----------Service---------*/

#core-navigation li.service{
  margin-left: 3px;
  margin-right: -7px;
  background: transparent url(../images/layout/menuServCurve.gif) 0 0 no-repeat;
  }

#core-navigation li.service a{background: transparent url(../images/layout/menuServCurve.gif) 100% 0 no-repeat}

/*--------------------------*/
/*------Hover / Active------*/
/*--------------------------*/


#core-navigation li:hover,
#core-navigation li.service:hover{background: transparent url(../images/layout/menuActive.gif) 0 0 no-repeat}
#core-navigation li.wide:hover{background: transparent url(../images/layout/menuActiveLong.gif) 0 0 no-repeat}
#core-navigation li.small:hover{background: transparent url(../images/layout/menuActiveSmall.gif) 0 0 no-repeat}


#core-navigation li:hover a,
#core-navigation li.service:hover a{background: transparent url(../images/layout/menuActive.gif) 100% 0 no-repeat; color: #fff}
#core-navigation li.wide:hover a{background: transparent url(../images/layout/menuActiveLong.gif) 100% 0 no-repeat; color: #fff}
#core-navigation li.small:hover a{background: transparent url(../images/layout/menuActiveSmall.gif) 100% 0 no-repeat; color: #fff}

#core-navigation li#active, 
#core-navigation li#active.wide,
#core-navigation li#active.small{background-position: 0 100%}

#core-navigation li#active a,
#core-navigation li#active.wide a,
#core-navigation li#active.small a{background-position: 100% 100%; color: #000; font-weight: bold}

#core-navigation li#active.home{background: transparent url(../images/layout/homeBack.gif) 0 -30px no-repeat}
#core-navigation li#active.home a{background: none}

#core-navigation li#active:hover{background: transparent url(../images/layout/menuCurve.gif) 0 100% no-repeat}
#core-navigation li#active.wide:hover{background: transparent url(../images/layout/menuCurveLong.gif) 0 100% no-repeat}
#core-navigation li#active.small:hover{background: transparent url(../images/layout/menuCurveSmall.gif) 0 100% no-repeat}

#core-navigation li#active:hover a{background: transparent url(../images/layout/menuCurve.gif) 100% 100% no-repeat}
#core-navigation li#active.wide:hover a{background: transparent url(../images/layout/menuCurveLong.gif) 100% 100% no-repeat}
#core-navigation li#active.small:hover a{background: transparent url(../images/layout/menuCurveSmall.gif) 100% 100% no-repeat}

#core-navigation li#active.home:hover{background: transparent url(../images/layout/homeBack.gif) 0 -30px no-repeat !important}
#core-navigation li#active.home:hover a{background: none !important}

/*--------------------------*/
/*--------Nav 2 and 3-------*/
/*--------------------------*/


#nav2{
  display: block;
  list-style-type: none;
  font-size: 1.2em;
  line-height: 25px;
  background: #fff url(/images/layout/nav2-back.gif) 0 0 repeat-x;  /*#ffda99 #ffd283 */
  margin-bottom: 0px;
  width: 920px;
  padding: 0px 30px;
  height: 30px;
  padding-top: 3px;
  clear:both;
  }
  
#nav3{
  display: block;
  list-style-type: none;
  font-size: 1.2em;
  line-height: 30px;
  background: #fff url(/images/layout/nav3-back.gif) 0 0 repeat-x;     /*#d9eac1*/
  width: 950px;
  padding: 0px 0px 0px 30px;
  height: 30px;
  }
  
#nav2 li, #nav3 li{float: left; display: block; height: 30px;}

#nav2 a, #nav3 a{padding: 0 20px; display: block; float: left; height: 30px;}

#nav3 li.nav-last a{ padding-right: 0px; }

/*---Footer Navigation---*/

#footer-navigation{
  text-align: right;
  font-size: 1.3em;
  height: 23px;
  width: 920px;
  padding: 9px 30px 0px 30px;
  display: block;
  background: #e1eecd;    /*fff6cd*/
  }

#nav2 a:link, #nav2 a:visited, #nav2 a:active,
#nav3 a:link, #nav3 a:visited, #nav3 a:active{text-decoration: none; color: #000}    /*151 */
#nav2 a:hover, #nav3 a:hover{text-decoration: underline; cursor: pointer; color: #000}

li.active-nav2 a{background: transparent url(/images/layout/nav2-a-back.gif) top right no-repeat}
li.active-nav2{background: transparent url(/images/layout/nav2-li-back.gif) 0 0 no-repeat}
li.active-nav2 a strong{background: transparent url(/images/layout/nav3-tab-back.gif) 0 0 repeat-x; display: inline-block; height: 30px}


#footer-navigation a:link, #footer-navigation a:visited,  #footer-navigation a:active{text-decoration: none; color: #000}
#footer-navigation a:hover{text-decoration: underline; cursor: pointer}

#footer-navigation span{
  margin-left: 10px;
  margin-right: 10px;
  }
  
/*-------------------------------*/
/*---Accessibility and Printing--*/
/*-------------------------------*/

p.a1, p.a2, p.a3, img.print{
  float: right !important;
  margin-top: -3px;
  margin-right: 5px;
  /*margin-bottom: 10px;
  margin-top: 20px;*/
  }

p.a1, p.a2, p.a3{
  background: transparent url(/images/layout/aaaBack1.gif) 0 0 no-repeat;
  line-height: 20px;
  display: block;
  height: 20px;
  width: 20px;
  text-align: center;
  }
  
/* ---uncomment with big site p.a3{margin-right: 20px} */
  
p.a1{font-size: 12px}
p.a2{font-size: 14px}
p.a3{font-size: 16px}


/*---------------------------*/
/*------Footer Content-------*/
/*---------------------------*/

/*-----Social Media-----*/

img.socialMedia, img.socialMediaRight{ float:right; width: 25px; height: 25px}

img.socialMedia{margin: 20px 5px 0 0}

img.socialMediaRight{margin: 20px 30px 0 0}

p.last-updated{ clear: right; padding: 10px 30px 0 0; font-size: 1.2em; }

/*----Company Info-----*/

#companyInfo{margin: 20px 0 0 0; padding-bottom: 20px; padding-left: 30px; font-size: 1.2em; background: #FFF}

strong.fax, strong.email{margin:0 5px 0 10px}

strong.tel{margin-right: 5px}


/*-------------------------*/
/*--------Clears-----------*/
/*-------------------------*/

.clearboth{
  clear: both;
  display: block;
  height: 0;
  }

.clearright{
  clear: right;
  display: block;
  height: 0;
  }
  
.clearleft{
  clear: left;
  display: block;
  height: 0;
  }
  
/*-------------------------*/
/*------PDF Files----------*/
/*-------------------------*/

.pdf-p{margin: 10px 0 10px 30px; font-size: 1.1em}

.pdf-file{margin-left: 10px; vertical-align: middle; line-height: 20px;}

.pdf-file-logo{vertical-align: bottom}

sup{vertical-align: top; padding-top: none; margin-top: 0; margin-left: 2px; line-height: 1em}
sub{vertical-align: baseline; padding-top: none; margin-bottom: 0;}

div.banner{
  margin-bottom: 20px;
  border: 10px solid #e3efd1;
  background: #e3efd1;
  display: block;
  height: 360px;
  }

div.gallery{
  border: 10px solid #F1F1F1;
  background: #F1F1F1;
  display: block;
  height: 180px;
  width: 233px;
  float: right;
  background: transparent url(/images/home/video-fake.gif) 0 0 no-repeat;
  }
  
div.gallery:hover{background: transparent url(/images/home/video-fake.gif) 0 100% no-repeat}


/*-------------------------------------*/
/*---------Temporary Menu--------------*/
/*-------------------------------------*/

div.categoryBlock p{
  background: none !important;
  color: #DDD !important;
  margin: 0 !important;
  padding: 0 0 0 10px !important;
  line-height: 1.4em !important;
  font-size: 1.2em !important;
  }
  
div.categoryBlock h3.not-done{
  color: #AAA;
  background-image: none;
  }
  
div.categoryBlock h3{padding-left: 10px}

div.categoryBlock h3.not-done:hover{
  background-color: #EEE;
  }
  
img.coming-soon{
  position: absolute;
  z-index: 2000 !important;
  right: 30px;
  bottom: 0;
  }
  
p.not-done{
  color: #AAA;
  }
  
/*---------------------------------*/
/*------Home Page bottom Divs------*/
/*---------------------------------*/
  
/*

#content a img{border: none; cursor: pointer}

#content a img:hover{
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  }

#content img{float: left; padding-left: 35px; margin-top: 30px}

#content img.left{padding-left: 0}

 */
 
.welcomeContainer{margin-left: 10px; width: 480px; border-right: 1px solid #DDD}

.welcomeContainer img.floatRight{margin-top: 10px; float: right !important; padding-left: 0 !important; width: 320px; border: 10px solid #F1F1F1}
 
.welcomeContainer h3{
  font-size: 2.0em;
  line-height: 1em;
  color: #188853;
  font-family: Trebuchet MS;
  margin-bottom: 10px;
  }
  
.underConstruction h3{
  font-size: 2.0em;
  line-height: 1em;
  color: #188853;
  font-family: Trebuchet MS;
  margin-bottom: 10px;
  }
  
.welcomeContainer p{
  font-size: 1.5em;
  line-height: 1.5em;
  margin-bottom: 5px;
  }
  
.welcomeContainer ul{
  list-style-type: none;
  margin: 0 !important;
  padding: 0 !important
  }
  
.welcomeContainer ul li{
  width: 100%;
  font-size: 1.6em !important;
  line-height: 1em !important
  padding: 5px 0;
  background: transparent url(/images/layout/tick.gif) 435px 3px no-repeat;
  }
  
.underConstruction{
  padding: 0px 20px 20px;
  float: right;
  display: block;
  width: 380px;
  }
  
.underConstruction p{
  font-size: 1.5em !important;
  line-height: 1.5em !important;
}
  
#footer-navigation a.not-active{
  color: #AAA;
  }
  
#footer-navigation a.not-active:hover{
  text-decoration: none;
  }
  
  
  
  
  
  /*-------New Banner--------*/
  
  #slider { 
   width: 900px; /* important to be same as image width */ 
   height: 360px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#sliderContent {
   width: 900px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #008457;
   filter: alpha(opacity=80); /* here you can set the opacity of box with text */
   -moz-opacity: 0.8; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.8; /* here you can set the opacity of box with text */
   opacity: 0.8; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}