body{
          padding:0px;
          margin:0px;
          font-family: Tahoma, Geneva,sans-serif;
          background-color:#404040;
         /* background-image: url("../general-images/graph001.png");*/
          background-repeat: repeat;
          background-attachment: fixed;
          -webkit-font-smoothing: antialiased;
          -webkit-text-size-adjust: 100%;
          line-height:1.5;
          width:100%;
          padding:0px;
          margin:0px;
          color: #666666;
/*          color: #4d4d4d;*/

      }

       img {
                    max-width: 100%;
                    max-height: 100%;
        }


     /* a {
         color: #9999ff;
         text-decoration: none;
      }
*/
      a:link {
         color: #6666ff;
         text-decoration: none;
      }


      a:hover {

          color: #6666ff;
      }

        a.fill-div {                /* sets div area as link <a href="" class="fill-div"></a> */
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
        }


      p{
          line-height:1.5;
          color: #666666;
      }

      p span-br {
          display: block;
    }

      h1{
          width: 100%;
          font-size: 30px;
          font-weight: bold;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h2{
          width: 100%;
          font-size: 24px;
          font-weight: bold;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h3{
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          font-family: serif;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 15px;
          line-height:1.3;
      }

      h4{
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          display: block;
          float: left;
          color: #999999;
          text-decoration: none;
          margin: 6px 0px;
          line-height:1.3;
      }

      .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
            }

      #center {
                text-align: center;
                }

/* ################ Top Menu ############### */

#topmenu {
          height: 60px;
          width: 100%;
          background-color: white;
          position: fixed;
          box-shadow: 0px 20px 20px #e5e5e5;
          z-index: 12;
          margin-top: 0px;
      }


*{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html{-webkit-font-smoothing:antialiased;}

a{color: gray;}
a:hover{color:#6666ff;}


p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
.clear{overflow: hidden;}


.mainWrap{width:960px;margin:0 auto;}

.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}

nav{display:block;
margin-top: 0px;
background:#ffffff;


}

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

/* ###################  1st Top menue properties  ##########*/

.menu li a {font-weight:600;
text-decoration:none;
padding:10px;
display:block;
color:grey;
border-left:3px solid linen;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

/* ###################  1st Top menue a hover properties  ##########*/
.menu li a:hover, .menu li:hover > a{
    color:#6666ff;
    background:#ffffff;
    border-left:3px solid #6666ff;

}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 200px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
/* ###################  Sub menue properties  ##########*/
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:grey;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #6666ff;
color:#6666ff;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 199px;
	top: 0px;
}

.mobile-menu{display:none;
width:100%;
padding:11px;
background: whitesmoke;
border-left: 3px solid linen;
border-right: 3px solid linen;
color:grey;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:grey;
color: whitesmoke;
text-decoration:none;
border-left: 3px solid #6666ff;
}

/* ################ Banner ############### */

      #abovebanner {
                      height: 56px;
                      width: 100%;
                      min-width: 979px;
                      background-color: white;
                      margin: 0px auto;
                  /*    border: #000000 3px dashed; */

                  }

      #banner {
          height: 490px;
          width: 100%;
          background-color: #ffffff;
          background-repeat: no-repeat;
          background-position: center;
        /*  border: #000000 3px dashed;     /* #### remove */
      }
/*################ Banner Cross Fade ########################*/
/*
.fadein img {
    position:absolute;
    left:0px;
    top:60px;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 48s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 48s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    15% {opacity: 1;}
    25% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    15% {opacity: 1;}
    25% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -36s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -24s;
    background-color: lightgreen;
}
#f4 {
    -webkit-animation-delay: -12s;
    background-color: lightgreen;
}
*/
/* ############### #slideshow - set the width and height to match your images ################# */

#slideshow {
position:relative;
max-height:490px;
}

#slideshow DIV {
position:absolute;
top:60;
left:0;
z-index:8;
opacity:0.0;
max-height: 490px;
background-color: #ffffed;
}

#slideshow DIV.active {
z-index:10;
opacity:1.0;
}

#slideshow DIV.last-active {
z-index:9;
}

#slideshow DIV IMG {
max-height: 490px;
display: block;
border: 0;
margin-bottom: 0px;
}

/* ############### #slideshow - set the width and height to match your images End ################# */

/* ## Austin Mini Banner ## */
#banner002 {
         height: 200px;
         width: 100%;
         min-width: 979px;
         background-color: #5583d8;
         background-image: url("../general-images/bannerthinmini-001.jpg");
         background-repeat: no-repeat;
         background-position: center;
     }
/* ## Tutorials Banner ## */
     #banner003 {
              height: 200px;
              width: 100%;
              min-width: 979px;
              background-color: #5583d8;
              background-image: url("../general-images/bannerthintutorial.jpg");
              background-repeat: no-repeat;
              background-position: center;
          }
