body
{
	text-align:center;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
}
div#wrap
{
	width:1000px;
	margin:0 auto;
}
div#headlogo{
	float:left;
	width:800px;
	height:55px;
	margin:0;
	padding:0px 0px 5px 0px;
	text-align:left;
	background:url(../images/headerbgnotext.png) left top no-repeat;
/*	border-bottom:thin #CCCCCC solid;*/
}
div#iplogo
{
	float:left;
	width:800px;
	height:87px;
	margin:0;
	padding:0;
	text-align:left;
/*	background:url(../images/ipFlatLogo.png) left top no-repeat;*/
}
div#headerlink{
	float:left;
	width:560px;
	height:15px;
	margin:0;
	padding:10px 0px 5px 25px;
	text-align:left;
/*	background-color:#3300ff;*/
}
div#headerlink .link
{
	width:120px;
	height:15px;
	float:left;
	display:block;
	text-align:center;
	margin:0;
	padding:0;
	text-decoration:none;
	border-right:solid 2px #ffe01c;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color:#ffe01c;
}
div#headerlink .link a
{
/*	width:120px;
	height:15px;
	display:block;
	text-align:center;
	margin:0;
	padding:0;*/
	text-decoration:none;
	color:#ffe01c;
}
div#headerlink .link a:hover
{
/*	width:120px;
	height:15px;
	display:block;
	text-align:center;
	margin:0;
	padding:0;*/
	text-decoration:none;
	color:#ffffff;
}

div#headerbottom{
	float:left;
	width:700px;
	height:25px;
	margin:0;
	padding:2px 0px 0px 25px;
	text-align:left;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bolder;
	color:#ffe01c;
}
div#headerbottom span a
{
	text-decoration:none;
	color:#ffe01c;
}
div#headerbottom span a:hover
{
	text-decoration:none;
	color:#ffffff;
}

div#headerright{
	float:right;
	width:200px;
	height:15px;
	margin:0;
	padding:10px 10px 5px 0px;
	text-align:right;
	color:#FFFFFF;
	font-size:1em;
	font-style:italic;
	font-weight:bold;
}
.separatorline{
	float:left;
	width:800px;
	height:1px;
	border:0px;
	text-align:center;
/*	padding-left:200px;*/
	padding-bottom:5px;
}
.pagetitle{
	width:1020px;
	float:left;
	text-align:center;
}
.pagetitle .maintitle{
	color:#4c4b4b;
	font: 14px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
}
.pagetitle .subtitle{
	color:#4c4b4b;
	font: 12px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
}
.tabtitle{
	width:600px;
	float:left;
	text-align:center;
}
.tabtitle h3{
	color:#4c4b4b;
	font: 14px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
}

div#footer{
	float:left;
	width:100%;
	height:36px;
	margin:0;
	padding:0;
	text-align:center;
/*	background:url(../images/footerbg.png) left top no-repeat;*/
}
div#leftpanel{
	width:240px;
	padding:10px 0px 10px 5px;
	float:left;
	border-right:1px #ccc dotted;
}
div#leftcontent
{
	clear:both;
	float:left;
	width:235px;
	border:1px #ccc ridge;
	}
.perbook
{
	float:left;
	width:235px;
	background-color:#FBF3B7;
	border-bottom:1px #FBF3B7 ridge;
	border-top:ridge 1px #cccccc;
}
.perorder
{
	float:left;
	width:235px;
	background-color:#A6C6F4;
	border-bottom:1px #A6C6F4 ridge;
}
.pertotal
{
	float:left;
	width:235px;
	background-color:#E7E7E7;
}
.infotitle{
	clear:both;
	width:235px;
	color:#4c4b4b;
	font: 12px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
	text-align:center;
}	
.orderinfo{
	display:block;
	float:left;
	width:100px;
	text-align:right;
	color:#4c4b4b;
	font: 9px verdana, arial, tahoma, helvetica, sans-serif;
	padding:3px 0px 3px 0px;
}	
.orderinfolabel{
	float:left;
	display:block;
	width:80px;
	padding-left:5px;
	text-align:left;
	color:#4c4b4b;
	font: 10px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
	padding:3px 0px 3px 0px;
}
.costholder
{
	float:left;
	width:235px;
	border-bottom:1px #ccc dotted;
}
.costname{
	display:block;
	float:left;
	width:100px;
	height:12px;
	text-align:right;
	color:#4c4b4b;
	font: 9px verdana, arial, tahoma, helvetica, sans-serif;
	padding:2px 0px 2px 0px;
}

