/* wrapper container */
.wrapper {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	font: 12px arial, sans-serif;
}

.wrapper h1{ text-align: center; font-size: 25px;}
.header{ 
	margin: 0 auto;
	margin-bottom: 5px;
	text-align: center; 
	font-size: 25px;
	font-weight: bolder;
}

/* seperate each div with item */
.item {
	width: 70%;
	max-width: 580px;
	min-width: 300px;
	border: 3px solid #000000;
	margin: 0px auto 13px; 
	padding: 0 10px 10px 10px;
	font-size: 15px;
	font-weight: 550;
}
.item h2 {
	font-size: 22px;
	margin-top: -1px;
}
.item h2 span{ 
	margin-left: 100px;
}
.item table {
	width: 95%;
	max-width: 550px;
	min-width: 300px;
}
.item table td{
	vertical-align: middle;
}
.item table td.left{
	text-align: left;
}
.item table td.right {
	text-align: right;
}
/* class for input text */
.textBox {
	border: 1px solid #000000;
    width: 100px;
    height: 20px;
    padding-left: 15px;
    padding-right: 2px;
    text-align: right;
}
/* append, prepend currencySymbol */
.prepend, .append{
	position: relative;
}
.prepend .currencyinput{
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 5px;
	margin-top: 3px;
}
.append .currencyinput{
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 3px;
	margin-top: 2px;
}
.append .textBox {
	padding-left: 1px;
	padding-right: 17px;
}
/* big input box */
.big {
	border: 2px solid #000000;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	width: 180px;
	height: 50px;
}
/* Print button css */
a.btnPrint {
		padding: 10px 40px 10px 40px;
		text-decoration: none;
        color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(66, 184, 221);
}
.btnPrint:hover {
	background: rgb(55, 175, 210);
}
.center {
	margin: 0 auto;
	text-align: center;
}
.space-top10 { 
	margin-top: 20px;
	margin-bottom: 15px;
}

@media only screen and (max-width : 550px) {
	 * { font-size: 13px!important;}
	 h1{ font-size: 20px!important;}
	h2{ font-size: 18px!important;}
	.big {
		 width: 100px!important;
		 height: 20px!important;
	}
}

@media only screen and (max-width : 380px) {
	.item {  width: 95%!important; min-width: 290px!important; } }
	 table { width: 95%!important; min-width: 250px!important; }
	 .wrapper { width: 95%!important; min-width: 300px!important; }
}
@media only screen and (max-width : 358px) {
	 .wrapper { margin: 0!important; width: 90%!important;}
}