// ------======:[  V A R I A B L E S  ]:======------ //

$page-backgound: #fff
$sabc-red: #932
$button-color: #ddd
$button-text-color: #222
$callout-color: #eeee99
$side-border-width: 30px



// ------======:[  T H E  B A S I C S  ]:======------ //

header,article,footer,section
	display: block
html
	background: #555 url(/_/img/cf-background.jpg) fixed left top repeat
body
	color: #444
	font: normal 15px/1.3 sans-serif
	box-shadow: 0 0 20px #222
	background: #fff
a
	color: #822
	text-decoration: none
	&:hover
		text-decoration: underline



// ------======:[  M I X I N S  ]:======------ //


=background-borders( $background-color )
	background-color: $background-color
	+left-border($background-color,$side-border-width)
	+right-border($background-color,$side-border-width)
=left-border( $background-color , $border-width )
	border-left: $border-width solid $background-color - #111
=right-border( $background-color , $border-width )
	border-right: $border-width solid $background-color - #111


=callout-color( $the-color )
	background : $the-color
	border:
		top: 1px solid $the-color - #111
		bottom: 1px solid $the-color - #222

=button-gradient( $button-color , $border-color , $text-color )
	padding: 5px 8px
	color: $text-color
	background-color: $button-color
	cursor: pointer
	border:
		style: solid
		width: 1px
		color: $border-color+#666 $border-color $border-color $border-color+#555
		radius: 4px
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{$button-color + #111111}', endColorstr = '#{$button-color - #111111}')
	background: -webkit-gradient(linear, left top, left bottom, from($button-color + #111111), to($button-color - #111111))
	background: -moz-linear-gradient(top, $button-color + #111111, $button-color - #111111)
	&:hover
		color: $text-color - #222
		text-decoration: none
		background: $button-color - #111
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{$button-color + #101010}', endColorstr = '#{$button-color - #181818}')
		background: -webkit-gradient(linear, left top, left bottom, from($button-color + #101010), to($button-color - #181818))
		background: -moz-linear-gradient(top, $button-color + #101010, $button-color - #181818)
	&:active
		border-color: $border-color $border-color+#555 $border-color+#666 $border-color
		background: $button-color - #111111
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{$button-color - #111111}', endColorstr = '#{$button-color}')
		background: -webkit-gradient(linear, left top, left bottom, from($button-color - #111111), to($button-color))
		background: -moz-linear-gradient(top, $button-color - #111111, $button-color)


// ------======:[  B U T T O N  L I N K S  ]:======------ //

a.btn, button, input[type="submit"]
	+button-gradient($button-color,$button-color - #777,$button-text-color)


// ------======:[  S E C T I O N S  ]:======------ //

// ------======:[  The Main Page  ]:======------ //

body
	background: #777
	width: 960px
	margin: 30px auto 90px auto



// ------======:[  SABC Header and Footer ]:======------ //

header#sitehead, footer#sitefoot
	+background-borders($sabc-red)
	color: #fff

header#sitehead
	position: relative
	padding: 0 30px
	h1
		font-weight: normal
		line-height: 1
		margin: 0
		padding: 23px 0 13px 75px
		font-size: 25px
		background: transparent url(../img/sabc-logo-negative-60x30.png) left center no-repeat

footer#sitefoot
	padding: 18px 0
	color: #fff
	font-size: 165%
	height: 30px
	background: $sabc-red url(../img/sabc-logo-negative-60x30.png) center center no-repeat
	text-indent: -9999px

article
	+background-borders(#fff)
	padding: 30px

article#login
	h1, form, p
		width: 466px
		margin: 1em auto
	h1
		text-align: center
	form
		border: 1px solid #aaa
		border-width: 1px 0
		padding: 16px 0 8px
		margin: 1.5em auto
		dt
			display: block
			float: left
			width: 120px
			text-align: right
			font-weight: bold
			clear: left
			padding-top: 5px
		dd
			margin-left: 128px
			padding-bottom: 8px
			&.plain
				padding:
					top: 5px
					left: 6px
					bottom: 10px
		input
			font-size: 16px
			font-family: sans-serif
			&.text
				padding: 6px 0 6px 4px
				background: #f6f6f6
				line-height: 1
				height: 16px
				width: 300px
				margin-bottom: 1px
				border: 1px solid #aaa
				border-left-color: #ccc
				border-bottom: 2px solid #000
				transition: background 200ms linear
				-moz-transition: background 200ms linear
				-webkit-transition: background 200ms linear
				-o-transition: background 200ms linear
				&:focus
					background: #ffffcc
					outline: none
					border-color: #aa8 #aa8 #860 #aa8
	p#notice
		width: 466px
		font-size: 12px


article#data
	text-align: center
	h1, h2
		margin: 0
	h1
		font-size: 180%
	h2
		font-size: 110%
	table
		width: 100%
		&.balances
			th, td
				text-align: right
		&.singleyear
			width: 60%
			margin: 0 auto
	th
		padding-bottom: 2px
		border-bottom: 1px solid #ddd
	td
		padding-top: 3px
	td, th
		&.spacer
			width: 25px
		&.currency
			text-align: right
		&.checkno, &.date
			text-align: center
	ul
		list-style: none
		padding-left: 0
		margin: 1.5em 0
		label
			display: block
			float: left
			width: 7em
			padding-top: 4px
			margin-right: .6em
			font-weight: bold
	li
		margin: .35em 0
	small
		display: block
		margin: 2em 0 0 0
		line-height: 1.2


// ------======:[  Enrollment Info / Page Headers  ]:======------ //




// ------======:[  F O R M  S T Y L E S  ]:======------ //