﻿


html {
    min-height: 100%;
}
body
{
    height: 100%;
    width:100%;
    margin:0px;
    
   background: #000000;
    
    /*background-image: url(Images/Background.jpg);*/
   
    color: #bbb;
    font-family: Arial, Helvetica, sans-serif;
    table-layout: auto;
    /*border-collapse: collapse;*/
    empty-cells: hide;
    text-decoration: none;
   /* background-image: url( 'Images/Grad1.png' );*/
    background-repeat: repeat;
    z-index: 1;


}



.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}
table
{
	border-spacing: 0px;
}

a:link
{
 text-decoration:none; 
/* cursor: pointer; */
  color: #99e;
  
}
a:visited
{
 color: #99e;

}


a:hover
{
    text-decoration: none ;
    color: #e44;
    /* background:red;*/
}

#wholepage
{
 text-align:left;
  position:  relative;
  top:15px; 
margin: 0px;
	padding:0px;
  
 min-width:850px;

 
 max-width:1050px;
z-index:1;

}



#mainpage
{
padding: 10px 0px 0px 10px;
  position:  relative;
  top:10px;

	font-family: Arial , Verdana ;

  background-image:  url(Images/Background2.png) ;
 
 background-image: url(images/BackgroundDark.png) ;
  background-repeat: repeat-x;
 min-height: 20px;
 
z-index:1;
}
#mainright
{

  position:  relative;
  top:10px;
  background-image: url(images/BackgroundDark.png) ;
  background-position:top right;
  background-repeat: no-repeat;
  width: 15px;
  z-index: 0;
  padding: 10px 0px 0px 0px;
  
}
.topframe
{
    
    padding:0px;
    padding-bottom:8px;
    margin: 0px;
    position:relative;
    z-index: 10;
   
}
.leftframe
{
   z-index:0;   
   padding:1px; 
   border: 5px ;
   background: #999;
   height:100%;
   min-width:180px; 
   max-width:250px; 
    clear:both;
 -moz-border-radius: 5px;
 border-radius: 5px;


    
}
.mainframe
{
    

    	border:1px solid gray;
 /*background: #dddddd;*/
  
 z-index:1;
 -moz-border-radius: 5px;
 border-radius: 5px;
 padding: 8px;

}



.itemviewer
{
    position:relative;
    /*width:100%;*/
    height:100%;
    color:#bbb;
    /*top:0px;*/
    font-size:small;
    
}

.itemlayout
{
   position:relative;
    background: #ccc;
    /*padding: 3%;*/
    color: #444;  
    width:100%;  
    height:75px;
    text-decoration:none;
    
}

.itemlayoutselected
{
    position:relative;
    
    background: #777;
    /*padding: 3%;*/
    height:75px;
    color: #F33;  
    width:100%;
    text-decoration:none;
}
.itemlayoutgrid3
{
   position:relative;
    background: #ccc;
    /*padding: 3%;*/
    color: #444;  
    width:250px;  
text-align:center;

    text-decoration:none;

	border: 1px solid black;
	
	height:auto;
    
}

.itemlayoutselectedgrid3
{
    position:relative;
    
    background: #777;
    /*padding: 3%;*/

    color: #F33;  
       width:250px;  
    text-decoration:none;
text-align:center;
	border: 1px solid red;
	
	height:auto;
}
.itemlayoutgrid4
{
   position:relative;
    background: #ccc;
    /*padding: 3%;*/
    color: #444;  
    width:187px;  
text-align:center;

    text-decoration:none;

	border: 1px solid black;
	
	height:auto;
    
}

.itemlayoutselectedgrid4
{
    position:relative;
    
    background: #777;
    /*padding: 3%;*/

    color: #F33;  
       width:187px;  
    text-decoration:none;
text-align:center;
	border: 1px solid red;
	
	height:auto;
}
.itemlayoutgrid5
{
   position:relative;
    background: #ccc;
    /*padding: 3%;*/
    color: #444;  
    width:150px;  
text-align:center;

    text-decoration:none;

	border: 1px solid black;
	
	height:auto;
    
}

.itemlayoutselectedgrid5
{
    position:relative;
    
    background: #777;
    /*padding: 3%;*/

    color: #F33;  
       width:150px;  
    text-decoration:none;
text-align:center;
	border: 1px solid red;
	
	height:auto;
}

