/*======================================================================*/
/* Cheshire Fillers                                                     */
/*======================================================================*/
HTML
  {
  background: #C0C0C0;
  background-image: linear-gradient( top,#6BB5DE,#291884 );
  overflow-y: scroll;
  }

BODY
  {
  max-width: 960px;
  background: white;
  padding: 0;
  margin: 0 auto;
  font-family: verdana, serif;
  font-size: 11pt;
  line-height: 150%;
  min-height: 950px;
  box-shadow: 0 0 8px 8px rgba( 0,0,0,0.5 );
  color: black;
  }

:FOCUS
  {
  outline: 0;
  }

.smaller
  {
  font-size: 9pt;
  }

A, A:ACTIVE, A:VISITED
  {
  color: black;
  }

A:HOVER
  {
  color: blue;
  }

@media ( MAX-width: 850px )
  {
  HTML
    {
    background: none;
    }

  BODY
    {
     box-shadow: none;
    }

  }

/*======================================================================*/
/* MENU                                                                 */
/*======================================================================*/
HEADER.desktop
  {
  position: relative;
  border-bottom: solid black 1px;
  }

HEADER.desktop IMG
  {
  padding-left: 16px;
  border: 0px;
  padding-top: 8px;
  }

DIV.pagetabs
  {
  position: absolute;
  bottom: -4px;
  right: 20px;
  }

DIV.pagetabs A, DIV.pagetabs A:VISITED
  {
  display: inline-block;
  width: 80px;
  margin-right: 2px;
  padding: 4px 2px 4px 2px;
  text-align: center;
  font-size: 85%;
  color: #FFFFFF;
  text-decoration: none;
  background: #00008B ;
  border: none;
  border-radius: 8px 8px 0 0;
  border-top: solid #000000 1px;
  border-left: solid #000000 1px;
  border-right: solid #000000 1px;
  }

DIV.pagetabs A:HOVER
  {
  color: #FFD700;
  }

BODY.home #home,
BODY.about #about,
BODY.services #services,
BODY.products #products,
BODY.quality #quality,
BODY.contact #contact
  {
  z-index: 99;
  color: #291884;
  background: #D6E7EF;
  font-size: 95%;
  border-bottom: solid #D6E7EF 4px;
  }

DIV.pagetabholder
  {
  background: #D6E7EF;
  height: 16px;
  border-radius: 0 4px 0 0;
  position: relative;
  z-index: 99;
  border-bottom: solid #81B5CD 1px;
  }

HEADER.mobile
  {
  display: none;
  }


/*======================================================================*/
/* Mobile Header and Nav                                                */
/*======================================================================*/
@media ( MAX-width: 850px )
  {
  HEADER.desktop
    {
    display: none;
    }

  HEADER.mobile
    {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    display: block;
    z-index: 99;
    box-shadow: 0 6px 6px rgba( 0,0,0,0.5 );
    background: rgba( 255,255,255,0.8 );
    background: #FFFFFF;
    }

  DIV.mobilemenu
    {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 72px;
    }

  DIV.menugate
    {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    vertical-align: top;
    }

  DIV.menuslide
    {
    display: block;
    position: absolute;
    top: 72px;
    left: 0px;
    right: 0;
    z-index: 6;
    background: #D6E7EF;
    box-shadow: 0 8px 8px rgba( 255,255,255,0.8 );
    padding-bottom: 0px;
    height: 0px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }

  DIV.menuslide A
    {
    display: block;
    color: #000080;
    width: 100%;
    padding: 12px 0;
    font-family: Arial, Helvetica;
    font-size: 13pt;
    text-decoration: none;
    text-align: center;
    border-top: none;
    }

  DIV.menuslide A:HOVER
    {
    background: #00008B;
    color: white;
    }


  DIV.mobilelogo
    {
    float: right;
    max-width: 60%;
    }

  DIV.mobilelogo IMG
    {
    height: 60px;
    display: block;
    }

   DIV.halfmenu
    {
    display: inline-block;
    width: 49%;
    }
  }


/*======================================================================*/
/* Front Page Cardbox                                                   */
/*======================================================================*/
DIV.cardbox
  {
  position: relative;
  width: 960px;
  height: 265px;
  overflow: hidden ;
  border-bottom: solid black 1px;
  }

DIV.cards DIV.show, DIV.cards DIV.hide
  {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  }

DIV.cards DIV.show
  {
  z-index: 2;
  opacity: 1;
  transition: opacity 0.25s linear;
  }

DIV.cards DIV.hide
  {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s linear;
  }

DIV.cards IMG
  {
  width: 960px;
  height: 265px;
  border: 0;
  }

DIV.tray
  {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 3;
  }

DIV.tray A
  {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  -border: solid #666666 2px;
  -border-radius: 4px;
  text-decoration: none;
  box-shadow: 1px 1px 4px #669966;
  box-shadow: 1px 1px 4px rgba( 0, 16, 0, 0.25 ) ;
  }

DIV.tray A.show
  {
  background: silver;
  }

DIV.tray A.show:HOVER
  {
  background: yellow;
  }

DIV.tray A.hide
  {
  background: #666666;
  }

@media ( MAX-width: 850px )
  {
  DIV.cardbox
    {
    display: none;
    }
  }



/*======================================================================*/
/* Main Site                                                             */
/*======================================================================*/
DIV.main
  {
  padding: 0px;
  min-height: 700px;
  }

DIV.mainpage
  {
  padding: 15px;
  min-height: 700px;
   }

DIV.mainpage A, DIV.mainpage A:VISITED
  {
  color: black;
  }

DIV.main A:ACTIVE, DIV.main A:HOVER
  {
  color: red;
  }

H1
  {
  font-weight: normal;
  color: #291884;
  padding: 8px;
  padding-left: 0px;
  font-size: 20pt;
  margin-top: 0;
  }

H2
  {
  font-weight: normal;
  color: #291884;
  padding: 8px;
  padding-left: 0px;
  font-size: 16pt;
  }

TD.spacer
  {
  width: 30px;
  }

UL
  {
  padding-top: 0em;
  margin-top: 0em;
  }

LI
  {
  list-style: url( /cheshirefillers.bullet.gif );
  }


/*======================================================================*/
/* Special styles used on home page only                                 */
/*======================================================================*/

DIV.mainpage
  {
  display: table-cell;
  vertical-align: top;
  }

DIV.mainpage A.homepagebox:LINK,
DIV.mainpage A.homepagebox:VISITED,
DIV.mainpage A.homepagebox:ACTIVE,
DIV.mainpage A.homepagebox:HOVER
  {
  color: white;
  display: block;
  text-decoration: none;
  background: #C0504D;
  width: 275px;
  height: 250px;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  }

#homebox1
  {
  background: #C0504D;
  margin-right: 10px;
  margin-bottom: 30px;
  }

#homebox2
  {
  background: #669900;
  }

#homebox3
  {
  background: #6666FF;
  margin-right: 30px;
  }

#homebox4
  {
  background: #376092;
  }

A.homepagebox H2
  {
  color:white;
  font-size: 16pt;
  font-weight: normal;
  margin-top: 0px;
  }

A.homepagebox IMG
  {
  width: 250px;
  height: 119px;
  border: 0;
  }

div.homepagebox
  {
  display: inline-block;
  width: 275px;
  padding-left: 0;
  margin-right: 25px;
  vertical-align: top;
  }

DIV.twitterfeed
  {
  display: table-cell;
  text-align: center;
  width: 280px;
  padding: 0 10px 0 10px;
  }

DIV.productphoto
  {
  width: 350px;
  display: table-cell;
  vertical-align: top;
  }

DIV.productinfo
  {
  display: table-cell;
  vertical-align: top;
  }

@media ( MAX-width: 850px )
  {
  div.main
    {
    width: 99%;
    padding: 0px 8px 0px 8px;
    box-sizing: border-box;
    }

  div.mainpage
    {
    width: 99%;
    display: block;
    padding: 0px;
    padding-top: 60px;
    }

  div.mainpage H1
    {
    line-height: 150%;
    }

  DIV.homepagebox
    {
    display: inline-block;
    padding-bottom: 20px;
    }

  DIV.twitterfeed
    {
    display: block;
    width: 99%;
    padding: 0;
    }

  DIV.productphoto
    {
    width: 99%;
    display: block;
    padding-bottom: 10px;
    }

  DIV.photoinfo
    {
    display: block;
    }
  }


/*======================================================================*/
/* Quality Page                                                         */
/*======================================================================*/

DIV.quality
  {
  display: inline-block;
  vertical-align: top;
  }


DIV.qualityphoto
  {
  width: 200px;
  display: table-cell;
  padding: 0 15px 10px 0;
  vertical-align: top;
  text-align: center;
  }

DIV.qualityinfo
  {
  display: table-cell;
  vertical-align: top;
  padding: 0;
  }

@media ( MAX-width: 850px )
  {
  DIV.qualityphoto
    {
    width: 200px;
    display: block;
    vertical-align: top;
    }

  DIV.qualityinfo
    {
    width: 200px;
    display: block;
    vertical-align: top;
    padding: 0;
    padding-bottom: 20px;
    }
  }

/*======================================================================*/
/* Products Page                                                       */
/*======================================================================*/
DIV.products
  {
  display: inline-block;
  padding: 8px;
  padding-left: 20px;
  border-radius: 8px;
  border: black solid 1px;
  width: 250px;
  min-height: 250px;
  color: white;
  font-size: 10pt;
  vertical-align: top;
  margin-bottom: 12px;
  margin-right: 8px;
  }

#products1
  {
  background: #C0504D;
  }

#products2
  {
  background: #669900;
  }

#products3
  {
  background: #6666FF;
  }

#products4
  {
  background: #376092;
  }

#products5
  {
  background: #E9967A;
  }

#products6
  {
  background: #9370DB;
  }

DIV.products H2
  {
  padding-left: 10px;
  color: white;
  margin-top: 0;
  margin-bottom: 5px;
  }


/*======================================================================*/
/* Images                                                               */
/*======================================================================*/
DIV.images
  {
  width: 350px;
  display: table-cell;
  padding: 15px 15px 0 0;
  }

DIV.images IMG
  {
  display: block;
  }

@media ( MAX-width: 850px )
  {
  DIV.images
    {
    width: 99%;
    display: block;
    max-width: 350px;
    }

  DIV.images IMG
    {
    display: block;
    width: 99%;
    max-width: 350px;
    }
  }



/*======================================================================*/
/* Forms                                                                */
/*======================================================================*/
INPUT.modern, TEXTAREA.modern
  {
  width: 90%;
  padding: 4px;
  border: solid black 1px;
  border-radius: 4px;
  font-size: 11pt;
  font-family: arial;
  color: black;
  background: #F3F3F3;
  }

FORM DIV.hp
  {
  border: solid red 4px;
  padding: 18px;
  position: absolute;
  left: -1000px;
  max-width: 800px;
  }

/*======================================================================*/
/* Footer                                                               */
/*======================================================================*/
DIV.footer
  {
  font-size: 16pt;
  text-align: center;
  border-top: solid black 1px;
  padding: 10px 20px 10px 20px;
  }