// ----------==========:[  VARIABLES  ]:==========---------- //

$text-color: #444
$divline-color: #888


// ----------==========:[  COMMON/LOGIN ITEMS  ]:==========---------- //

body
	font: normal 15px/20px sans-serif
	color: $text-color
	background: #fff url(/_/img/Bckgrd.gif) left top repeat

#page
	width: 900px
	margin: 0 auto
	position: relative

#display-page
	@extend #page
	background: #fff
	padding: 25px
	border: 1px solid #ddd

.header
	margin: 0 0 20px 0
	padding: 1em 0 1em 146px
	border-bottom: 6px double $divline-color
	background: transparent url(/assets/img/sabc.gif) left center no-repeat

h1
	margin: 0
	font-size: 26px

h2
	margin: 0
	font-size: 16px

hr
	margin: 20px 0

input
	font: normal 15px/15px sans-serif
	border: 1px solid #444
	border-color: #bbb #aaa #666 #999
	border-width: 1px 1px 2px
	padding: 3px
	text-transform: uppercase
	background-color: #f8f8f8
	outline: none
	&:focus
		background-color: #ffd
	&.error
		background-color: #fdd
		border-color: #eaa #d99 #a55 #c88

div#errors
	background: #fdd
	padding: .5em 0
	margin: .5em 0 1em
	p
		margin: 0
		text-align: center
		font-weight: bold

form#login
	padding: 6px 2.5%
	background: #fff
	float: left
	width: 30%

div#claims-message
	p
		text-align: center

form#reim
	width: 100%
	margin-top: 1.5em

	small
		margin: 0

	table
		width: 100%
		&.employee-data td.label
			width: 30%
		&.expense-data
			margin: 1em auto 0
			td.label
				width: 44%
			td.input
				width: 12%
			input
				width: 5em
			td.hint
				width: 44%
				font-size: 10px
				line-height: 11px
		&.upload-receipts td.label
			width: 40%
		&.attachment-val
			width: 70%
			margin: 1em 14% 0
			td.label
				width: 15%
			td.input
				width: 1%
			input
				width: 1em
			td.hint
				width: 84%
				font-size: 11px
				line-height: 12px
		&.check-pickup
			width: 70%
			margin: 1em 14% 0
			td.label
				width: 30%
			td.input
				width: 1%
			input
				width: 1em
			td.hint
				width: 69%
				font-size: 11px
				line-height: 12px

	label
		display: block
		text-align: right
		text-transform: uppercase
		font-size: 13px
		font-weight: bold
		line-height: 22px
		margin-right: 4px

	tr.planyear
		text-align: center
		td
			padding-bottom: 8px
		label
			display: inline
		input
			width: 7em

	.attachment-directions
		text-align: center
		p, h3
			margin: 0


	input
		&#form_company_name, &#form_employee_name, &#form_employee_email
			width: 60%
		&#form_employee_ssn
			width: 25%
		&#form_employee_signature
			width: 100%
		&#form_signed_date
			width: 60%
			text-align: center
			border-color: transparent transparent #666
			background: transparent

		&#form_employee_phone_first3, &#form_employee_phone_mid3
			width: 2.5em
			text-align: center
		&#form_employee_phone_last4
			width: 3em
			text-align: center
		&#form_employee_phone_ext
			width: 3.5em

		&.receipt
			border: 0
			background: transparent

	small.disclaimer, small.attachment-val
		display: block
		line-height: 1.1
		margin: 2em 15% 1em

	a.drop-file
		color: #e66
		text-decoration: none
		padding: 1px .3em
		&:hover
			background-color: #e66
			color: #fff

div.buttons
	text-align: center
	margin: 20px 0


ul
	list-style: none
	padding-left: 0
	margin-left: 0
	label
		display: block
		float: left
		width: 7em
		padding-top: 4px
		margin-right: .6em
		font-weight: bold

li
	margin: .35em 0



#notice
	border: 3px double $text-color
	margin: 13px 0 13px 36.5%
	padding: 13px
	margin-bottom: 6em

.footer
	clear: both
	padding-top: 1em
	border-top: 2px solid $divline-color
	li
		float: left
		width: 19%
		margin: 0 0.5%
		text-align: center

.clearfix
	height: 1px
	clear: both

#verisign
	position: absolute
	left: 0
	top: 105%



// ----------==========:[  BALANCES DISPLAY PAGE  ]:==========---------- //


#data
	font-size: 15px
	h1, h2, h3
		text-align: center
	h1
		margin: 0
	h2
		margin: 0 0 1em
	table
		width: 100%
		&.singleyear
			width: 54%
			margin: 0 23%
	ul
		text-align: center
		margin: 1.5em 0


td, th
	&.spacer
		width: 25px
	&.currency
		text-align: right
	&.checkno, &.date
		text-align: center

#balances
	th, td
		text-align: right
#balances, #checks
	th
		padding-bottom: 2px
		border-bottom: 1px solid #ddd
	td
		padding-top: 3px

#balances-display
	small
		display: block
		text-align: center
		margin: 2em 0


#errorpage

	padding: 2em
	margin: 4em 150px
	border: 1px solid #666
	background: #fff

	h2
		font-size: 85%
		color: #888
		text-transform: uppercase
		margin: 0

	h1
		margin-top: 0