.itembasket
{
   position:relative;
    background: #ccc;
    padding: 0px;
    margin: 0px;
    border: 0px;
    color: #444;  
    width:100%;  
    top:0px;
    text-align: center;
    text-decoration:none;
    
}

.itembasketselected
{
    position:relative;
    
    background: #777;
    padding: 0px;
    border: 0px;
        margin: 0px;
        top:0px;
    color: #F33;  
    width:100%;
    text-decoration:none;
    text-align: center;
}

.itemlayoutimage
{
   position:relative;
    background: #ccc;
	padding:1px;
	/*padding-top:2px;
	padding-Bottom:0px;*/
    /*padding: 3%;*/
   /*height:75px; */ 
    color: #444;   
    width:100%; 
    text-decoration:none;   
     
}

.itemlayoutimageselected
{
    position:relative;
    background: #444;
    /*padding: 3%;*/
    /*height:75px;*/
    /*color: #bbb; */
    color: #f35;      
    width:100%; 
    text-decoration:none;
    cursor: pointer;
 -moz-border-radius: 0px;
 border-radius: 0px;
border-style: solid;
border-width:1px;
border-color: #544;

}



.itemdivider
{
position:relative;
margin:0px;
border-bottom:1px solid #555;
padding:0px; 
clear:both;
}

.itemtable
{
    position:relative;
    

}
.mainimages
{
   width:600px;
   float: left;
   
}
.smallimages
{
   float:right;
   width:100px;   
}


.smallimages2 {
    float: left;
    /* width: 100px;*/
}
table.smallimages2 {
    border-width: 0px;
    border-spacing: 0px;
    padding: 0px;
    width: 102px;
}

    table.smallimages2 td {
        border-width: 1px 1px 1px 1px;
        padding: 0px;
        border-style: solid;
        border-color: white;
        color: black;
    }

        table.smallimages2 td:hover {
            border-width: 1px 1px 1px 1px;
            padding: 0px;
            border-style: solid;
            border-color: red;
            border-collapse: separate;
            color: black;
        }




.itemimage 
{
/* position:absolute;
 top:0px;
 left:0px;*/
 width:100px;
 height:75px;   
 float:left;
 background-color: white;

text-align: center;
font-size:small;
 color: #BBB;
}

.thumbselect
{
text-align: center;
width: 100px;
height: 75px;
background:rgba(255,255,255,0.9);
}
thumbselect2 {
    text-align: center;
    width: 68px;
    height: 52px;
    background: rgba(255,255,255,0.9);
    float: left;
    border: solid 1px;
    border-color: #ddd;
}

.itemid
{
    /* position:relative;
 top:0px;
 left:30%;*/
     float:left;
    width:120px;
 margin: 0 0 0 10px;
    
}
.itemname
{
    /* position:absolute;
 top:0px;
 left:50%;*/
    float:left;
   margin: 0 0 0 10px; 
   max-width:370px;


    
}
.itemnamesmall
{
    /* position:absolute;
 top:0px;
 left:50%;*/
    float:left;
   margin: 0 0 0 10px; 
   width:190px;


    
}
.multidiscount
{
    /* position:absolute;
 top:0px;
 left:50%;*/
    float:left;
   margin: 0 0 0 10px; 
   width:105px;
      
}
.itemprice
{
     /*position:absolute;
 top:0px;
     right:0px;*/
    width:100px;
 float:right;
 text-align:right;
  margin: 0 0 0 10px;  
}
.barcode
{

 float:right;
 text-align:right;
  margin: 0 0 0 10px;  
}
.clearboth
{
	 clear:both;
}
.selecteditemid
{
	float: left;
	width: 15%;
	padding-right: 2%;
 
    
}
.selecteditemname
{
   	float: left;
	width: 70%;
	padding-right: 3%;

    
}
.selecteditemprice
{
    	float: right;
	width: 10%;
    
}