/* ## Tutorials Banner ## */
   #banner004 {
            height: 200px;
            width: 100%;
            min-width: 979px;
            background-color: #5583d8;
            background-image: url("../general-images/bannerthingraphics.jpg");
            background-repeat: no-repeat;
            background-position: center;
        }

      #belowbanner {
          height: 80px;
          width: 100%;
          background-color: white;
          box-shadow: 0px 5px 5px #e5e5e5;
    /*     border: #000000 3px dashed; */

      }
      #belowbanner > #belowbannercontainer{
         height: 80px;
         max-width: 1280PX;
         min-width: 320px;
      /*    border: #000000 2px dashed;    /*##### remove ####*/
         background-color: white;
         z-index: 1;
         padding-top: 10px;
         margin: 0px auto;
     }



      /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 1280px;
          overflow: hidden;
          margin: 0px auto;
/*        border: #000000 3px dashed; /* ########### remove ######*/
          background-color: #ffffff;

          /*background-image: url("../general_images/background_white_transparent50.png");*/
      }





       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 00px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 75px;
          padding-right: 75px;
          background-color: #ffffed;
    /*      border: #000000 1px dashed; /*#### remove ####*/

      }

      #content > .contentimagebox_bookbanner{
          position: relative;
          float: left;
          background-position: center;
          margin-top: 0px;
          margin-left: auto;
          margin-right: auto;
          background-repeat: no-repeat;
          height: 185px;
          width: 100%;
          background-image: url("../general-images/book-page-banner.png");

          z-index: 1;
          overflow: hidden;
      }


      #content > .contenttextboxleft{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 30%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px;
          /*border: #000000 1px dashed;*/

      }

      #content > .contenttextboxleft60{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 60%;
          max-width: 100%;
          z-index: 1;
          overflow: hidden;
          padding-left: 30px;
          padding-right: 10px;

      }

      #content > .contenttextboxright40{
          position: relative;
          float: right;
          margin-top: 50px;
          height: auto;
          width: 40%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px
      }

      #content > .contenttextboxright50{
          position: relative;
          float: right;
          margin-top: 50px;
          height: auto;
          width: 50%;
          max-width: 50%;
          z-index: 1;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 50px

      }

      #content > .contenttextboxleft50{
          position: relative;
          float: left;
          margin-top: 50px;
          height: auto;
          width: 50%;
          max-width: 50%;
          z-index: 1;
          padding-left: 50px;
          padding-right: 10px;
          /*border: #000000 1px dashed;*/


      }
       #content > .contenttextboxcentre60{
          position: relative;
          margin: 0 auto;
          height: auto;
          width: 60%;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;


      }


      #content > .contentimageboxright_technical{
          position: relative;
          margin-top: 50px;
          margin-left: 5%;
          float: left;
          height: 400px;
          width: 640px;
         /* background-image: url("../general-images/merlin.jpg");*/
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }
      #content > .contentimageboxright_visualisation{
          position: relative;
          float: left;
          margin-top: 50px;
          margin-left: 5%;
          height: 400px;
          width: 640px;
         /* background-image: url("../general-images/watch.jpg");*/
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          }
      #content > .contentimageboxright_nature{
          position: relative;
          float: left;
          margin-top: 50px;
          margin-left: 5%;
          height: 480px;
          width: 640px;
        /*  background-image: url("../general-images/lion640x480.jpg");*/
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;

      }

      #content > .contentaboutimagelarge{
          position: relative;
          margin-top: 50px;
          margin-left: 10px;
          float: left;
          height: 400px;
          width: 300px;
          /*background-image: url("../general_images/german_shepherd_640x480.jpg");*/
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;
      }
      /* Gallery*/
      #gallery {
          position: relative;
          margin-top: 20px;
          margin-left: 10px;
          margin-bottom: 0px;
          float: left;
          height: 280px;
          width: 175px;
          float: left;
          /*background-image: url("../general_images/german_shepherd_640x480.jpg");
          box-shadow: 6px 6px 5px #888888;
          z-index: 1;
          overflow: hidden;*/

                }
     #gallery> .gallerytext {
         text-align: center;
     }
     #gallery> .gallerytextsmall {
         text-align: center;
         font-size: small;
     }


        /* ############## footer area ############### */
        #footer {
          height: auto;
          width: 100%;
          background-color: #dedede;
      }
        #footer > #footercontainertop {
          height: 100px;
          width: 100%;
          background-color: white;
          z-index: 2;
          margin: 0px auto;
          box-shadow: 0px 5px 5px #fafafa;
      }
          #footer > #footercontainermiddle {
          height: 200px;
          width: 100%;
          max-width: 1280px;
          min-width: 767px;
          z-index: 2;
          margin: 0px auto;
      }
          #footer > #footercontainermiddle > .footercontent {
          height: auto;
          width: 30%;
          z-index: 2;
          float: left;
          padding: 20px;
          color: gray;
      }

      #footer > #footercontainermiddle > .footercontent > a {
         color: grey;
         text-decoration: none;
      }

      #footer > #footercontainermiddle > .footercontent > a:hover {
         color: #6666ff;

      }
        #footer > #footercontainermiddle > .footermedia {
          height: auto;
          width: 20%;
          z-index: 2;
          float: right;
          padding: 20px;
          color: gray;
      }

       #footer > #footercontainerbottom {
          height: auto;
          width:100%;
          max-width: 1240px;
          min-width: 320px;
          z-index: 2;
          margin: 0px auto;
          padding: 20px;
          color: gray;
      }



