/*   Body */                
body {
text-align: center;  /*  Centering webpage   */ 
overflow: hidden;
}                         
img { 
border: none;   /*  Fix to keep auto border coloring around images   */ 
max-width: 100%;
height: auto;
/*  Fix to make scale images right   */
image-rendering:optimizeSpeed;              /* Legal fallback                 */
image-rendering:-moz-crisp-edges;           /* Firefox                        */
image-rendering:-o-crisp-edges;             /* Opera                          */
image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
image-rendering:crisp-edges;                /* CSS3 Proposed                  */
-ms-interpolation-mode: bicubic;            /* IE8+                           */
} 
/*   Body */ 
/*       Page Wrapper                         
   width: 1425px; original size 
   0.65894 aspect ratio width max 
   height: 939px; original size 
   1.51757 aspect ratio height max  
   
   pixels to percentage formula:
   
   target / context = result  
                                       
   target (image or element size) / 
   context (original site size) = 
   result (in percentage)
*/  
#page-wrapper {
z-index: 1;
position: relative; 
width: 889px;
height: 640px;
margin: 15px auto; 
} 
/*   Fonts  */ 
.title-large { 
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px; 
font-weight: bold; 
color: #FFFFFF; 
}  
.title-large-shadow { 
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px; 
font-weight: bold; 
color: #4e1b1b; 
}
.title-small { 
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 11px; 
font-weight: bold; 
color: #FFFFFF; 
}
.title-small-shadow { 
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 11px; 
font-weight: bold; 
color: #4e1b1b; 
}
.contentbold-large {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold; 
font-size: 11px;
color: #330000;      
}
.contentbold-small {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold; 
font-size: 10px;
color: #330000;      
}
.content {
font-family:Arial;
font-size: 10px;
color: #392e2a;      
}                                    
.price {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 11px;
color: #a94624;      
}
.tax {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 9px;
color: #663300;      
}
.home-txt-shadow {
text-decoration: underline; 
font-size: 14px;
font-weight: bold;   
color: #4e1b1b;    
}
/*   Home Button Link  */ 
a.bottom { 
outline: none; 
text-decoration: underline; 
font-size: 14px;
font-weight: bold; 
color: #9f9e50;
}
a.top { 
outline: none; 
text-decoration: underline;
font-size: 14px;
font-weight: bold; 
color: #FFFFFF;
}
/*   Home Button Link  */ 
/*   Fonts  */     
/* Menu Title Area  */ 
.menu-title-wrapper {
position: absolute;
display: block;
overflow: hidden;
z-index: 1;
top: 2%;
left: 14%;
width: 34%;
height: 9%;
}
.menu-title-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 64%;
}
.menu-title-title1 {
position: absolute;
z-index:  3;
top: -18%;
left: 16%;
}
.menu-title-title1-shadow {
position: absolute;
z-index:  2;
top: -16.5%;
left: 16.7%;
}
.menu-title-title2 {
position: absolute;
z-index: 3;
top: 10%;
left: 30%;
}
.menu-title-title2-shadow {
position: absolute;
z-index: 2;
top: 12.5%;
left: 30.7%;
}
.menu-title-content1 {
position: absolute;
white-space: pre;
z-index: 2;
top: 55%;
left: 12%;
}
.menu-title-tax {
position: absolute;
z-index: 4;    
top: 55%;
left: 58.8%; 
}
/*    Menu Title Area  */     
/*   Delivery Area  */    
.delivery-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 10.5%;
left: 14%;
width: 34%; 
height: 14%;
}
.delivery-van-image { 
display: block;
position: absolute;      
width: 22.072%;
height: 59.230%;
top: 31%;
left: 75.9%;
z-index: 3;
}
.delivery-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 27.6%;
}
.delivery-title1 {
position: absolute;
z-index: 3;
top: -11%;
left: 3%;
}
.delivery-title1-shadow {
position: absolute;
z-index: 2;
top: -9.5%;
left: 3.7%;
}
.delivery-contentbold1 {
position: absolute;
z-index: 2;
top: 20%;
left: 3%;
}
.delivery-content1 {
position: absolute;
white-space: pre;
z-index: 2;
top: 42.6%;
left: 3%;
}
.delivery-content2 {
position: absolute;
z-index: 2;
top: 57.3%;
left: 6%;
}
.delivery-price1 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 18%;
left: 65%;
}
.delivery-minimum {
position: absolute;
z-index: 4;
top: 39.5%;
left: 24%;
}
/*   Delivery Area  */
/*   New CUSTOMER  */
.newcustomer-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 23.5%;
left: 14%;
width: 34%;
height: 14%;
}
.newcustomer-logo-image { 
display: block;
position: absolute;      
width: 30.786516%; 
height: 90.769230%;
top: 31%;
left: 68%;
z-index: 3;
}
.newcustomer-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 27.6%;
}
.newcustomer-title1 {
position: absolute;
z-index: 3;
top: -12%;
left: 3%;
}
.newcustomer-title1-shadow {
position: absolute;
z-index: 2;
top: -10.5%;
left: 3.7%;
}
.newcustomer-contentbold1 {
position: absolute;
z-index: 2;
top: 20%;
left: 3%;
}
.newcustomer-content1 {
position: absolute;
z-index: 2;
top: 41%;
left: 3%;
width: 65%;
}
.newcustomer-price1 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 16%;
left: 50%;
}
/*   New CUSTOMER  */
/*   Virus  */
.virus-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 41%;
left: 14%;
width: 34%;
height: 14%;
}
.virus-image { 
display: block;
position: absolute;      
width: 35.9550561%; 
height: 58.461538%;
top: 31.5%;
left: 2%;
z-index: 3;
}
.virus-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 27.6%;
}
.virus-title1 {
position: absolute;
z-index: 3;
top: -8%;
left: 3%;
}
.virus-title1-shadow {
position: absolute;
z-index: 2;
top: -6.5%;
left: 3.7%;
}
.virus-contentbold1 {
position: absolute;
z-index: 2;
top: 28%;
left: 28%;
width: 94%;
}
.virus-content1 {
position: absolute;
display: block;
z-index: 2;
top: 50%;
left: 42%;
width: 60%;
height: 12%;
}
.virus-price1 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 24.5%;
left: 44%;
}
/*   Virus  */
/*   Reformat  */ 
.reformat-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 54%;
left: 14%;
width: 34%;
height: 14%;
}
.reformat-image { 
display: block;
position: absolute;      
width: 33%; 
height: 83%;
top: 32%;
left: 2%;
z-index: 3;
}
.reformat-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 27.6%;
}
.reformat-title1 {
position: absolute;
z-index: 3;
top: -8%;
left: 3%;
}
.reformat-title1-shadow {
position: absolute;
z-index: 2;
top: -5.5%;
left: 3.7%;
}
.reformat-contentbold1 {
position: absolute;
z-index: 2;
top: 18%;
left: 43%;
width: 60%;
}
.reformat-content1 {
position: absolute;
z-index: 2;
top: 37%;
left: 40%;
width: 60%;
}
.reformat-price1 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 16.5%;
left: 39%;
}
/*   Reformat  */ 
/*   Networking  */ 
.networking-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 72%;
left: 14%;
width: 34%;
height: 14%;
}
.networking-image { 
display: block;
position: absolute;      
width: 30.1123595%; 
height: 73.07692307%;
top: 31.51%;
left: 2%;
z-index: 3;
}
.networking-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 27.6%;
}
.networking-title1 {
position: absolute;
z-index: 3;
top: -7%;
left: 3%;
}
.networking-title1-shadow {
position: absolute;
z-index: 2;
top: -5.5%;
left: 3.7%;
}
.networking-contentbold1 {
position: absolute;
z-index: 2;
top: 29%;
left: 40%;
}
.networking-content1 {
position: absolute;
z-index: 2;
top: 47%;
left: 40%;
}
.networking-contentbold2 {
position: absolute;
z-index: 2;
top: 64%;
left: 40%;
}
.networking-price1 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 27%;
left: 87%;
}
.networking-price2 {
position: absolute;
display: block;
background-color: #fecc9e;
z-index: 4;
top: 62%;
left: 87%;
}
/*   Networking  */ 
/*    Backup  */ 
.backup-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 2%;
left: 53%;
width: 34%;
height: 22%;
}
.xft-image { 
display: block;
position: absolute;      
width: 33.4831460%; 
height: 38.571428%;
top: 78%;
left: 60%;
z-index: 3;
}
.format-image { 
display: block;
position: absolute;      
width: 25.393258%; 
height: 40.476190%;
top: 27%;
z-index: 3;
}
.backup-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 25%
}
.backup-title1 {
position: absolute;
z-index: 3;
top: -8%;
left: 3%;
}
.backup-title1-shadow {
position: absolute;
z-index: 2;
top: -6.5%;
left: 3.5%;
}
.backup-title2 {
position: absolute;
z-index: 3;
top: 1.5%;
left: 26.5%;
}
.backup-title2-shadow {
position: absolute;
z-index: 2;
top: 3%;
left: 27.3%;
}
.backup-contentbold1 {
position: absolute;
z-index: 2;
top: 16.5%;
left: 43%;
}
.backup-content1 {
position: absolute;
z-index: 2;
top: 31%;
left: 43%;
}
.backup-content2 {
position: absolute;
z-index: 2;
top: 41%;
left: 43%;
}
.backup-content3 {
position: absolute;
z-index: 2;
top: 50.5%;
left: 43%;
}
.backup-content4 {
position: absolute;
z-index: 2;
top: 62%;
left: 43%;
}
.backup-contentbold2 {
position: absolute;
z-index: 2;
top: 70%;
left: 3%;
}
.backup-contentbold3 {
position: absolute;
z-index: 2;
top: 78%;
left: 3%;
}
.backup-content5 {
position: absolute;
z-index: 2;
top: 93%;
left: 3%;
}
.backup-content6 {
position: absolute;
z-index: 2;
top: 105%;
left: 3%;
}
.backup-price1 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 29%;
left: 88%;
}
.backup-price2 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 48%;
left: 88%;
}
.backup-price3 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 59%;
left: 88%;  
}
.backup-price4 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 92%;
left: 48%;
}
.backup-price5 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 104%;
left: 48%;
}
/*   Backup  */ 
/*    Software Installs */
.installs-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 29%;
left: 53%;
width: 34%;
height: 15%;
}
.sandwich-image { 
display: block;
position: absolute;      
width: 33.4831460%; 
height: 78.571428%;
top: 32%;
left: 3%;
z-index: 3;
}
.installs-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 26%;
}
.installs-title1 {
position: absolute;
z-index: 3;
top: -7%;
left: 3%;
}
.installs-title1-shadow {
position: absolute;
z-index: 2;
top: -5.5%;
left: 3.7%;
}
.installs-contentbold1 {
position: absolute;
z-index: 2;
top: 18.5%;
left: 43%;
}
.installs-content1 {
position: absolute;
z-index: 2;
top: 35%;
left: 43%;
}
.installs-content2 {
position: absolute;
z-index: 2;
top: 48%;
left: 52%;
}
.installs-contentbold2 {
position: absolute;
z-index: 2;
top: 59.5%;
left: 43%;
}
.installs-content3 {
position: absolute;
z-index: 2;
top: 75.5%;
left: 52%;
}
.installs-contentbold3 {
position: absolute;
z-index: 2;
top: 88.5%;
left: 43%;
}
.installs-price1 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 15%;
left: 88%;
}
.installs-price2 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 56%;
left: 88%;
}
.installs-price3 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 86%;
left: 88%;
}
/*    Software Installs */
/*    Dessert Menu      */
.dessert-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 46%;
left: 53%;
width: 34%;
height: 22%;
}
.dessert-image { 
display: block;
position: absolute;      
width: 33.707865%; 
height: 71.428571%;
top: 20%;
z-index: 3;
}
.dessert-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 16%;
}
.dessert-title1 {
position: absolute;
z-index: 3;
top: -8%;
left: 35%;
}
.dessert-title1-shadow {
position: absolute;
z-index: 2;
top: -6.5%;
left: 35.5%;
}
.dessert-contentbold1 {
position: absolute;
z-index: 4;
top: 10%;
left: 38%;
}
.dessert-content1 {
position: absolute;
z-index: 2;
top: 20%;
left: 38%;
width: 60%;
}
.dessert-contentbold2 {
position: absolute;
z-index: 4;
top: 56.5%;
left: 38%;
}
.dessert-contentbold3 {
position: absolute;
z-index: 4;
top: 66.5%;
left: 38%;
}
.dessert-content2 {
position: absolute;
z-index: 2;
top: 78.5%;
left: 38%;
width: 60%;
}
.dessert-price1 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 8%;
left: 88%;
}
.dessert-price2 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 54.5%;
left: 88%;
}
.dessert-price3 {
position: absolute;
display: block;
z-index: 4;
background-color: #fecc9e;
top: 65%;
left: 88%;
}
/*    Dessert Menu      */
/*    Orders Menu      */
.orders-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 70.5%;
left: 53%;
width: 34%;
height: 15%;
}
.orders-image { 
display: block;
position: absolute;      
width: 20.299529%; 
height: 59.637906%;
top: 48%;
left: 3%;
z-index: 3;
}
.orders-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 45%;
}
.orders-title1 {
position: absolute;
z-index: 3;
top: -5%;
left: 2%;
width: 95%;
}
.orders-title1-shadow {
position: absolute;
z-index: 2;
top: -2.5%;
left: 2.7%;
width: 95%;
}
.orders-contentbold1 {
position: absolute;
z-index: 4;
top: 48%;
left: 30%;
width: 65%;
}
/*    Orders Menu      */
/*    Bottom Bars Left     */
.bottombar-left-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 87%;
left: 14%;
width: 34.125766%;
height: 4.259850%;
}
.bottombar-left-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 100%;
}
.home-shadow {
position: absolute;
display: block;
z-index: 2;
top: -32%;
left: 42.7%;
width: 12%;
}
.home {
position: absolute;
display: block;
z-index: 4;
top: 10%;
left: 42%;
width: 12%;
margin: 0 auto;
}   
/* Color changing transition effect */
.home a {
  position: absolute;
  left: 0; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
/* Color changing transition effect */
.home a.top:hover {
  opacity: 0;
}
/*    Bottom Bars Left      */
/*    Bottom Bars Right     */
.bottombar-right-wrapper {
position: absolute;
display: block;
z-index: 1;
top: 87%;
left: 53%;
width: 34.125766%;
height: 4.259850%;
}
.bottombar-right-title-background {
position: absolute;
display: block;
z-index: 1;
background-color: #993333;
width: 100%;
height: 100%;
}
.bottombar-right-title-line-shadow {
position: absolute;
display: block;
z-index: 2;
top: 58.5%;
left: 5.7%;
background-color: #4e1b1b ;
width: 90%;
height: 10%;
}
.bottombar-right-title-line {
position: absolute;
display: block;
z-index: 3;
top: 50%;
left: 5%;
background-color: #D8D8D8 ;
width: 90%;
height: 10%;
}
/*    Bottom Bars Right      */
/*    Footer      */
.footerbar {
position: absolute;
display: block;
white-space: pre;
z-index: 1;
top: 92%;
left: 38%;
width: 53%;
height: 5%;
}
/*    Footer      */
/*    Copyright Bar      */
.copyrightbar {
position: absolute;
display: block;
z-index: 1;
top: 92%;
left: 8%;
width: 30%;
height: 5%;
}
/*    Copyright Bar      */