/**
 * CSS-helpers 
 */

.block {display:block}
.clear {clear:both}
.hide {display:none}

/**
 * Global elements
 */

.macomat h1 {
	font-size: 30px;
	margin: 0 0 0.5em 0;
	color: #7c7c7c;
}

.macomat h2 {
	font-size: 14px;
	margin: 0 0 0.5em 0;
}


.macomat select, 
.macomat input[type=text], 
.macomat textarea {
	font: 13px  'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
	color: #7c7c7c;
	width: 288px;
	border: 2px solid #34ff1b; 
}

.macomat select {
	width: 290px;
}

.macomat option {
	padding: 3px 15px;
	color: #7c7c7c;
	border: 1px solid #34ff1b; 
}

.macomat input[type=text] {
	font-size: 12px;
	width: 212px;
	padding: 3px;
}

.macomat input[type=text].error,
.macomat textarea.error {
	border: 2px solid #f50087;
}


.macomat label.aligned {
	display: block;
	position: relative;
	top: -1.2em;
	left: 2em;
}

.macomat label.error {
	color: #f50087;
}

.continue-link {
	font-size: 15px;
	text-transform: uppercase;
	padding-bottom: 5px;
}

.continue-link a {
	color: #7c7c7c;
	text-decoration: none;
}

.pink {
	color: #f50087;
}

.infoMessage {
	position: absolute;
	top: 80px;
	font-size: 14px;
	width: 281px;
	padding: 3px;
	border: 2px solid #34ff1b; 
	text-align: center;
	text-transform: uppercase;
	background-color: #ffffff;
}

.inactive-overlay {
	position: absolute;
	background-color: #ffffff;
	z-index: 99;
}

/**
 * Help
 */

img#help-button {
	position: absolute;
	left: 680px;
	top: 130px;
	cursor: pointer;
	z-index: 99;
}

.intro img#help-button {
	top: 19px;
}

#help-container {
	z-index: 99;
	top: 60px;
	left: 340px;
}

.intro #help-container {
	top: -51px;
}

#help-container .content {
	border: none;
	padding: 0;
	height: 500px;
	overflow: auto;
}

#help-container .content .h1 {
	font-size: 14px;
	margin: 0;
	color: #7c7c7c;
}

/** 
 * Mac-o-mat 1. Step
 */

.intro {
	background: url(/docroot/macforstudents/images/macomat/bg-step1.gif) no-repeat 0 20px;
	height: 650px;
	position: relative;
}

#intro-boxleft {
	color: #7c7c7c;
	width: 240px;
	height: 165px;
	padding: 0 0 0 10px;
	overflow: hidden;
	position: absolute;
	top: 200px;
	left: 8px;
}

#intro-boxleft h2 {
	white-space: nowrap;
	letter-spacing: -1px;
}

#intro-boxleft ul {
	font-size: 14px;
	list-style-image: url(/docroot/macforstudents/images/macomat/rad-listitem.png);
	padding: 0 10px;
	margin: 0 1em;
}

#intro-boxleft li {
	line-height: 2em;
	margin: 0 0 0 0.8em;
}

#intro-boxright {
	width: 225px;
	height: 325px;
	padding: 10px;
	position: absolute;
	top: 220px;
	left: 470px;
}

#intro-boxright h2 {
	margin-bottom: 1.5em;
}

/** 
 * Mac-o-mat 2. Step
 */

#student-name h1 {
	margin-top: 15px;
}

#boxleft {
	position: relative;
	height: 750px;
}

#boxleft.donation {
	height: 820px;
}

.frame {
	position: absolute;
	overflow: visible;
	background: url(/docroot/macforstudents/images/macomat/box/middle.png) repeat-y;
	width: 293px;
	z-index: 2;
	padding: 20px 22px 40px 22px;
}

.frame .top {
	position: absolute;
	top: -4px;
	left: 0;
	width: 337px;
	height: 20px;
	background: url(/docroot/macforstudents/images/macomat/box/top.png) no-repeat;
}

.frame .bottom {
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 337px;
	height: 39px;
	background: url(/docroot/macforstudents/images/macomat/box/bottom.png) no-repeat;
}

.frame .label {
	position: absolute;
	left: -61px;
	top: 25px;
}

.frame .hider {
	position: relative;
	background-color: #ffffff;
	background-color: red;
	z-index: 99;
}

/**
 * Product box
 */

#boxleft #product-box {
	height: 235px;
	top: 60px;
	left: 2px;
}

#boxleft #product-box.donation {
	height: 175px;
}

#product-image-container {
	width: 288px;
	height: 130px;
	border: 2px solid #34ff1b;
	margin-top: 10px;
	text-align: center;
}

#product-image-container img {
	margin: 10px auto;
}

#product-description-container {
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
}

#product-description-container p {
	font-size: 13px;
	display: inline;
	font-weight: bold;
}