/*
#######################################################
                Media 1280
#######################################################
*/


@media screen and (min-width: 979px) and (max-width: 1280px) {

  #banner {
          height: 350px;
          width: 100%;
          /* min-width: 768px; */
          /*background-image: url("../general_images/banner_979x200.jpg");*/
          /*background-position: left;*/
      }



}


/*
#######################################################
                Media 979
#######################################################
*/


@media screen and (min-width: 768px) and (max-width: 979px) {

    /* ################ changes to menu ############### */
#topmenu {
    height: 60px;

    -webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.mainWrap{width:768px;}
.menu ul {top:37px;}
.menu li a{font-size:12px;
padding:8px;}

/* ################ changes to banner ############### */

      #abovebanner {
          height: 56px;
          width: 100%;
          /* min-width: 768px; */
      }

      #banner {
          height: 200px;
          width: 100%;
          /* min-width: 768px; */
          /*background-image: url("../general_images/banner_979x200.jpg");*/
          /*background-position: left;*/
      }

/* ## Austin Mini Banner ## */
       #banner002 {
          height: 200px;
          width: 100%;
          min-width: 768px;
          background-image: url("../general-images/bannerthinmini-001-979x200.jpg");
          background-position: left;
      }

/* ## Tutorials Banner ## */
       #banner003 {
          height: 200px;
          width: 100%;
          min-width: 768px;
          background-image: url("../general-images/bannerthintutorial-979x200.jpg");
          background-position: left;
      }
/* ## Graphics Banner ## */
     #banner004 {
        height: 200px;
        width: 100%;
        min-width: 768px;
        background-image: url("../general-images/bannerthingraphics-979x200.jpg");
        background-position: left;
    }

      #banner > #bannertextbox{
          left: 10px;
          top: 3900px;
          width: 300px;
      }


 /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 979px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          clear: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;
      }


      #content > .contentimagebox_bookbanner{

          background-image: url("../general-images/book-page-banner979.png");


      }


      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }
      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }

  }

/*
#######################################################
                Media 767
#######################################################
*/

@media screen and (max-width: 767px) {

/* ################ changes to top menu ############### */

#topmenu {
    position: relative;
    height: 47px;
    box-shadow: 0px 0px 0px;
}

.mainWrap{width:auto;padding:0px 20px;}

.menu{display:none;}

.mobile-menu{display:block;
margin-top:0px;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#6666ff;
border-left:3px solid #6666ff;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

/* #### H tags ####*/
h1{
      font-size: 22px;
  }

  h2{
      font-size: 18px;
  }

  h3{
      font-size: 16px;
  }

  h4{
      font-size: 16px;
  }


/* ################ changes to banner ############### */

      #abovebanner {
          height: 1px;
          /*width: 0px;*/
          min-width: 0px;
      }

      #banner {
          height: 220px;
          width: 100%;
          /* min-width: 480px; */
/*          background-image: url("../general_images/banner_767x200.jpg");
          background-position: left;*/
      }

      #banner002 {
          height: 200px;
          width: 100%;
          min-width: 480px;
          background-image: url("../general-images/bannerthinmini-001-767x200.jpg");
          background-position: left;
      }

       #banner003 {
          height: 200px;
          width: 100%;
          min-width: 480px;
          background-image: url("../general-images/bannerthintutorial-767x200.jpg");
          background-position: left;
      }

      #banner004 {
         height: 200px;
         width: 100%;
         min-width: 480px;
         background-image: url("../general-images/bannerthingraphics-767x200.jpg");
         background-position: left;
     }



 /* ############## main content area ################ */
      #content {
          width: 100%;
          height: auto;
          max-width: 767px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;

      }

      #content > .contentimagebox_bookbanner{

          background-image: url("../general-images/book-page-banner767.png");


      }

      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }

      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }




        /* ############## footer area ############### */

          #footer > #footercontainermiddle {
          min-width: 320px;
      }

          #footer > #footercontainermiddle > .footercontent {
          width: 100%;
      }

        #footer > #footercontainermiddle > .footermedia {
          height: auto;
          width: 100%;
      }

      table.pricetable {
        width: 100%;

     }

}

