body
{
    font-size: 22pt;
    font-family: Calibri;
}

html
{
    background-color: #BCF4A6;
	/*background-color: #B2E68F;    */ /* mint green */

    /*
    background: url("../img/TAPPBG.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/TAPPBG.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/TAPPBG.jpg', sizingMethod='scale')";
    */	  

    /*background: url("../img/TAPPBG.jpg") top left no-repeat #B2E68F;*/	 


    /*background-size: 100%;*/
    /*background-attachment:fixed;*/
    
    /* Safari and Chrome */
    /*-webkit-background-size: 100% 100%;*/

    /* Firefox */
    /*-moz-background-size: 100% 150%;*/

    /* Internet Explorer */
    /*-ms-background-size: 100% 100%;*/

    /* Opera */
    /*-o-background-size: 100% 100%;*/

    /* CSS3 */
    /*background-size: 100% 150%;*/
}

a
{
	color: transparent;
	text-decoration: none;
}

a:visited
{
	color: transparent;
	text-decoration: none;
}

td
{
    text-align: center;
}

.txt
{
    font-size: 24pt;
    font-family: Calibri; 
    width: 90%;
    height: 65px;
    text-align: center;
    border-radius: 15px;
    border-width: 0px;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
}

.txt_m
{
    font-size: 24pt;
    font-family: Calibri;
    width: 90%;
    height: 65px;
    text-align: center;
    border-radius: 15px;
    border-width: 0px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.txt_mSmall
{
    font-size: 22pt;
    font-family: Calibri;
    width: 90%;
    height: 65px;
    text-align: center;
    border-radius: 15px;
    border-width: 0px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.txt_mSmaller
{
    font-size: 20pt;
    font-family: Calibri;
    width: 90%;
    height: 65px;
    text-align: center;
    border-radius: 15px;
    border-width: 0px;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
}

.button
{
    font-size: 11pt;
    background-color: #CDDDC2;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 190px;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    white-space: normal;
    font-weight:bold;
}

/* headerDiv */

#headerDiv
{
    width: 100%;
    height: 70px;
    top: 0;
    left:0;
    z-index: 2;
}

#loginBtn
{
    font-size: 20pt;
}

.logOutBtn
{
    font-size: 10pt;
    background-color: #CDDDC2;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width:100%;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    font-weight:bold;
    float:right; 
}

#logoDiv
{
    width: 60%;
    float: left;
    vertical-align:top;
    /*border:1px solid black;*/
}

#loginMsgDivDiv
{
    width: 40%;
    float: right;
    vertical-align:top;
    /*border:1px solid black;*/
}

/* pageDiv */

#pageDiv
{
    width: 100%;
    left: 0px;  
    border-width:1px;  
    border-color:Black;
    padding-bottom: 95px;
}
  
#invoiceValueDiv
{
    width: 30%;
    float: left;
    vertical-align:bottom;
}

#orDiv
{
    width: 7%;
    float: left;
    vertical-align:bottom;       
}
    
#leaseRentalDiv
{
    width: 30%;
    float: left;
    vertical-align:bottom;
}
    
#getQuoteBtnDiv
{
    width: 33%;
    float: left;
    vertical-align:bottom;
}

#savedQuotesTbl
{
    width: 95%;   
}

.savedQuoteButton
{
    font-size: 11pt;
    background-color: #CDDDC2;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 100%;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    font-weight:bold;
}

.savedQuoteModifiedButton
{
    font-size: 11pt;
    background-color: #FF0000;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 100%;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    font-weight:bold;
}

.rateButton
{
    font-size: 13pt;
    background-color: #CDDDC2;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 90%;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    white-space: normal;
    font-weight:bold;
}

.rateButtonSelected
{
    font-size: 13pt;
    background-color: Yellow;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 90%;
    height: 75px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    -ms-filter: alpha(opacity=50);
    opacity: 0.5;
    white-space: normal;
    font-weight:bold;
}

#loginDiv
{
    width: 100%;
    text-align: center;
}

#loginDiv_userNameTxt
{
    width: 100%;  
    text-align: center;     
}

#userNameTxt
{  
    text-align: center;     
}

#loginDiv_passwordTxt
{
    width: 100%;  
    text-align: center;    
}

#passwordTxt
{  
    text-align: center;    
}

#quoteDiv
{
    width: 100%;
    margin-top:25px;
    margin-bottom: 25px; /* 55 */
    text-align:center;
    display:none;
}

#customerNameDiv
{
    width: 100%;  
    text-align: center;  
}

#customerNameTxt
{
    text-align: center;  
}

#getQuoteBtn
{
    font-size: 24pt;
    background-color: #CDDDC2;
    color: #000000;
    font-family: Calibri;
    cursor:pointer;
    width: 100%;
    height: 100px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #82B22B;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/*
#ratesDiv
{
    width: 100%;  
    text-align: center;
    border: 1px solid black;
}
*/

#ratesTbl1
{
    display:none;
}

/*#ratesTbl1 tbody{width:100%}
#ratesTbl2 tbody{width:100%}*/

.ratesTbl
{
    border:solid 1px black;
    width: 98%;    
}

#savedQuotesDiv
{
    width: 100%;
    text-align:center;
    display:none;
    margin-bottom:55px;
    margin-top:55px;
}

#buttonsDiv
{
    width: 100%;
    height: 100px;
    background-color: #000000; /*#B2E68F;*/
    position: fixed;
    bottom: 0;
    left:0; 
    z-index: 2; 
}

#saveQuoteBtn
{   
    width: 95%; 
}

#newQuoteBtn
{   
    width: 95%; 
}

#contactTowerBtn
{
    width: 95%; 
}

#savedQuotesBtn
{
    width: 95%;  
}

#hiddenDiv
{
    display: none;
    height: 0px;
}

#loginMsgDiv
{
    float:right;
    top: 0px;
    text-align:right;
    width:100%
}

#emulateOfflineCheck
{
    display: none;    
}

#clearQuoteArrBtn
{
    display: none;    
}

/* YELLOW */
@media only screen and (min-width: 768px) and (max-width: 1024px) 
{
    body
    {
        font-size: 22pt;
    }
    
	/*
    #buttonsDiv
	{
		background-color: Yellow;
	} 
	*/
	
	.rateButton
    {
        font-size: 12pt;
    }

    .rateButtonSelected
    {
        font-size: 12pt;
    }
    
    .txt_m
    {
        font-size: 20pt;
    }

    .txt_mSmall
    {
        font-size: 18pt;
    }
    
    .txt_mSmaller
    {
        font-size: 16pt;
    }
    
    #ratesTbl1
    {
        display: none;     
    }
}

/* WHITE */
@media only screen and (min-width: 400px) and (max-width: 768px) 
{
    body
    {
        font-size: 14pt;
    }
    
	/*
    #buttonsDiv
	{
		background-color: #FFFFFF;
	}
	*/
	
	.txt
    {
        font-size: 22pt;
    }
	
	.txt_m
    {
        font-size: 16pt;
    }

    .txt_mSmall
    {
        font-size: 14pt;
    }
    
    .txt_mSmaller
	{
        font-size: 12pt;
    }
    
	.rateButton
    {
        font-size: 11pt;
    }

    .rateButtonSelected
    {
        font-size: 11pt;
    }
}

/* GREY */
@media only screen and (min-width: 400px) and (max-width: 480px) 
{
    body
    {
        font-size: 13pt;
    }
    
	/*
    #buttonsDiv
	{
		background-color: #444444;
	}  
	*/
	
	#headerImg
    {
        width:200px
    }
    
    #logoDiv
    {
        width: 100%;
    }

    #loginMsgDivDiv
    {
        width: 100%;
    }
	
	.txt
    {
        font-size: 22pt;
    }
	
	.txt_m
    {
        font-size: 14pt;
    }

    .txt_mSmall
    {
        font-size: 12pt;
    }
    
    .txt_mSmaller
    {
        font-size: 9pt;
    }
    
    #ratesTbl1
    {
        display:block;
    }

    #ratesTbl2
    {
        display: none;   
    }
	
	.rateButton
    {
        font-size: 11pt;
    }

    .rateButtonSelected
    {
        font-size: 11pt;
    }
	
	#invoiceValueTxt
	{
		width:80%;
	}
	
	#leaseRentalTxt
	{
		width:80%;
	}
}

/* BLUE */
@media only screen and (max-width: 400px) 
{
    body
    {
        font-size: 12pt;
    }
    
	/*
    #buttonsDiv
	{
		background-color: #0000FF;
	} 
	*/
	
	#headerImg
    {
        width:200px
    }
    
    #logoDiv
    {
        width: 100%;
    }

    #loginMsgDivDiv
    {
        width: 100%;
    }
	
	.txt
    {
        font-size: 20pt;
    }
	
	.txt_m
    {
        font-size: 14pt;
    }

    .txt_mSmall
    {
        font-size: 12pt;
    }
    
    .txt_mSmaller
    {
        font-size: 10pt;
    }
    
    #ratesTbl1
    {
        display:block;
    }

    #ratesTbl2
    {
        display: none;   
    }
    
    .rateButton
    {
        font-size: 11pt;
    }

    .rateButtonSelected
    {
        font-size: 11pt;
    }
    
    #invoiceValueTxt
	{
		width:70%;
	}
	
	#leaseRentalTxt
	{
		width:70%;
	}
    
    #invoiceValueDiv
    {
        width: 47.5%;
        float: left;
        vertical-align:bottom;
    }
    
    #orDiv
    {
        width: 5%;
        float: left;
        vertical-align:bottom;   
    }
    
    #leaseRentalDiv
    {
        width: 47.5%;
        float: left;
        vertical-align:bottom;
    }
    
    #getQuoteBtnDiv
    {
        width: 100%;
        float: left;
        vertical-align:bottom;
        padding-top: 5px;
    }
    
    .savedQuoteButton
    {
        width: 280px;   
    }
}

/* ORANGE */
@media only screen and (max-width: 320px) 
{
    body
    {
        font-size: 11pt;
    }
    
	/*
    #buttonsDiv
	{
		background-color: Orange;
	}
	*/
	
	/*
	#getQuoteBtn
	{
	    position:fixed; 
	    top: 300px;
	    left: 0px
	}*/ 
      
    #invoiceValueDiv
    {
        width: 45%;
        float: left;
        vertical-align:bottom;
    }
    
    #orDiv
    {
        width: 10%;
        float: left;
        vertical-align:bottom;   
    }
    
    #leaseRentalDiv
    {
        width: 45%;
        float: left;
        vertical-align:bottom;
    }
    
    #getQuoteBtnDiv
    {
        width: 100%;
        float: left;
        vertical-align:bottom;
        padding-top: 5px;
    }
	
	.txt
    {
        font-size: 19pt;
    }
	
	.txt_m
    {
        font-size: 13pt;
    }

    .txt_mSmall
    {
        font-size: 11pt;
    }
    
    .txt_mSmaller
    {
        font-size: 9pt;
    }
    
    #ratesTbl1
    {
        display:block;
    }

    #ratesTbl2
    {
        display: none;   
    }
    
    .rateButton
    {
        font-size: 10pt;
    }

    .rateButtonSelected
    {
        font-size: 10pt;
    }
	
	#invoiceValueTxt
	{
		width: 90%;
	}
	
	#leaseRentalTxt
	{
		width: 90%;
	}
    
    .savedQuoteButton
    {
        width: 240px;   
    }
}

/* HIDE HEADER */
@media only screen and (max-height: 400px) 
{
	/*
	#headerDiv
	{
		display:none;
	}
	*/
	
	#saveQuoteBtn
	{   
		height: 50px;
	}
	
	#newQuoteBtn
    {   
        height: 50px; 
    }
	
	#contactTowerBtn
	{ 
		height: 50px;   
	}
	
	#savedQuotesBtn
	{ 
		height: 50px; 
	}
	
	#buttonsDiv
	{
		height: 75px;
	}
}