.selecteditemdescription
{
     position:relative;

     
    
left:0%;
width:98%;
padding: 5px;
    
}
.selecteditemdescription2
{
     	position:relative;
         font-style:italic;    
	left:0%;
	width:98%;
	padding-bottom: 15px;
    
}
.selectediteminstructions
{
     	position:relative;
     	font-style:italic;
	padding-bottom: 15px;
  
	left:5%;
	width:50%;
    
}
.categoryviewer
{
     position: relative;  
  
    background: #ccc;
    margin:2px;
    
    border:1px solid black;

     font-size:small; 
    color: gray;
    
    text-decoration: none;
    padding: 2px;  
    -moz-border-radius: 5px;
    border-radius: 5px;
 

}
.categoryheader
{
  background: #eee;
  font-weight:bold;
  font-style:italic;  
  border-bottom: solid 1px;
  color:#222;
  font-size: medium;
  padding: 0px 3px 0px 5px;
}
.categoryheaderred
{
  background: #eaa;
  font-weight:bold;
  font-style:italic;  
  border-bottom: solid 1px;
  color:#111;
  font-size: medium;
  padding: 1px 3px 1px 5px;
}

.searchbox
{
     position: relative;  
  
    background: #ccc;
    margin:2px;
    
    border:1px solid black;
     font-size:small; 
    color: gray;
    
    text-decoration: none;
    padding: 4px;  
    
 -moz-border-radius: 5px;
 border-radius: 5px;
 
}

.searchtitle
{
 
  font-weight:bold;
  font-style:italic;  
  
  color:#222;
  font-size: medium;

  margin:0px;
}
.narrowselection
{
  -moz-border-radius: 5px;
 border-radius: 5px;
   background: #edd;
  
  border: solid 1px;
  color:#222;
  font-size: medium;
  padding: 2px 2px 2px 2px;
  margin: 5px 1px 1px 1px;
}

.narrowselectiontext
{
  font-weight:bold;
  font-style:italic;  
  padding-left: 4px;
}


.category
{
    position:relative;    
    padding: 0px 3px 0px 5px;   
    color: #444;

}
.categoryred
{
    position:relative;    
    padding: 0px 3px 0px 5px;   
    color: #444;
	background: #dcc;  
}

