// ------======:[  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
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



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

#enrollinfo, #pageinfo
	+background-borders($page-backgound)
	color: #333
	padding: 1px 30px
	position: relative

#enrollinfo
	padding-bottom: 20px
	a.btn
		position: absolute
		top: 20px
		right: 30px
	#infobox
		border: 1px solid #555
		padding: 15px
		margin: 0 -15px
		dt
			display: inline
			font-weight: bold
			margin: 0
			white-space: nowrap
		dd
			display: inline
			margin: 0 2em 0 0
			white-space: nowrap
	h1
		font-size: 23px
		line-height: 1.1

#pageinfo
	padding: 1px 30px 12px 30px
	h1
		font-size: 180%
	.callout
		+callout-color($callout-color)
		+right-border($callout-color,$side-border-width+3px)
		position: absolute
		top: 6px
		right: -33px
		font-size: 150%
		padding: 8px 50px 8px 60px



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

#pageform
	color: #333
	background: #fff
	margin: 0
	width: 650px
	padding: 1em 0 0 0
	dl
		font-size: 16px
	dt
		display: block
		float: left
		width: 195px
		text-align: right
		font-weight: bold
		clear: left
		padding-top: 5px
	dd
		margin-left: 208px
		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: 331px
			margin-bottom: 1px
			border: 1px solid #aaa
			border-left-color: #ccc
			border-bottom: 2px solid #000
			transition: background 200ms linear
			text-transform: uppercase
			-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
		&.sm
			width: 44px
		&.half
			width: 163px

	.formfoot
		+callout-color($callout-color)
		+background-borders($callout-color)
		padding: 11px 167px
		margin: 28px -60px 11px -60px
		width: 566px
		text-align: center
		font-size: 21px
		position: relative
		.backlink
			position: absolute
			top: 8px
			left: 15px
			input[type="submit"]
				font-size: 12px
		.forwardlink
			position: absolute
			top: 7px
			left: 615px