/**
 * Patron box
 */

#boxleft #patron-box {
	height: 300px;
	top: 373px;
	left: 2px;
}

#boxleft #patron-box.donation {
	height: 420px;
	top: 313px;
	left: 2px;
}

#patron-box .email-patron-row {
	position: relative;
	padding-bottom: 10px;
}

#patron-box .email-patron-row .button-edit {
	position: absolute;
	display: block;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	right: 0;
	top: 2px;
	height: 21px;
	width: 21px;
	background: #34ff1b;
}

#patron-box .email-patron {
	width: 255px;
	height: 15px;
}

#patron-box textarea#text-patron {
	height: 150px;
}

.patron-box.donation h2 {
	margin-bottom: 0.8em;
}

.patron-box.donation label {
	margin-top: -0.4em;
}

.patron-box.donation label.aligned {
	margin-bottom: -1em;
}

.patron-box.donation label.text {
	margin-top: 0.5em;
}

.patron-box.donation input[type=text] {
	width: 281px;
}

.patron-box.donation textarea {
	height: 80px;
}

#addthis {
	position: absolute;
	left: 355px;
	bottom: -3px;
}

/**
 * Text proposal box
 */

#text-proposals {
	position: absolute;
	top: 60px;
	left: 380px;
	height: 613px;
	overflow: visible;
}

#text-proposals .text-proposal {
	position: relative;
	width: 258px;
	height: 158px;
	border: 2px solid #34ff1b;
	margin-bottom: 10px;
	padding: 5px 5px 5px 30px;
	cursor: pointer;
	overflow: auto;
}

#text-proposals .text-proposal p {
	display: inline;
}

.text-proposal img {
	position: absolute;
	left: 4px;
	top: 4px;
}

#text-proposals .continue-link {
	padding-bottom: 0;
}

/**
 * Donation bar
 */

#donationbar-container {
	position: absolute;
	top: 68px;
	height: 330px;
	width: 11px;
	left: 454px;
}

#donation-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 11px;
	height: 1px;
	background-color: #34ff1b;
}

#donation-bar.donation {
	bottom: 0;
}

/**
 * Donation box
 */

#donation-box-container {
	position: absolute;
	background: url(/docroot/macforstudents/images/macomat/bg-step2.gif) no-repeat;
	width: 400px;
	height: 514px;
	left: 340px;
	top: 60px;
}

#donation-box {
	position: absolute;
	left: 195px;
	top: 78px;
	width: 155px;
}

#donation-box div {
	white-space: nowrap;
}

#donation-box div {
	text-align: center;
	font-weight: bold;
}

#donation-box .amount {
	border: 2px solid #34ff1b;
	margin-bottom: 13px;
	padding: 2px;
	height: 1em;
}

#donation-box #missing-money .amount {
	margin-left: 7px;
	width: 131px;
	border-color: #f50087;
}

#donation-overlay {
	position: absolute;
	z-index: 99;
	background-color: #ffffff;
}

#donation-info-box {
	position: absolute;
	z-index: 100;
	top: 80px;
	font-size: 14px;
	width: 281px;
	padding: 3px;
	border: 2px solid #34ff1b; 
	background-color: #ffffff;
}


/**
 * Donator list
 */

#donation-box-container .continue-link {
	position: absolute;
	right: 0;
	bottom: 0;
}

#donatorlist {
	position: absolute;
	top: 60px;
	left: 380px;
	overflow: visible;
}

#donatorlist b + .continue-link {
	padding: 15px 0 7px 0;
}

#donatorlist .donation {
	margin-bottom: 0.3em;
}

#donatorlist .amount {
	display: block;
	float: right;
}

/**
 * Donation editor
 */

#donatorlist .patron-add {
	position: absolute;
	right: 22px;
	top: 21px;
}

#donatorlist .edit-buttons {
	float: right;
	width: 34px;
	margin-left: 3px;
}

#donatorlist .edit-buttons img {
	margin-left: 3px;
}

#donatorlist .patron-button {
	cursor: pointer;
}

/**
 * Donation edit form
 */

#edit-patron-box {
	left: 380px;
	top: 60px;
}

/**
 * Product page
 */

.product-paragraph {
	margin: 2em 0 0 0;
	border-bottom: 1px solid #dddddd;
}

.product-paragraph:last-child {
	border: none;
}

.product-paragraph h2 {
	margin: 0;
}

.product-paragraph p {
	margin: 0 0 1em 0;
}


/**
 * Make the layout more dynamic...
 */


#boxleft {
	height: auto;
	padding-bottom: 50px;
}

#boxleft #product-box {
	position: relative;
	top: 10px;
	height: auto;
}

#boxleft #patron-box,
#boxleft #patron-box.donation {
	position: relative;
	top: 30px;
	height: auto;
}