html
	color: #000
	height: 100%
	min-height: 100%
	//background: url("/assets/common/bg.gif") repeat fixed 0 0
body
	font-size: 14px 
	height: 100%
	min-height: 100%
	min-width: 900px
	background: url('/assets/common/sidebar_ie_bg.png') repeat-y 0 0
	&.loading *
		cursor: wait
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
	margin: 0
	padding: 0
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td, span
	cursor: default
a
	text-decoration: none
	cursor: pointer
	span
		cursor: pointer
a:hover
	text-decoration: none
input:focus,
select:focus,
a:focus
	outline: none
img, a img
	border: none
ul, li
	margin: 0
	padding: 0
hr
	height: 1px
	background: #aaa
	border: 0px
	padding: 0
	margin: 1em 0
.clear
	clear: both
div
	display: block
	margin: 0
	padding: 0
p 
	margin: 0
	padding: 0
h1,h2,h3,h4,h5,h6
	display: block
	font-weight: normal
.text,
input[type=text],
input[type=password],
textarea,
select
	box-sizing: border-box
	-moz-box-sizing: border-box
	-webkit-box-sizing: border-box
fieldset
	border: 0px
	margin: 0
	padding: 0
	display: block
.ff-item-bottom
	margin-bottom: 20px
.ff-item-top
	margin-top: 20px

@mixin bgcolor($bgcolor, $index)
	a
		color: $bgcolor
	.bgcolor#{$index}
		a
			color: $bgcolor
			&:hover
				color: darken($bgcolor, 9%)
		.table th
			background-color: lighten($bgcolor, 2%)
		.formbox
			.submit,
			input[type=submit]
				background-color: $bgcolor
				&:hover
					background-color: darken($bgcolor, 9%)
				&[disabled],
				&.disabled
					background: #999
					cursor: default
			.text:focus,
			input[type=text]:focus,
			input[type=password]:focus,
			textarea:focus,
			select:focus
				border-color: $bgcolor
		.layout_scrolltop,
		.layout_sidebar
			background-color: $bgcolor !important
		.HeaderContainer
			background-color: $bgcolor
			.userinfo ul li.site .sitebox
				border-color: #{$bgcolor} !important
		.login_warp .login_center .lg_main
			.left_product ul li
				background: $bgcolor
			.loginBox .send .loginBtn
				background: $bgcolor
		.syntaxhighlighter .gutter .line
			border-color: #{$bgcolor} !important
		.railsadmin
			.manipulate
				a
					&:hover
						background-color: lighten($bgcolor, 2%)
	.HeaderContainer .userinfo ul li.site .sitebox .list .bgcolor#{$index}
		background-color: $bgcolor !important

