#header{
  border-top: #c12802 solid 2px;
  margin: 0px;
  padding: 0px 0px 6px 0px;
  width: 1100px;
  height: 100px;
  float: center;
  margin-left:auto;
  margin-right:auto;
  border-bottom: #c12802 solid 2px;

 }

#expired{
	background-color: red;
}
 
#menu{

  width: 1100px;
  float: center;
  margin-left:auto;
  margin-right:auto;
  z-index:10;
  border-bottom: #c12802 solid 2px;
 }
 
#body{
  margin: 0px;
  padding: 0px 0px 6px 0px;
  width: 1100px;
  height: 100px;
  float: center;
  margin-left:auto;
  margin-right:auto;
}

bodyt{
  margin: 0px;
  padding: 0px 0px 6px 0px;
  width: 1100px;
  height: 100px;
  float: center;
  margin-left:auto;
  margin-right:auto;
   text-align: center;
 }

 #body.Wide{
  margin:auto;
  padding: 5px ;
  width: 95%;
  min-height: 100%;
  float: center;
  margin-left:auto;
  margin-right: auto;
  text-align: center;
 }
 
  body.tablewide{
  margin:auto;
  padding: 10px ;
  width: 95%;
  min-height: 100%;
  float: center;
  margin-left:25px;
  margin-right: 5px;
  text-align: center;
 }
 
  body.RFI{
  margin: 0;
  border: #c12802 solid 1px;
  padding: 0px ;
  width: 1000px;
  min-height: 100%;
  float: center;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
 }
 
 h1 {
font-family: verdana;
  font-weight: bold;
	color:#333333;
  font-size: 20px;
    float: center;
}

 h2 {
font-family: verdana;
  font-weight: bold;
    margin: 4px;
	color:#333333;
  font-size: 14px;
}

 h3 {
font-family: verdana;
  font-weight: bold;
	color:#333333;
  font-size: 12px;
    padding: 2px;
    margin: 0px;
}

 label {
 font-family: verdana,arial,sans-serif;
	font-size:11px;
}

 P {
font-family: verdana;
	color:#333333;
  font-size: 14px;
    padding: 0px;
	margin: 3px;
}

 Warning {
font-family: verdana;
  font-weight: bold;
	color:red;
  font-size: 15px;
    float: center;
}

/*Image thumb nail setting*/
.image {
  float: center;
  font-size: 0;
  text-align: center;
  width: 250px;  /* Container's dimensions */
  height: 250px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 250px;
}

/*RFI Image Setting*/
#imagecontainer {
    width:950px;
	float: center;
	margin-left:auto;
    margin-right:auto;
}

  
.menu ul {
  text-align: left;
  display: center;
  margin: 0;
  padding: 0px;
  list-style: none;
}
.menu ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -20px;
  position: relative;
  padding: 5px 40px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
   z-index:9;
}
.menu ul li:hover {
  background: #555;
  color: #fff;
}
.menu ul li ul {
  padding: 0;
  position: absolute;
  top: 28px;
  left: 0;
  width: 250px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.menu ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
.menu ul li ul li:hover { background: #666; }

.menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
 

 #form{
  border-top: #c12802 solid 1px;
  border-bottom: #c12802 solid 1px;
  padding: 10px;
  text-align: Left;
  margin: 0 auto;
  float: center;
  
 }
 
 
 
table.tablist{
  float: center;
  margin-left:auto;
  margin-right:auto;
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-bottom: #c12802 solid 1px;
  border-top: #c12802 solid 1px;
  border-left: #c12802 solid 1px;
  border-right: #c12802 solid 1px;
	border-collapse: collapse
 }
 

table.tablist th {
  padding-top: 0.2rem;
  padding-bottom: 0.3rem;
  padding-right: 1rem;
  padding-left: 1rem;
  border-bottom: #c12802 solid 1px;
  border-top: #c12802 solid 1px;
  border-left: #c12802 solid 1px;
  border-right: #c12802 solid 1px;
  font-size:1em;
}

table.tablist td{
  border-bottom: #c12802 solid 1px;
  border-top: #c12802 solid 1px;
  border-left: #c12802 solid 1px;
  border-right: #c12802 solid 1px;
  vertical-align: middle;
} 


table.tablistnone{
  float: center;
  margin-left:auto;
  margin-right:auto;
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-style: none;
border-width: 1px;
border-color: #666666;
border:0;
	border-collapse: collapse
 }

table.tablistnone th {
  padding-top: 0.2rem;
  padding-bottom: 0.3rem;
  padding-right: 1rem;
  padding-left: 1rem;
  border:0;
  font-size:1em;
}

table.tablistnone td{
  vertical-align: top;
} 

table.progresstable{
  float: center;
  margin-left:auto;
  margin-right:auto;
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	
	border-collapse: collapse
 }
 
 table.progresstable td{
  	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
  vertical-align: middle;
 }
 


table.tablist td.clear{
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
  vertical-align: top;
}

table.tablist td.header{
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
  vertical-align: top;

} 

table.tablist td.level-1{
	padding-left: 0px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}

table.tablist td.level-2{
	padding-left: 20px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;	border-bottom: 0;
	border-right: 0;
	border-left: 0;
	
}

table.tablist td.level-3{
	padding-left: 40px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}

table.tablist td.level-4{
	padding-left: 60px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}
table.tablist td.level-5{
	padding-left: 80px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}
table.tablist td.level-6{
	padding-left: 100px;
	padding-top: 0.2rem;
	padding-bottom: 0.3rem;
	padding-right: 1rem;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}

tr.title {
	background-color: #AAAAAA;
}

tr.headings {
	background-color: #c12802;
	font-weight: bold;
}

tr.total{
	background-color: #FAB466;
}

tr.subtotal{
	background-color: #DCDCDC;
}

tr.grandtotal{
	background-color: #c12802;
	color:#000000;
}

tr.othertotal{
	background-color: #BBBBBB;
	color:#000000;
}


table.tabchart{
  float: center;
  margin-left:auto;
  margin-right:auto;
  	border-collapse: collapse

 }
 
table.tabchart td{
  padding-right: 0px;
  padding-left: 0px;
  border-bottom: #000000 solid 1px;
  border-top: #000000 solid 1px;
  border-left: #000000 solid 1px;
  border-right: #000000 solid 1px;
  vertical-align: middle;
  border-collapse: collapse
} 

#container {
    width:1100px;
	float: center;
	height: 50px;
	margin-left:auto;
    margin-right:auto;
}
#one {
    width:850px;
    float:left;
	height: 100%;
}
#two {
  font: bold 12px/18px sans-serif;
  vertical-align: middle;
  padding-top: 4px;
  background: #fff;
  width:175px;
  float:left;
}

