/* perry-products.com CSS by Glenn Barcham */
@charset "iso-8859-1";
*      { margin: 0; padding: 0 }
html    { font-size: 100% }
body    {
		font: 62.5%/1.5 Arial, Verdana, Helvetica, sans-serif;
        margin: 10px;
        background-color: #ffffff;
		}
/* styling of div elements */
#whole {
		position: relative;
        min-height: 100vh;
        font-size: 1.2em;
		line-height: 1.5em;
        background-image: url(Graphics/sky2b.gif);
        background-repeat: repeat-x;       
		}
#content {
         padding-bottom: 114px;
         }
#logo {
        position: fixed;
        width: 200px;
        left: 0px;
        margin-left: 5px;
        margin-right: 5px;
        padding: 15px 0px 5px 10px;
        height: 120px;
        display: block;
        }   
#banner {
        margin-left: 200px;
        margin-right: 5px;
        padding: 15px 0px 5px 10px;
        height: 120px;
        float: none;
        background-position: center;
        background-image: url(Graphics/Banner3.png);
        background-repeat: no-repeat;
        }   
#intro  {
        padding: 10px 10px 0px 10px;
        margin-left: 250px;
        background-position: right;
        font-weight: bold;
        font-size: 1.4em;
        color: #003333;
        }
#mainnav  {
          float: left;
          width: 250px;
          height: 300px;
          padding: 10px 0px 0px 10px;
          position: fixed;
          background: no-repeat;
          background-image: url(Graphics/Face1d.gif);
          background-position: left;
          }             
#foot {
       clear: both;
       position: absolute;
       width: 100%;
       height: 114px;
       bottom: 0px;
       background-image: url(Graphics/sky4.jpg);
       }
/* styling of text divs */
p      { margin-bottom: 0.7em }
h1     { font-size: 1.6em; font-weight: bold;color: #003333; margin-bottom: 1.0em }
ul     {
         list-style-position: inside;
         list-style-image:url(Graphics/Icon2small.png)
       }
.right { float: right; padding: 10px }
.left  { float:left; padding: 10px }
.p1 {font-weight: bold; font-size: 18pt; color: #006666}
.p2 {font-weight: bold; font-size: 18pt; color: #009999}
.p3 {font-weight: bold; font-size: 14pt; color: #006666}
.p4 {font-weight: bold; font-size: 14pt; color: #009999}
.p5 {font-weight: bold; font-size: 12pt; color: #006666}
.p6 {font-weight: bold; font-size: 12pt; color: #009999}
.p7 {font-weight: bold; font-size: 10pt; color: #006666}
.p8 {font-weight: bold; font-size: 10pt; color: #009999}
.p9 {font-weight: normal; font-size: 10pt; color: #000000}
.p10 {font-weight: normal; font-size: 10pt; color: #996633}
.p11 {font-weight: normal; font-size: 10pt; color: #F0F0F0}
/* styling of horizontal lines */
hr.big {
    background-color: #009999;
    margin-right: 100%;
    height:10px;
    width:90%;
    border-radius:5px
       }
hr.med {
    background-color: #33CCCC;
    margin-right: 100%;
    height:6px;
    width:95%;
    border-radius:2px
       }
hr.small {
    border-color: transparent;
    background-color: #99CCCC;
    margin-right: 100%;
    height:3px;
    width:100%
       }
/* ---------- code for rollover buttons ---------- */
a.atprea {
    display:block; 
    width: 160px;
    height:40px;
    text-decoration:none; 
    background:url(Graphics/preamble2.gif);
    background-position: 0px -80px
         }
a.atprod {
    display:block; 
    width: 160px;
    height:40px;
    text-decoration:none; 
    background:url(Graphics/products2.gif);
    background-position: 0px -80px
         }
a.atproj {
    display:block; 
    width: 160px;
    height:40px;
    text-decoration:none; 
    background:url(Graphics/projects2.gif);
    background-position: 0px -80px
         }
a.atpict{
    display:block; 
    width: 160px;
    height:40px;
    text-decoration:none; 
    background:url(Graphics/pictures2.gif);
    background-position: 0px -80px
         }
a.atperi {
    display:block; 
    width: 160px;
    height:40px;
    text-decoration:none; 
    background:url(Graphics/peripherals2.gif);
    background-position: 0px -80px
         }
a.ateno {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/enough.gif);
    background-position: 0px -80px
    }
.displace { position: absolute; left: -5000px }
a.rolloverprea {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/preamble2.gif)
    }
a.rolloverprea:link { background-position: 0px 0px }	
a.rolloverprea:visited { background-position: 0px 0px }	
a.rolloverprea:hover { background-position: 0px -40px }	
a.rolloverprea:active { background-position: 0px -80px }
a.rolloverprod {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/products2.gif)
    }
a.rolloverprod:link { background-position: 0px 0px }	
a.rolloverprod:visited { background-position: 0px 0px }	
a.rolloverprod:hover { background-position: 0px -40px }	
a.rolloverprod:active { background-position: 0px -80px }	
a.rolloverproj {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/projects2.gif)
    }
a.rolloverproj:link { background-position: 0px 0px }	
a.rolloverproj:visited { background-position: 0px 0px }	
a.rolloverproj:hover { background-position: 0px -40px }	
a.rolloverproj:active { background-position: 0px -80px }	
a.rolloverpict {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/pictures2.gif)
    }
a.rolloverpict:link { background-position: 0px 0px }	
a.rolloverpict:visited { background-position: 0px 0px }	
a.rolloverpict:hover { background-position: 0px -40px }	
a.rolloverpict:active { background-position: 0px -80px }	
a.rolloverperi {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/peripherals2.gif)
    }
a.rolloverperi:link { background-position: 0px 0px }	
a.rolloverperi:visited { background-position: 0px 0px }	
a.rolloverperi:hover { background-position: 0px -40px }	
a.rolloverperi:active { background-position: 0px -80px }	
a.rollovereno {
    display: block;
    width: 160px;
    height: 40px;
    text-decoration: none;
    background: url(Graphics/enough.gif)
    }
a.rollovereno:link { background-position: 0px 0px }	
a.rollovereno:visited { background-position: 0px 0px }	
a.rollovereno:hover { background-position: 0px -40px }	
a.rollovereno:active { background-position: 0px -80px }		
/* code for text links */
a.link1:link { text-align: center; text-indent: 20px; font-size: 1.2em; color: #009999; font-weight: bold; text-decoration: none }
a.link1:hover { text-align: center; text-indent: 20px; font-size: 1.2em; color: #00cccc; font-weight: bold; text-decoration: none }

/* code for slideshow controls eg on the gallery1.html page */
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,102,102,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #00cccc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #006666;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* code for place.html */
.button {
        display: inline-block;
        background-color: #009999;
        border-radius: 10px;
        border: 3px single #cccccc;
        color: white;
        text-align: center;
        font-size: 14px;
        padding: 5px;
        width: 200px;
        margin-left: 75px;
        }
.button:hover {
              background-color: #00CCCC;
               }
.flagpic {
         background-color: #F0F0F0;
         border: 2px solid #006666;
         box-shadow: 10px 10px 10px lightgrey; }
.flaglist {
          background-color: #F0F0F0;
          width: 240px; }
.txtremark {
        text-align: center;
        background-color: #F0F0F0;
        width: 340px;
        border:2px solid#006666; }
/* end of place.html code */

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
/* end of perry-products.com CSS */