/*
#######################################################
                Media 480
#######################################################
*/

@media (max-width: 480px) {

    h1{
          font-size: 20px;
      }

      h2{
          font-size: 18px;
      }

      h3{
          font-size: 16px;
      }

      h4{
          font-size: 16px;
      }


     #abovebanner {
          height: 0px;
          width: 0px;
          min-width: 0px;
      }

      #banner {
          height: 140px;
          width: 100%;
          /* min-width: 320px; */
/*          background-image: url("../general_images/banner_480x200.jpg");
          background-position: left;*/
      }
/*## Austin Mini Banner ##*/
      #banner002 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/bannerthinmini-001-480x200.jpg");
          background-position: left;
      }
/*## Tutorials Banner ##*/
      #banner003 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/bannerthintutorial-480x200.jpg");
          background-position: left;
      }
      /*## Graphics Banner ##*/
            #banner004 {
                height: 200px;
                width: 100%;
                min-width: 320px;
                background-image: url("../general-images/bannerthingraphics-480x200.jpg");
                background-position: left;
            }


      #content {
          width: 100%;
          height: auto;
          max-width: 767px;
          /*overflow: hidden;*/
          margin: 0px auto;
          display: flex;
          flex-direction: column;


      }

       #content > .contenttextboxfull{
          position: relative;
          float: left;
          margin-top: 50px;
          width: 100%;
          height: auto;
          min-width: 320px;
          line-height:1.5;
          z-index: 1;
          padding-left: 10px;
          padding-right: 10px;

      }

      #content > .contentimagebox_bookbanner{

          background-image: url("../general-images/book-page-banner480.png");


      }

      #content > .contenttextboxright50{
          width: 100%;
          max-width: 100%;
      }
      #content > .contenttextboxleft50{
          width: 100%;
          max-width: 100%;
      }

}

/*
#######################################################
                Media 320
#######################################################
*/

@media (max-width: 320px) {

     h1{
          font-size: 20px;
      }

      h2{
          font-size: 18px;
      }

      h3{
          font-size: 16px;
      }

      h4{
          font-size: 16px;
      }


     #abovebanner {
          height: 0px;
          width: 0px;
          /* min-width: 0px; */
      }

      #banner {
          height: 100px;
          width: 100%;
          /* min-width: 320px; */
/*          background-image: url("../general_images/banner_320x200.jpg");
          background-position: left;*/
      }
/*## Austin Mini Banner ##*/
       #banner002 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/bannerthinmini-001-320x200.jpg");
          background-position: left;
      }
/*## Tutorials Banner ##*/
      #banner003 {
          height: 200px;
          width: 100%;
          min-width: 320px;
          background-image: url("../general-images/bannerthintutorial-320x200.jpg");
          background-position: left;
      }
  /*## Graphics Banner ##*/
        #banner004 {
            height: 200px;
            width: 100%;
            min-width: 320px;
            background-image: url("../general-images/bannerthingraphics-320x200.jpg");
            background-position: left;
        }

     #banner > #bannertextbox{
          left: 10px;
          top: 4750px;
          width: 300px;
      }

/* ############ White notice area ################ */

                  #noticearea {
                     height: 430px;
                     min-width: 320px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }
                   #noticearea > #noticecontainer{
                      height: 430px;
                      min-width: 320px;
                      display: flex;
                      flex-direction: column;
                      float: left;
                  }
                  #noticearea > #noticecontainer > #noticeimage{
                      height: 0px;
                      width: 12px;
                      min-width: 12px;
                      margin-top: 15px;
                      margin-left: 0px;
                      box-shadow: 0px 0px 0px #ffffff;

                  }
                  #noticearea > #noticecontainer > #noticetext{
                      height: auto;
                      width: 100%;
                      min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                      margin-bottom: 0px;
                  }
                  #noticearea > #noticecontainer > #noticetext1{
                      height: auto;
                      width: 100%;
                     min-width: 320px;
                      margin-top: 0px;
                      margin-left: 0px;
                  }







                  #content > .contenttextboxcentre60{
                      width: 100%;
                  }

                  table.pricetable {
                    width: 100%;
                    font-size: 12px;

                 }

                  #content > .contenttextboxfull{
                  margin-top: 20px;
                  min-width: 320px;


              }

              #content > .contenttextboxleft50{

              margin-top: 20px;

              }

              #content > .contenttextboxright50{

              margin-top: 20px;

              }

              #ballvalve {
              height: 250px;

              }

}