#three {
  font: bold 12px/18px sans-serif;
  position: left;
  background: #fff;
  width:75px;
  float:left;
}

#logout{
  font: bold 12px/18px sans-serif;
  width: 75px;
  padding: 1px 0px 0px 5px;
  margin-left:auto;
  margin-right:auto;
  vertical-align: middle;
   z-index:10;
 }

#footer{
  width: 1100px;
  padding-top: 10px;
  margin-top: 20px;
  margin-left:auto;
  margin-right:auto;
  border-Top: #c12802 solid 2px;
  }
  
 table.tabform{
  float: center;
  margin-left:auto;
  margin-right:auto;
	font-family: verdana,arial,sans-serif;
	font-size:12px;
	color:#333333;
  border-bottom: #c12802 solid 1px;
  border-top: #c12802 solid 1px;
	border-collapse: collapse;

 }
 

table.tabform th {
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  font-size:1em;

}

table.tabform td{
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: middle;
  float: left
} 

input.text_estimate{
	font-size: 1em;
	font-family: verdana;
	text-align:left;
    vertical-align: middle; /* align the text vertically centered */
}

input.text_estimateNumber{
	font-size: 1em;
	font-family: verdana;
	text-align:right;
    vertical-align: middle; /* align the text vertically centered */
}

/*RFQ Links*/



a.RFQ:link {
    text-decoration: none;
                color: #000000;
}

a.RFQ:visited {
    text-decoration: none;
                color: #000000;
}

a.RFQ:hover {
    text-decoration: underline;
}

a.RFQ:active {
    text-decoration: underline;
}



/*Input padding*/

#entry{
  padding: 5px ;
 }


/* Buttons */
input.button_view {
	font-size: 0px;
    background-image: url(/img/magnifier.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 18px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

input.button_RFI {
	font-size: 0px;
    background-image: url(/img/RFI.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 18px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}


input.button_PadlockOpen {
	font-size: 0px;
    background-image: url(/img/PadlockOpen.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}
input.button_PadlockClosed {
	font-size: 0px;
    background-image: url(/img/PadlockClosed.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Basket{
	font-size: 0px;
    background-image: url(/img/Trolley.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Cross{
	font-size: 0px;
    background-image: url(/img/Cross.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Spanner{
	font-size: 0px;
    background-image: url(/img/Spanner.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Tick{
	font-size: 0px;
    background-image: url(/img/orangetick.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Calc{
	font-size: 0px;
    background-image: url(/img/Calculator.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */

}

input.button_Plus{
	font-size: 0px;
    background-image: url(/img/Plus.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

input.button_Refresh{
	font-size: 0px;
    background-image: url(/img/Refresh.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

input.button_Up{
	font-size: 0px;
    background-image: url(/img/ArrowUp.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

input.button_Down{
	font-size: 0px;
    background-image: url(/img/ArrowDown.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 17px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}
input.button_CheckOn{
	font-size: 0px;
    background-image: url(/img/CheckOn.png); /* 12px x 13px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 12px;           /* make this the size of your image */
    padding-left: 14px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}
input.button_CheckOff{
	font-size: 0px;
    background-image: url(/img/CheckOff.png); /* 12px x 13px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 12px;           /* make this the size of your image */
    padding-left: 14px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

/*home page style*/
.homecontainer{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
  "about mainpic";
  "videos videos";
}
.mainpic{
grid-area: mainpic;
}
.about{
grid-area: about;
}
.videos{
grid-area: videos;
}