.categoryselected
{
    position:relative;
    background: #555;  
    padding: 0px 3px 0px 5px; 
    color: #F22;  
    text-decoration:none;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.category2
{
    position:relative;    
    padding: 0px 3px 0px 5px;   
    color: #999;    
}

.categoryselected2
{
    position:relative;
    padding: 0px 3px 0px 5px; 
    background: #999;
    color: #F22;  
 -moz-border-radius: 3px;
 border-radius: 3px;
}



.breadcrumbs 
{

    
    color: #444;
padding: 0px;
margin: 0px;
 
   }

    

.breadcrumbs li 
{
 
     
    color: #bbb; 
    font-weight:bolder;
    text-decoration:none;
    display: inline-block; 
}

 

.breadcrumbs li a
{
 
       display: inline-block;    
    font-size:small; 
    color: #777; 
    text-decoration:none;
}

 
.breadcrumbs li a:hover
{
 
       display: inline-block;    
    font-size:small; 
    color: #F22; 
    text-decoration:none;
}

 
       

           
          
.breadcrumbs a:hover
{

    font-size:small;
    color: #F22;  
    text-decoration:none;
    cursor: pointer;
   
    }






.breadcrumbsviewer 
{
     position:relative;    
    /*background: #ddd;*/
    padding: 1px 2px 1px 2px; 
    color: #444;
    
}

.breadcrumb 
{
  
   /*background: #ddd;*/
    font-size:small; 
    color: #777; 
    text-decoration:none;
}
.breadcrumbmain 
{
  
   /*background: #ddd;*/
     
    color: #bbb; 
    font-weight:bolder;
    text-decoration:none;
}
.breadcrumbselected 
{
    /*background: #555;*/
    font-size:small;
    color: #F22;  
    text-decoration:none;
    cursor: pointer;
}
.breadcrumbmainselected 
{
    /*background: #555;*/
    /*font-size:small;*/
    font-weight:bolder;
    color: #F22;  
    text-decoration:none;
    cursor: pointer;
}
.selectitemviewer {
        
           
    /*background: #ddd;*/
    padding: 1px 2px 1px 2px; 
    color: #444;
  position:static;
  top:0px;


}

.content
{
    display: table-cell;
    
    color: red;
} 


.Tab 
{
	background: url(Images/tab.jpg) repeat ;
	background-color:#b5b5b5;
    height: 38px;
    padding: 0px 9px 0px 10px ; 
    color: #444;
    text-decoration:none;
    text-align:center;
    cursor: pointer;
    border-right:solid 1px #aaa;
    font-size:medium;
}


.TabSelected 
{
    background: url(Images/tab_selected.jpg) repeat ;
    background-color:#444;
     height: 38px;
     padding: 0px 9px 0px 9px ; 
     border-right:solid 1px #aaa;
     border-left:solid 1px #aaa;
     color: #f22;
     text-align:center;
     text-decoration:none;
   cursor: pointer;
   font-size:medium;
     
}


.footer
{
    position: static;
/*    background: #000;  */
    color: #666;  
    width:100%;
    font-size:80%;
    text-align:right;
    
    text-decoration:none;
}


.pagenumberviewer 
{
     position:relative;    
    /*background: #ddd;*/
    padding: 1px 2px 1px 2px; 
  
    
}
.pagechange
{
  
   /*background: #ddd;*/
    font-size:small; 
    color: #bbb; 
    text-decoration:none;
    width :80px;
}
.pagenumbers 
{
  
    font-size:small; 
    color: #bbb; 
    text-decoration:none;
    max-width:120px;
    text-align:center;
}
.pagechangeselected 
{
    background: #333;
    font-size:small;
    color: #F22;  
    text-decoration:none;
    cursor: pointer;
    width :80px;
}

CustDetails
table.CustDetails {
	border-width: 0px;
    border-collapse: collapse;   
 
}
table.CustDetails td {
	padding: 1px 5px 0px 15px ;
	color: #eee;
    font-size:  medium;
    white-space: nowrap;
}
table.basket {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	background-color:  #ddd;
	width: 95%;
    
 
}
table.basket td th {
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: blue;

	background-color: #ddd;
	color: black;
    font-size:smaller;
 
}

table.discount {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	background-color:  #ddd;
	width: 120px;
 
}
table.discount td {
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: blue;

	background-color: #ddd;
	color: black;
    font-size:smaller;
    text-align:center;
 
}

table.spectable {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	background-color:  #ddd;
	/*width: 90%;*/
margin-left: 5%;
 
}

table.spectable th {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: #ddd;
	padding: 3px;
	background-color: #333;
	color: #eee;
 
}

table.spectable td {
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: blue;

	background-color: #ddd;
	color: black;
 
}
table.spectable2 {
	align: center;
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: #ddd;
	border-collapse: collapse;
	background-color:  #111;
	margin-left: 25%;
	/*width: 50%;*/
	
 
}

table.spectable2 th {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: #ddd;
	padding: 3px;
	background-color: #333;
	color: #eee;
 
}
table.spectable2 td {
	border-width: 1px;
	
	border-style: solid;
	border-color: #ddd;
	font-size:smaller;
	background-color: #111;
	color: #ddd;
	padding: 3px;
 
}

table.smallimages {
	border-width: 0px;
	border-spacing: 0px;
 padding: 0px;
	
	
	width: 102px;
	
 
}

table.smallimages td {
	border-width: 1px 1px 1px 1px;
	padding: 0px;
	border-style: solid;
	border-color: white;
	
	color: black;
 
}
table.smallimages td:hover {
	border-width: 1px 1px 1px 1px;

	padding: 0px;
	border-style: solid;
	border-color: red;
border-collapse: separate;
	color: black;
 
}


iframe {
   overflow: hidden;
}
table.cart {
    color: #FFFFFF;
}


.youtubew{
	max-width: 860px;
	max-height: 480px;

	width: calc(100vw - 330px);
	height: calc((100vw - 330px) * 56 / 100);

}
.youtube{
	width: 640px;
	height: 480px;
}

/*          Future use
@media only screen and (max-width: 960px) {
.topframe
{
    font-size: .8em;
   
}
.leftframe
{
   min-width:150px; 
}

}
@media only screen and (max-width: 600px) {
    
.topframe
{
    font-size: 0.7em ;
   
}


}
*/