@include bgcolor(#800000, 1)
@include bgcolor(#DC143C, 2)
@include bgcolor(#C71585, 3)
@include bgcolor(#FF4500, 4)
@include bgcolor(#CD853F, 5)
@include bgcolor(#B8860B, 6)
@include bgcolor(#8B4513, 7)
@include bgcolor(#5C1F3E, 8)
@include bgcolor(#6A5ACD, 9)
@include bgcolor(#4B0082, 10)
@include bgcolor(#0072C6, 11)
@include bgcolor(#0066FF, 12)
@include bgcolor(#006400, 13)
@include bgcolor(#008A17, 14)
@include bgcolor(#008299, 15)
@include bgcolor(#008080, 16)
@include bgcolor(#2F4F4F, 17)
@include bgcolor(#708090, 18)
@include bgcolor(#333333, 19)
@include bgcolor(#000000, 20)



#body
	display: block
	height: 100%
	position: relative
	width: 100%
	min-width: 900px

.HeaderContainer
	display: block
	height: 40px
	width: 100%
	min-width: 900px
	//min-width: 768px
	//position: relative
	background-color: #fff
	position: fixed
	z-index: 1000
	.logo
		display: block
		height: 40px
		width: 150px
		float: left
		margin-left: 10px
		margin-right: 30px
		background: url('/assets/common/header_logo.png') no-repeat 0 0
		overflow: hidden
		text-indent: -999px
		&:hover
			background-color: rgba(0,0,0,0.2)
	.topbar
		list-style: none
		li
			float: left
			height: 40px
			list-style: none
			a
				display: inline-block
				*display: inline
				zoom: 1
				padding: 0 20px
				height: 40px
				font-size: 100%
				line-height: 38px
				color: #FFF
				&.current,&.current:hover
					background-color: rgba(0,0,0,0.2)
					background: url('/assets/common/black_opacity20.png') repeat 0 0\9
				&:hover
					background-color: rgba(0,0,0,0.12)
					background: url('/assets/common/black_opacity12.png') repeat 0 0\9
	.userinfo
		float: right
		ul
			list-style: none
			li
				float: left
				span.user
					float: left
					display: block
					padding: 0 10px
					height: 40px
					font-size: 100%
					line-height: 38px
					color: #FFF
			li.site
				position: relative
				a.set
					float: left
					display: block
					width: 30px
					height: 40px
					background: url('/assets/common/header_site.png') no-repeat center center
					//margin-right: 10px
					&:hover,&.current,&.current:hover
						background-color: rgba(0,0,0,0.2)
				&:hover a.set
					background-color: rgba(0,0,0,0.2)
					
				&:hover .sitebox,&.current .sitebox
					display: block
				.sitebox
					display: none
					position: absolute
					top: 40px
					right: 0px
					z-index: 55
					width: 136px
					background-color: #fff
					border-right: 2px solid #fff
					border-bottom: 2px solid #fff
					border-left: 2px solid #fff
					.list
						font-size: 0px
						padding: 17px 0 0 16px
						overflow: hidden
						zoom: 1
						.color
							display: inline-block
							*display: inline
							zoom: 1
							width: 20px
							height: 20px
							background: #ccc
							margin: 0 8px 8px 0
							*margin: 0 7px 8px 0
							overflow: hidden
							text-indent: -55px
							*float: left
							&:hover
								box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
					.hr
						border-bottom: 1px solid #666
						display: block
						width: 104px
						margin: 5px auto
						height: 0px
						font-size: 0px
					.sitesignout
						display: block
						padding: 5px 0
						a
							//border-top: 1px solid #666
							display: block
							padding: 7px 16px
							&:hover
								background: #f3f3f3
								//text-decoration: underline
							&:active
								background: #f3f3f3
.layout_scrolltop
	background: #333 url('/assets/common/backtop.png') no-repeat 0 0
	opacity: 1
	position: fixed
	right: 10px
	bottom: 10px
	visibility: hidden
	display: block
	width: 50px
	height: 50px
	z-index: 99
	cursor: pointer
	transition: 0.5s
	&:hover
		opacity: 0.8

.Container
	display: table-cell
	width: auto
	overflow: hidden
	// background: url('/assets/common/sidebar_ie_bg.png') repeat-y 0 0
	.sidebar
		background-color: #F3F3F3
		position: relative
		min-height: 100%
		width: 274px
		z-index: 5
		display: table-cell
		vertical-align: top
		float: left
		.searchbox
			height: 50px
			width: 274px
			position: relative
			margin-top: 40px
			form
				.search
					position: absolute
					right: 15px
					top: 10px
					bottom: 10px
					left: 15px
					background-color: #FFF
					border: 1px solid #BABABA
					height: 30px
					padding-right: 35px
					white-space: nowrap
					.text
						background: none
						border: 0 none
						color: #666
						height: 2em
						line-height: 32px
						font-size: 14px
						width: 100%
						//padding-left: 10px
						vertical-align: baseline
						padding: 6px 10px 5px
						*padding-top: 3px
						&:-moz-placeholder
							color: silver !important
						&::-webkit-input-placeholder
							color: silver
					.submit
						background: #FFF
						border: 0 none
						cursor: pointer
						height: 16px
						min-width: 0
						overflow: hidden
						padding: 0
						position: absolute
						right: 9px
						top: 0.6em
						width: 15px
						background: url('/assets/common/sidebar_search.png') no-repeat 0 0
		.section
			width: 274px
			h3
				color: #666
				display: block
				overflow: hidden
				padding: 10px 20px
			.link_list
				list-style: none
				li
					display: block
					overflow: hidden
					list-style: none
					a
						color: #666
						display: block
						padding: 8px 20px
						white-space: pre
						height: 16px
						font:
							size: 12px
						// &::after
						// 	position: absolute
						// 	right: 0
						// 	top: 0
						// 	width: 20px
						// 	height: 33px
						// 	background: #000
						// 	display: block
						// 	z-index: 5
						&.current,&.current:hover
							background-color: #D4D4D4
							color: #000
						&:hover
							background-color: #E7E7E7
							color: #333
						span
							display: block
							width: 235px
							white-space: pre
							text-overflow: ellipsis
							-o-text-overflow: ellipsis
							overflow: hidden
	.main
		display: table-cell
		width: auto
		min-width: 600px
		padding-top: 40px
		position: absolute
		*position: relative
		left: 274px
		*left: 0px
		right: 0
		top: 0
		overflow: hidden
		&::after
			content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
			visibility: hidden
			clear: both
			height: 0 !important
			display: block
			line-height: 0
			font-size: 36px
		.dochome
			background: url('/assets/common/home_center.png') no-repeat center center
			bottom: 0
			display: block
			left: 274px
			position: fixed
			right: 0
			top: 40px
		.description
			padding: 2em 3em 5em
			//background: #FFF
			a
				&:hover
					text-decoration: underline
			h1, .h1
				font-size: 300%
				font-style: normal
				color: #000
			h2, .h2
				font-size: 200%
				font-style: normal
			h3, .h3
				font-size: 167%
				font-style: normal
			h4, .h4
				font-size: 140%
				font-style: normal
			h5, .h5
				font-size: 120%
				font-style: normal
			h6, .h6
				font-size: 120%
				font-style: italic
			.methods .method h1,
			.methods .method .h1
				margin-top: 1em
			h2,h3,h4,h5,h6
				margin-top: 1.5em
			.name-list
				a
					display: inline-block
					*display: inline
					zoom: 1
					padding: 10px
			pre
				background: #ddd
				padding: 0.5em 0
				display: block
				white-space: pre-wrap
			p
				margin: 1em 0.4em
				line-height: 1.5
				word-wrap: break-word
				word-break: break-all  //强制英文单词断行
				// word-break: normal
				text-align: justify
				text-justify: distribute
			dt,dd
				display: inline-block
				*display: inline
				zoom: 1
				vertical-align: middle
				word-wrap: break-word
				break-word: break-all
				padding: 5px 10px
				p
					margin: 0
			dl
				margin: 8px 0
			dt
				font-weight: bold
				font-weight: normal
				width: 40%
				overflow: hidden
			dd 
				padding: 0 12px
				width: 52%
			ul
				margin: 1em
				list-style-type: disc
				li
					//display: block
					list-style-type: disc
			ol
				margin: 1em 1.5em
				list-style-type: decimal
				li
					list-style-type: decimal
			pre, code
				font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace
				font-size: 1em
			pre
				// background: #262626
				background: #EDEDED
				border: 0px dashed #999
				// color: white
				// color: #333
				// overflow: auto
				padding: 0.8em
				margin: 1em 0
				// font-family: monospace
				line-height: 24px
				span,p
					font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace
		.syntaxhighlighter
			background: #EDEDED !important
			padding: 10px 0 !important
		.syntaxhighlighter .gutter
			color: #333 !important
		.syntaxhighlighter .string, .syntaxhighlighter .string a
			color: #0A76D7 !important
		.syntaxhighlighter .plain, .syntaxhighlighter .plain a
			color: #333 !important
		.syntaxhighlighter,
		.syntaxhighlighter .line.alt1,
		.syntaxhighlighter .line.alt2
			background-color: #EDEDED !important
		// .syntaxhighlighter .gutter
		// 	color: #afafaf

.formbox
	fieldset
		vertical-align: top
	.submit,
	input[type=submit]
		padding: 6px 8px
		// background: red
		border: 0 none
		color: #FFF
		display: inline-block
		font-size: 14px
		font-weight: normal
		margin-right: 10px
		transition: all 0.5s ease 0s
		cursor: pointer
		outline: none
	label
		font-size: 14px
		margin-right: 10px
		cursor: pointer
		vertical-align: top
	.text,
	input[type=text],
	input[type=password],
	textarea,
	select
		background-color: #FFF
		border: 1px solid #CCC
		font-size: 14px
		color: #333
		margin-bottom: 10px
		margin-right: 10px
		padding: 4px 6px
		transition: all 0.5s ease 0s
		outline: none
		&[disabled],
		&.disabled
			border-color: #e9e9e9
			color: #999
	select
		padding: 3px 6px
	&.formitem
		width: 600px
		label
			display: block
			margin-bottom: 6px
		.text,
		input[type=text],
		input[type=password],
		textarea,
		select
			width: 100%
		textarea
			height: 200px
			width: 100%
			max-width: 100%
			min-width: 100%

.table
	width: 100%
	border-collapse: collapse
	margin-bottom: 15px
	font-size: 12px
	th
		padding: 10px
		font-weight: bold
		text-align: left
		// background: #576C82
		color: #FFF
		font-weight: normal
		padding: 3px 10px
		a.toggle
			display: block
			width: 12px
			height: 12px
			text-indent: -9999px
		&.first,
		&:first-child
			width: 30px
			text-align: left
		&.last
			width: 200px
	.checkbox
		margin-left: 10px
	tr
		&:hover td
			background: #ececec
		&.selection td,
		&.selection:hover td
			background: #ffc
	td
		padding: 5px 10px
		border-bottom: 1px solid #cfcfcf
		color: #333
		min-width: 80px
		&.first,
		&:first-child
			min-width: 30px
			width: 30px
		&.last
			text-align: right
			a
				padding: 0 5px
.railsadmin
	.layout_scrolltop
		bottom: 7px
		right: 15px
		width: 25px
		height: 25px
		background-image: url('/assets/common/ra_backtop.png')
	.span4
		width: 150px
	.span3
		width: 200px
	.tablescroll
		max-width: 100%
		overflow-x: auto
	.check_edit
		margin-bottom: 5px
		vertical-align: top
		input[type=text],select
			width: 90%
		& > div
			display: inline-block
			vertical-align: top
	.main .section
		padding: 0px 20px 100px
		h1
			margin: 20px 0
.pagination
	display: block
	font-size: 12px
	ul
	li
		display: block
		list-style: none
		float: left
		a
			display: block
			padding: 0 5px
			&:hover
				text-decoration: underline
				color: #000
		&.active a
			color: #000
			background: #ececec
.ra_tools
	position: fixed
	left: 274px
	right: 0
	bottom: 0
	height: 40px
	min-width: 600px
	background-color: #fff
	// border-top: 1px solid #ccc
	// box-shadow: 0 0 5px #000000
	z-index: 99
	.pagination
		display: block
		position: absolute
		top: 11px
		right: 36px
	.fadeout
		z-index: 99
		display: block
		display: none\9
		position: fixed
		left: 274px
		right: 0
		bottom: 40px
		height: 40px
		pointer-events: none
		background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0), #FFFFFF) repeat 0 0
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255,1)))
	.tools_box
		border-top: 1px solid #ccc
		height: 40px
		margin: 0 15px
		position: relative
		text-align: left
		.mlRange
			display: inline-block
			padding-top: 10px
			white-space: nowrap
			text-overflow: ellipsis
			-o-text-overflow: ellipsis
			overflow: hidden
			text-align: left
			max-width: 200px
			font-size: 12px
			color: #333
			position: absolute
			left: 125px
			span
				display: inline-block
				padding: 2px 10px 2px 2px
				font-size: 12px
				color: #333
				white-space: nowrap
				text-overflow: ellipsis
				-o-text-overflow: ellipsis
				overflow: hidden
				max-width: 200px
			em
				font-size: 12px
				font-style: normal
				padding: 0px 3px
				color: #000
		.manipulate
			display: block
			position: absolute
			left: 0
			*left: 100px
			top: 5px
			font-size: 0
			z-index: 5
			// background-color: #EFEFEF
			a
				display: inline-block
				// padding: 2px 5px
				// background: #333
				// color: #333
				margin-right: 1px
				text-align: center
				height: 25px
				width: 26px
				font-size: 0
				text-indent: -99px
				overflow: hidden
				background-repeat: no-repeat
				// background-color: rgba(0,0,0,0.2)
				background-image: url('/assets/common/ra_tools.png')
				&.tool_01
					background-position: 3px 7px
					&:hover
						background-position: 3px -29px
				&.tool_02
					background-position: -24px 7px
					&:hover
						background-position: -24px -29px
				&.tool_03
					background-position: -50px 7px
					&:hover
						background-position: -50px -29px
				&.tool_04
					background-position: -77px 7px
					&:hover
						background-position: -77px -29px