.costlabel{
	float:left;
	display:block;
	width:125px;
	height:12px;
	text-align:left;
	color:#000000;
	font: 10px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
	text-align:right;
	padding:2px 0px 2px 5px;
}
.costlabeld {
    float: left;
    display: block;
    width: 230px;
    /*height: 12px;*/
    text-align: center;
    color: #000000;
    font: 10px verdana, arial, tahoma, helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 2px 0px 2px 0px;
}
.costnamep{
	display:block;
	float:left;
	width:130px;
	height:12px;
	text-align:right;
	color:#4c4b4b;
	font: 9px verdana, arial, tahoma, helvetica, sans-serif;
	padding:2px 0px 2px 0px;
}	
.costlabelp{
	float:left;
	display:block;
	width:45px;
	height:12px;
	text-align:left;
	color:#000000;
	font: 10px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
	padding:2px 0px 2px 5px;
}


div#rightpanel{
	width:740px;
	float:left;
	padding:10px 4px 10px 5px;
	/*border-left:1px #ccc dotted;*/
	}
.lineofname{
	display:block;
	float:left;
	width:200px;
	height:30px;
	text-align:left;
	color:#4c4b4b;
	font: 11px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
	line-height:1.25em;
}
.lineofcontrol{
	display:block;
	float:left;
/*	position:relative;
	top:-31px;
	left:205px;*/
	width:510px;
	height:30px;
	text-align:left;
	color:#4c4b4b;
	font: 11px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
}
	
.lineofspes{
	width:740px;
	height:auto;
	float:left;
/*	position:relative;*/
	text-align:left;
	color:#4c4b4b;
	font: 11px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
	padding:5px 5px 2px 5px;
}
.lineofspes a{
	color:#302c68;
	text-decoration:none;
	}
.lineofspes a:hover{
	color:#302c68;
	text-decoration:none;
	}
.lineofspes a:active{
	color:#302c68;
	text-decoration:none;
	}

.lineofinfo{
	width:740px;
	text-align:justify;
	display:none;
	border-top:1px #fff dotted;
	border-bottom:1px #fff dotted;
/*	text-indent:20px;
	background-color:#ccc;
	padding-left:20px;
	color:#302c68;*/
	font: 11px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
	}
.lineofinfo span
{
	width:740px;
	float:left;
	padding:5px 2px 5px 2px;
	text-indent:20px;
	line-height:20px;
	background-color:#E7E7E7;
	color:#302c68;
}
.imgbinding{
	float:left;
	border:none;
	margin-top:10px;
	margin-left:5px;
	height:112px;
	width:120px;
	}
.mkText{
	width:110px;
	float:left;
	text-align:center;
	}
.membercontent{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
	}
.membertext{
	font: 12px verdana, arial, tahoma, helvetica, sans-serif;
	text-indent:20px;
	}
.membertext span{
	float:left;
	text-align:justify;
	text-indent:20px;
	line-height:20px;
	margin-left: 0px;
}
.repeatTitle{
	color:#4c4b4b;
	font: 12px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bold;
}
.nolink
{
	text-decoration:none;
}
.linebreak
{
	width:580px;
	height:3px;
	padding:0;
	float:left;
/*	border-top:1px #ccc solid;*/
	}
div#priceholder{
	display:none;
	width:580px;
	background-color:#FFFFCC;
	border:groove 1px #ccc;
	text-align:center;
	color:#4c4b4b;
	font: 11px verdana, arial, tahoma, helvetica, sans-serif;
	font-weight:bolder;
}
.font4{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#4c4b4b;
	font-size: 18px;
	font-weight:lighter;
}
.font3{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#4c4b4b;
	font-size: 16px;
	font-weight:lighter;

}
.font2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#4c4b4b;
	font-size: 14px;
	font-weight: normal;
}
#loadingOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.book {
	width: 60px;
	height: 45px;
	position: relative;
	perspective: 1000px;
}

.page {
	width: 60px;
	height: 45px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: left;
	transform-style: preserve-3d;
	animation: flip 1.2s infinite ease-in-out;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

	.page:nth-child(2) {
		animation-delay: 0.2s;
	}

	.page:nth-child(3) {
		animation-delay: 0.4s;
	}

@keyframes flip {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(-180deg);
	}

	100% {
		transform: rotateY(-360deg);
	}
}