@-ms-viewport{
  width: device-width;
}

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
BODY  {

			margin:0px;
	  		font-style:normal;  font-family:'Thonburi'; color:#000000; font-size:9pt;
			background-color:white; width:auto;}

a:link, a:visited { color:#183267;text-decoration: none; } 
a:active, a:hover { color:#E25D04;}

a.menu:link, a.menu:visited { font-family: 'Thonburi', sans-serif;color:#C80000;text-decoration: none; padding:3px 12px 3px 12px;border-width:0px;margin:0px;
border-left-width:1px;border-color:#CCC2C2;
border-style:solid;} 
a.menu:active, a.menu:hover { font-family: 'Thonburi', sans-serif;color:white;padding:3px 12px 3px 12px; background-color:#C80000;border-width:0px;margin:0px;
border-left-width:1px;border-color:#CCC2C2;
border-style:solid;}

a.menu3:link, a.menu3:visited {font-family: 'Thonburi', sans-serif; color:#C80000;text-decoration: none; padding:3px 12px 3px 12px;border-width:0px;margin:0px;
border-left-width:1px;border-right-width:1px;border-color:#CCC2C2;
border-style:solid;} 
a.menu3:active, a.menu3:hover { font-family: 'Thonburi', sans-serif;color:white;padding:3px 12px 3px 12px; background-color:#C80000;border-width:0px;margin:0px;
border-left-width:1px;border-right-width:1px;border-color:#CCC2C2;
border-style:solid;}




.io-top
{
margin:0px;
padding: 5px 10% 5px 10%;
position:fixed;width:100%;z-index:10;
height:60px;
background-color:whitesmoke;
text-align: right;
}


a.menu2:link, a.menu2:visited { color:black;text-decoration: none; padding:4px 15px 4px 15px;margin:0px;border-width:0px;} 
a.menu2:active, a.menu2:hover { color:white;background-color:#0052BC;}




.main-block
{
    margin-top:0px;
padding:80px 10% 15px 10%;
height: auto;
width: auto;
    background-color:white;
}


.grid-container
{
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: cadetblue;
    padding: 1px;
}

.grid-item{
    background-color: aliceblue;
    text-align: center;
    font-size: 10pt;
    padding: 10px;
}


hr
{ clear:both; border-top: 1px solid black;}


.search
{
    position: relative;
    margin-top:0px;
background-color:lightsteelblue; 
height: 80px;
width:auto;
text-align: center;
vertical-align: bottom;
}



.title-bar , .title-bar2 , .title-bar3 , .title-bar4 , .title-bar5
{
    margin:0px;
    padding:5px 10px 5px 15px;    
    width: 100%;
    height: auto;
    text-align: center;
    color:white;
}

.title-bar
{ background-color:steelblue; }

.title-bar2
{ background-color:firebrick;}

.title-bar3
{ background-color:slategray;}

.title-bar4
{ background-color:darkorange;}

.title-bar5
{ background-color:green;}

.sub-block
{
    width:auto;
    text-align: center;
    padding: 5px 0px 20px 0px;
}

td.Greenbg
{ 
background-color:green;
color:white;
text-align: center;
}

td.Orangebg
{ 
background-color:orange;
color:white;
text-align: center;
}

td.Redbg
{ 
background-color:red;
color:white;
text-align: center;
}


td.Yellowbg
{ 
background-color:yellow;
color:white;
text-align: center;
}


input[type=text] , input[type=password] {
    width: auto;
    padding: 4px;
    box-sizing: border-box;
    font-size: 12pt; 
    text-align: left;
}

input[type=text]:focus
{
    border:1px solid gray;
    color:black;
}

input[type=button], input[type=submit], input[type=reset] , buttonX
{
  width: auto;
  background-color: dodgerblue;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
    font-size: 14pt;
}

input[type=reset]
{
    background-color: red;
}

input[type=submit]
{
    background-color: #4CAF50;
}




input[type=button]:hover, input[type=password]:hover, input[type=submit]:hover, input[type=reset]:hover  , .buttonX:hover 
{
  -webkit-filter: grayscale(40%);
  filter: grayscale(40%);
}

#customers td, #customers th {
    border: 0px solid #ddd;
    padding: 4px;
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    background-color: #044caa;
    color: white;
  }

  #customers td {
      text-align: left;
  }

.dot , .dot1, .dot2 , .dot3 , .dot4 {
  height: 250px;
  width: 250px;
  background-color: crimson;
  border-radius: 50%;
  display: inline-block;
  color: white;
  font-weight: 500;
  vertical-align:bottom;
  margin:20px;
  font-size:45pt;
  padding-top:34px;
}
.dot1
{
    background-color: seagreen;
}

.dot2
{
   background-color:orchid;   
}

.dot3
{
   background-color:orange;
}

.dot4
{
   background-color:deepskyblue;
    font-weight: 300;
      font-size:30pt;
}

.bookshelf , .bookshelf1 , .bookshelf2 , .bookshelf3 , .bookshelf4, .bookshelf5, .bookshelf6, .bookshelf7, .bookshelf8 , .bookshelf9 , .bookshelf10 , .bookshelf11
{
display:inline-block;
vertical-align: top; 
background-color:deepskyblue;
width:300px;
height:160px;
margin:10px;
    padding: 10px 5px 20px 5px;
text-align:center;
color:white;
}

.bookshelf1
{
background-color:royalblue;
}

.bookshelf2
{
background-color:cadetblue;
}

.bookshelf3
{
background-color:darkseagreen;
}

.bookshelf4
{
background-color:darkslategrey;
}

.bookshelf5
{
background-color:midnightblue;
}

.bookshelf6
{
background-color:dodgerblue;
}

.bookshelf7
{
background-color:indianred;
}
    
.bookshelf8
{
background-color:darkorange;
}

.bookshelf9
{
background-color:rebeccapurple;
}

.bookshelf10
{
background-color:red;
}

.bookshelf11
{
background-color:mediumseagreen;
}

.bookshelf:hover , .bookshelf1:hover ,  .bookshelf2:hover , .bookshelf3:hover , .bookshelf4:hover, .bookshelf5:hover, .bookshelf6:hover, .bookshelf7:hover, .bookshelf8:hover , .bookshelf9:hover , .bookshelf10:hover , .bookshelf11:hover
{ 
box-shadow: 0px 0px 4px grey;
        -webkit-filter: grayscale(50%);
        filter: grayscale(50%);    
}

.ProductDetail
{
    width: 100%;
    margin:0;
    padding:0;
}

.addressblock
{
text-align: left;
padding: 10px;
background-color:aliceblue;
}


.topicrow
{
    background-color:gainsboro;

    padding: 5px 15px 5px 15px;
    text-align: center;
    font-size:8pt;
}

.format-left
{
    background-color:aliceblue;
    text-align: left;
    padding: 5px;
    border-width: 2px;
}

#left
{
float: left;
text-align: left;
}

#right
{ 
float: right;
text-align: right;
    padding-left:15px;
    vertical-align:middle;
}

#center
{text-align: center; }

.item-left
{
    vertical-align: text-top;
    text-align: left;
}

.item-center
{
    vertical-align: text-top;
    text-align: center;

}

.item-right
{
    vertical-align: text-top;
    text-align: right;
    padding-right: 12px;
}


.list-item , .list-item2 , .list-item3 , .list-item4 , .list-item5 , .list-item6
{
width: 100%;
background-color: whitesmoke;
    text-align: left;
    padding: 5px 15px 5px 15px;
    margin: 4px 0px 4px 0px;
    color:mediumvioletred;
}

.list-item2
{
background-color: white;
    padding-left: 30px;
    color:black;
     font-weight: 100;
}

.list-item3
{
    background-color: white;
    padding-left: 30px;
    color:slategrey;
     font-weight: 100;
}

.list-item4
{
    background-color: white;
    padding: 20px 10% 20px 15%;
    color:black;
}

.list-item5
{
    padding: 4px 10% 4px 15%;
    color:gray;
    font-weight: 100;
}

.list-item6
{
    background-color: white;
    padding: 4px 10% 4px 18%;
    color:black;
    font-weight: 100;
}

.bgcat1 , .bgcat2 , .bgcat3 , .bgcat4 , .bgcat5, .bgcat6, .bgcat7, .bgcat8, .bgcat9, .bgcat10 , .bgcat11
{ padding:10px 2% 10px 2%;
margin:5px;
width: auto;
height: auto;
background-color:darkcyan;
display:inline-flex;
color:white;
}

.bgcat1:hover , .bgcat2:hover , .bgcat3:hover , .bgcat4:hover , .bgcat5:hover , .bgcat6:hover , .bgcat7:hover , .bgcat8:hover , .bgcat9:hover , .bgcat10:hover , bgcat11:hover
{ 
    box-shadow: 0px 0px 4px grey;
            -webkit-filter: grayscale(50%);
            filter: grayscale(50%);    
}

.bgcat2
{ background-color:mediumseagreen; }
.bgcat3
{ background-color:cornflowerblue; }
.bgcat4
{ background-color:burlywood; }
.bgcat5
{ background-color:dodgerblue; }
.bgcat6
{  background-color:goldenrod;}
.bgcat7
{background-color:darkorange;}
.bgcat8
{background-color:rebeccapurple;}
.bgcat9
{ background-color:red; }
.bgcat10
{ background-color:darkseagreen; }
.bgcat11
{ background-color:pink; }


#navigate
{
display:inline-block;
padding:15px;
margin:10px;
background-color:white;
background-position:center top;

opacity: .9;
filter:Alpha(opacity=90);
position:inherit;
box-shadow: 0px 0px 3px black;
font-size:9pt;
font-size-adjust:auto;
color: black;
text-align:center;
height: 350px;
width:230px;
vertical-align:top;
}


.banner-text
{
text-align: left;
    color: grey;
    font-weight:100;
    padding: 5px 10px 5px 10px;
    display: inline-block;
}

.buttonX , .buttonY , .buttonZ
{
  width: auto;
  background-color:darkorange;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
    font-size: 14pt;
}

.buttonY
{
      background-color:dodgerblue;
}

.buttonZ
{
    background-color: limegreen;
}

.button2 {
    background-color:#0296CE;    
    width:auto;
    font-size: 16pt;
  color: white;
  padding: 10px;
  text-align: center;    
}

.button2:hover , .buttonX:hover , .buttonY:hover , .buttonZ:hover
{
        -webkit-filter: grayscale(50%);
        filter: grayscale(50%);  
}


.button3 , .button4 , .button5 {
  background-color:#CE0000; 
    width:auto;
  color: white;
  padding: 15px;
  text-align: center;    
}

.button4
{ background-color: red;
font-size: 16pt;
}

.button5
{ background-color:lawngreen;
font-size: 16pt;
}


.button3:hover
{
    background-color:indianred;
}

img.icon
{
    width: 100px; height: 100px;
    border-style: inset;
    border-color: gray;
    border-width: .5px;
    background-color: white;
}

#icons
{
    display: inline-block;
    font-size: 8pt;
    text-align: center;
    background-color:ghostwhite;
}

.footer
{
    display: block;
        margin:0px;
        padding:80px 10% 80px 10%;
text-align: center;
height:auto;
vertical-align:center;
background-color:whitesmoke;
width: auto;
font-size:9pt;
}