﻿#centerPageContainer{
	width:100%;

	.sectionTopBar{
		width:100%;
		background-color:#003366;
		height:3px;
		float:left;
		margin-top:10px;
	}

	.sectionTitleBar{
		width:100%;
		float:left;

		.title{
			font-size:1.8em;
			color:#336699;
			padding-left:10px;
			padding-top:10px;
			padding-bottom:10px;
			font-weight:bold;
		}
	}

	#accountInfoContainer{
		width:100%;
		float:left;
		padding-left:10px;
		padding-right:10px;
		margin-bottom:10px;
		height:150px;
		position:relative;

		#accountInfoLogo{
			width:150px;
			height:150px;
			background-color:#dddddd;
			text-align:center;
			float:left;

			span{
				color:#cccccc;
				font-size:6.0em;
				padding-top:40px;
			}
		}

		#accountInfoContent{
			float:left;
			margin-left:10px;
			width:700px;

			.accountInfoItem{
				float:left;
				font-size:1.4em;
				color:#336699;
				margin-right:30px;
				margin-bottom:5px;
				min-width:300px;

				.itemLabel{
					width:80px;
					float:left;	
					font-weight:bold;		
				}

				.itemText{
					float:left;
					margin-left:10px;
				}
			}
		}

		#accountInfoOperation{
			position:absolute;
			bottom:0px;
			right:0px;

			.opItem{
				float:left;
				width:100px;
				font-size:1.4em;
				color:#336699;
				cursor:pointer;

				&:hover{
					color:#FF9900;
				}
			}
		}
	}

	#orderInfoContainer{
		margin-top:20px;
		float:left;
		width:100%;

		.nav-tabs{
			border-bottom: 1px solid #cccccc;

			li{
				width:150px;
				text-align:center;
			}
		}

		.nav-tabs>li.active>a{
			color:#ffffff;
			background-color:#336699;
			cursor:default;

			&:hover{
				background-color:#336699;
				color:#ffffff;	
			}	
		}

		.nav-tabs>li>a{
			background-color:#cccccc;
			cursor:pointer;
			color:#336699;
				
			&:hover{
				background-color:#bbbbbb;
				color:#336699;	
			}	
		}

		.tabContainer{
			width:100%;
			padding:20px;
			font-size:1.4em;

			.titleLine{
				width:100%;
				float:left;
				
				.allSelect{
					float:left;
					width:100px;

					input{
						margin-top:2px;
					}

					div{
						float:left;
					}
				}

				.product{
					float:left;
					width:460px;
				}

				.operation{
					float:left;
					width:100px;
				}

				.price{
					float:left;
					width:200px;
				}
			}

			.itemContent
			{
				width:100%;
				float:left;
				margin-top:20px;
				padding:10px;
				background-color:#eeeeee;

				.itemCheckbox{
					float:left;
				}

				.itemProductLogo{
					float:left;
					margin-left:10px;
					cursor:pointer;
					-moz-box-shadow:4px 4px 6px rgba(20%,20%,40%,0.2);
					-webkit-box-shadow:4px 4px 6px rgba(20%,20%,40%,0.2);
					box-shadow:4px 4px 6px rgba(20%,20%,40%,0.2);
			

					img{
						width:100px;
						height:100px;
					}
				}

				.itemProductInfo{
					float:left;
					margin-left:10px;
					width:420px;
					word-break:break-all;

					.title{
						width:100%;
						float:left;
					}

					.summary{
						width:100%;
						float:left;
						margin-top:10px;
						line-height:20px;
						width:400px;	
					}
				}

				.itemPrice{
					float:left;
					width:140px;
				}

				.itemOperation{
					float:right;

					.opItem{
						padding-bottom:5px;
						cursor:pointer;
						
						&:hover{
							color:#FF9900;
							text-decoration:underline;		
						}
					}
				}
			}

			.itemOrderContent{
				.itemContent;
				padding:0px;
				background-color:#ffffff;
				border-color:#eeeeee;
				border-width:1px;
				border-style:solid;
				margin-top:10px;
				
				.topLine{
					width:100%;
					float:left;
					background-color:#eeeeee;
					padding:10px;
				}

				.content{
					width:100%;
					float:left;
					padding:10px;

					.itemProductInfo{
						width:160px;
					}

					.itemTime{
						width:100px;
						float:right;
					}
					
					.itemPayType{
						width:80px;
						float:right;	
					}
					
					.itemStatus{
						width:80px;
						float:right;	
					}

					.itemOperation{
						float:right;

						.opItem{
							padding-bottom:5px;
							cursor:pointer;
						
							&:hover{
								color:#FF9900;
								text-decoration:underline;		
							}
						}
					}					
				}
			}

			.orderStaticContainerBase{
				width:860px;
				background-color:#dddddd;
				height:40px;
				padding:10px;
				float:left;

				.opDelete{
					width:80px;
					float:left;
					cursor:pointer;
					&:hover{
						color:#FF9900;
						text-decoration:underline;		
					}	
				}

				.heightLight{
					color:#FF9900;	
					font-size:1.2em;
				}

				.selectProduct{
					float:right;
				}

				.total{
					float:right;
					margin-left:30px;
				}

				.opOrder{
					float:right;
					margin-left:30px;
					margin-right:10px;
					font-size:1.2em;
					cursor:pointer;
					&:hover{
						color:#FF9900;
						text-decoration:underline;		
					}
				}
				
			}

			#orderStaticContainer{
				.orderStaticContainerBase;
				float:left;
				margin-top:20px;
			}

			#orderStaticContainerPopup{
				.orderStaticContainerBase;
				position:fixed;
				bottom:0px;
			}

			.orderTitleLine{
				width:100%;
				float:left;
				background-color:#eeeeee;
				padding:10px;

				.product{
					float:left;
					width:285px;
				}

				.price{
					float:left;
					width:95px;
				}

				.serviceStartTime{
					float:right;
					width:100px;	
				}

				.serviceEndTime{
					float:right;
					width:100px;	
				}

				.payType{
					float:right;
					width:80px;	
				}

				.status{
					float:right;
					width:80px;	
				}

				.operation{
					float:right;
					width:60px;
				}
			}

		}
	}
}
