@font-face {
	font-family: 'raleway';
	src: url('fonts/Roboto-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ralewayLight';
	src: url('fonts/Roboto-Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'os';
    src: url('fonts/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'osBold';
    src: url('fonts/opensans-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html
{
	height: 100%;
	width: 100%;
}

body
{
	margin: 0px;
	padding: 0px;
	/* 生产原站也是 #333；侧栏同色。主内容区 .mainContent 自行铺 #ececec */
	background: #333;
	font-family: 'os', Verdana, Geneva, sans-serif;
	font-size: 87.5%;
	margin: 0;
	color: #333;
	width: 100%;
	height: 100%;
}

a
{
	text-decoration: none;
	color: #333;
}

h1, h2, h3, h4, h5
{
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

h1
{
	font-size: 36px;
}

strong
{
	font-family: 'osBold', Verdana, Geneva, sans-serif;
	font-weight: normal;
}

.tablePanel
{
	background: #FFF;
	border-radius: 5px;
	padding:20px;
}

.tablePanel td
{
	padding:20px;
}

.clear
{
	clear: both;
}

.altRow
{
	background: #fafafa;
}

.unpaidBox, .paidBox, .sentBox
{
	padding: 5px;
	text-align: center;
	border-radius: 4px;
}

.unpaidBox
{
background: #FF5137; 
color:#fff
}

.paidBox
{
background: #FFD737; 
color:#fff
}

.sentBox
{
background: #AAFE38; 
color:#fff
}

.loginContainer
{
	width: 480px;
	margin: 0 auto;
	background: url('../images/transBg.png');
	border-radius: 25px;
	padding: 10px;
	box-shadow: 1px 1px 1px #ccc;
}

.loginBox
{
	color: #fff;
	padding: 30px;
	background: url('../images/loginBg.jpg') #333;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	float: left;
	height: 250px;
	width: 246px;
	
}

.loginInput
{
	padding: 10px;
	font-size: 12px;
	border-radius: 6px;
	height: 20px;
	border: none;
	background: #666;
	width: 222px;
	box-shadow: 1px 1px 5px #333;
	color: #fff;
	
}

.loginText
{
	font-size: 11px;
	color: #ccc;
}

.loginText placeholder
{
	color: #fff;
}


.loginButton
{
	float: right;	
	height: 310px;
	background: #fff;
	width: 174px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	vertical-align: middle;
}

.loginButton img
{
	vertical-align: middle;
	
}

.loginFooter
{
	text-align: center;
	font-size: 10px;
	margin-top: 10px;
	color: #333;
}


.leftNavigation
{
	background: #333;
	width: 10%;
	float: left;
	min-height: 500px;
}

.leftNavigationItem
{
	border-top: 1px solid #444;
	border-bottom: 1px solid #222;
	background: #3a3a3a url('../images/leftBg.jpg');
	color: #999;
	text-shadow: 0px 1px 1px #111;
	text-align: center;
	padding: 10px;
	font-family: 'raleway', Arial;
	font-weight: bold;
	font-size: 11px;
}

.leftNavigationItem:hover
{
	background: #444;
}

.leftNavigationItemActive
{
	border-top: 1px solid #222;
	border-bottom: 1px solid #111;
	background: url('../images/leftActive.jpg') #222 right no-repeat;
	color: #999;
	text-shadow: 0px 1px 1px #111;
	text-align: center;
	padding: 10px;
	font-family: 'raleway', Arial;
	font-weight: bold;
	font-size: 11px;
}

.leftItemAvatar
{
	width:64px;
	border-radius: 4px;
}

.leftItemAvatarTitle
{
	color: #79B4D7;
}

.leftItem
{
	width: 42px;
}

.mainContent
{
	float: right;
	width: 90%;
	background: #ececec;
	min-height: 1080px;
}

.centralContent
{
	padding: 30px;
	font-size: 12px;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

.topBar
{
	background: #f3f3f3 url('../images/topBarBg.jpg');
	height: 101px;
	border-bottom: 1px solid #ddd;
	padding-left: 10px;
}

.topBar img
{
	width: 24px;
	vertical-align: middle;
	margin-right: 10px;
}


.topItem
{
	width: 150px;
	border-radius: 4px;
	background: #8d8d8d url('../images/topItemBg2.png');
	padding: 15px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 24px;
	border: 1px solid #999;
	color: #fff;
	text-shadow: 1px 1px 1px #666;
	font-family: 'ralewayLight',Verdana, Geneva, sans-serif;
}

.topItem:hover
{
	width: 150px;
	border-radius: 4px;
	background: #3d8ec4 url('../images/topItemBg.png');
	padding: 15px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 24px;
	border: 1px solid #4891C4;
	color: #fff;
	text-shadow: 1px 1px 1px #4891C4;
	font-family: 'ralewayLight',Verdana, Geneva, sans-serif;
}

.topItemActive
{
	width: 150px;
	border-radius: 4px;
	background: #3d8ec4 url('../images/topItemBg.png');
	padding: 15px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 24px;
	border: 1px solid #4891C4;
	color: #fff;
	text-shadow: 1px 1px 1px #4891C4;
	font-family: 'ralewayLight',Verdana, Geneva, sans-serif;
}


#textbox, .textbox
{
	border-radius: 4px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	font-family: verdana;
	color: #333;
}

#searchBox
{
	border-radius: 4px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	font-family: verdana;
	color: #333;
}

.headerText
{
	color: #79B4D7;
	font-family: 'osBold', Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 18px;;
}

.smallText
{
	color: #666;
	font-size: 12px;
	font-family: 'os', Verdana, Geneva, sans-serif;
}

.normalText
{
	font-size: 11px;
	color: #666;
	font-family: Verdana, Geneva, sans-serif;
}

.labelInfo {
	font-size: 90%;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
	margin-top: 5px;
	margin-bottom: 5px;
	display: block;
	color: #999;
}

.itemPad
{
	background: #fafafa;
	padding: 20px;
	box-shadow: 1px 1px 3px #eee;
}

.successBox
{
	background: #DCEFC2;
	border: 1px solid #9DD252;
	padding: 20px;
	color: #00881C;
	margin-top: 15px;
	margin-bottom: 10px;
	border-radius: 4px;
}

.errorBox
{
	background: #FFBFBF;
	border: 1px solid #F70000;
	padding: 20px;
	color: #F70000;
	margin-top: 15px;
	margin-bottom: 10px;
	border-radius: 4px;
}


.successBox img
{
	vertical-align: middle;
	margin-right: 10px;
}


.addButton
{
	background: #3d8ec4 url('../images/topItemBg.png');
	border: 1px solid #4891C4;
	color: #fff;
	display: block;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

.inputButton
{
	background: #3d8ec4 url('../images/topItemBg.png');
	border: 1px solid #4891C4;
	color: #fff;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

.addButton:hover, .inputButton:hover
{
	background: #6CB6FF;
}


.addButton img
{
	vertical-align: middle;
}

#logoutButton
{
	background: #900;
	color: #fff;
	display: inline-block;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
	border: none;
}
.modaltrigger
{
	background: url('../images/topItemBg.png') #4891C4;
	color: #fff;
	padding: 10px;
	margin-right: 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	width: 40px;
	display: block;
	float: left;
	margin-bottom: 2px;
	
}

.modLink
{
	background: url('../images/topItemBg.png') #4891C4;
	color: #fff;
	padding: 10px;
	margin-right: 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	width: 40px;
	display: block;
	float: left;
	margin-bottom: 2px;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

.modLink:hover
{
	background: #4891C4;
	cursor: pointer;
}

.deleteLink
{
	background: #900;
	color: #fff;
	padding: 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	width: 40px;
	display: block;
	float: left;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}


.modButton
{
	background: #333;
	color: #fff;
	display: inline-block;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
}

.delButton
{
	background: #900;
	color: #fff;
	display: inline-block;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
}

.blueButton
{
	background: #4891C4;
	color: #fff;
	padding: 10px;
	border: none;
	border-radius: 4px;
}

.redButton
{
	background: #900;
	color: #fff;
	padding: 10px;
	border: none;
	border-radius: 4px;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}


.categoryResult
{
	font-size: 12px;
	background: #ffffff;

}

.categoryResultAlt
{
	background: #f7f7f7;

}

#panel
{
	display: none;
	padding: 20px;
	background: #fff;
	border-radius: 6px;
}

#panel1, #panel2, #panel3, #panel4, #panel5, #panel6, #panel7, #panel8, #panel9, #panel10
{
	padding-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	display: none;
	border-left: 5px solid #666;
	background: #fff;
}

.commonPanel
{
	border-radius:5px;
	padding: 20px;
	background:#fff;
}

.submit
{
	background: #3d8ec4 url('../images/topItemBg.png');
	border: 1px solid #4891C4;
	color: #fff;
	padding: 10px;
	border-radius: 6px;
	font-family: 'ralewayLight', Verdana, Geneva, sans-serif;
}

.submit:hover {
        
        background: #6CB6FF;
    }

@media only screen and (min-width: 1400px) and (max-width: 2560px)
{
	.leftNavigation
	{
		width: 7%;
	}
	
	.mainContent
	{
		width: 93%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.leftNavigation
	{
		width: 15%;
	}
	
	.mainContent
	{
		width: 85%;
	}
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
	.leftNavigation
	{
		display: none;
	}
	
	.mainContent
	{
		width: 100%;
		float: none;
	}
}


.autocomplete-w1 { 
	background:url(img/shadow.png) no-repeat bottom right;
	position:absolute;
	top:0px;
	left:0px;
	margin:6px 0 0 6px;
	/* IE6 fix: */ 
	_background:none; _margin:1px 0 0 0;
} 



.autocomplete { 
	border:1px solid #999;
	background:#FFF;
	cursor:default; 
	text-align:left; 
	max-height:350px; 
	overflow:auto; 
	margin:-6px 6px 6px -6px; 
	/* IE6 specific: */ 
	_height:350px; 
	_margin:0; 
	_overflow-x:hidden; 
 } 
.autocomplete .selected 
{
	background:#F0F0F0; 
} 
.autocomplete div 
{ 
	padding:2px 5px; 
	white-space:nowrap; 
	overflow:hidden; 
} 
.autocomplete strong 
{ 
font-weight:normal; 
color:#3399FF; 
} 

#query
{
	border-radius: 4px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	font-family: verdana;
	color: #333;
}