/*

Copyright 2011 Potion Factory LLC. All rights reserved.

--------------------------------------------------------------------------------------
  CSS Reset
------------------------------------------------------------------------------------*/

* { padding:0; margin:0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:14px 0; }
li, dd { margin-left:5%; }
select option { padding:0 5px; }
.left { float:left; }
.right { float:right; }
.center { text-align: center; }
.clear { clear:both; height:1px; font-size:1px; line-height:1px; }
a img { border:none; }

/*------------------------------------------------------------------------------------
  Global Styles
------------------------------------------------------------------------------------*/

html {
	background-color: #eee;
}

body {
	font: 10pt HelveticaNeue, sans-serif;
}

h1 {
	font-size: 18pt;
}

h1 a {
	color: #333;
}

h4 {
	color: #666;
}

a {
	text-decoration: none;
}

hr { height: 1px; border: 0; background-color: #ddd; }

#content {
	width: 280px;

	margin: 0 auto 14px;
	padding: 28px 28px 36px 28px;

	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	color: #333;
	background-color: #fff;
}

#content h2 {
	font-size: 14pt;
	margin: 0 0 16px 0;
	color: #444;
}

#footer {
	margin: 0 0 10px;
	font-size: 9pt;
	text-align: center;
	color: #999;
}

#footer {
	line-height: 200%;
}

/*------------------------------------------------------------------------------------
  Text Properties
------------------------------------------------------------------------------------*/

p { line-height: 130%; }

.light { color: #888; }

.justified { text-align: justify; }

/*------------------------------------------------------------------------------------
  Site Heading
------------------------------------------------------------------------------------*/

.app h1 {
	width: 330px;
	height: 32px;
	margin: 32px auto 12px;
}

.app h1 img {
	margin-right: 2px;
}

.app h1 strong {
	position: relative;
	top: -7px;
}

.app h1 small {
	font: 18pt 'HelveticaNeue-Ultralight', sans-serif;
	position: relative;
	top: -7px; left: 1px;
}

/*------------------------------------------------------------------------------------
  Box With Light Background
------------------------------------------------------------------------------------*/

.lightbox {
	padding: 8px 16px;
	background-color: #ffffe0;
	border: 1px solid #ff9;
}

.lightbox img {
	vertical-align: middle;
}

/*------------------------------------------------------------------------------------
  Buttons
------------------------------------------------------------------------------------*/

.buttons {
	margin: 20px auto 5px auto;
	text-align: center;
}

a.button {
	line-height: 100%;
	font: bold 9pt HelveticaNeue, sans-serif;
	display: inline-block;
	width: 170px;
	margin-top: 7px;
	padding: 6px 10px 6px 7px;
	color: #444;
	text-align: left;

	border: 1px solid #bbb;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	background-repeat: no-repeat;
	background: #f3f3f3 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background: #f3f3f3 -moz-linear-gradient(top, #fff, #eee);
}

a.button span.img {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 8px 0 10px;
	position: relative;
	top: 2px;
}

a.button span.title {
	position: relative;
	top: -3px;
}

a#manage_iap_subscription span.img {
	background: url(/images/newspaper.png) no-repeat;
}

a#purchase span.img {
	background: url(/images/cart.png) no-repeat;
}

a#account_settings span.img {
	background: url(/images/information.png) no-repeat;
}

a#change_password span.img {
	background: url(/images/key.png) no-repeat;
}

a#change_email span.img {
	background: url(/images/email.png) no-repeat;
}


a#login span.img {
	background: url(/images/lock_go.png) no-repeat;
}

a.button:active {
	background: #ddd;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee));
	background: -moz-linear-gradient(top,  #ddd,  #eee);
	border-color: #999;
}

/*------------------------------------------------------------------------------------
  Log out button
------------------------------------------------------------------------------------*/

#logout {
	float: right;
	position: relative;
	top: 6px;
	font-size: 11px;
}

/*------------------------------------------------------------------------------------
  Forms
------------------------------------------------------------------------------------*/

#formarea {
	margin: 25px 0;
}

#formarea h3 {
	margin: 25px 0 20px;
	padding: 0;
}

label {
	font-size: 9pt;
	color: #444;
}

input.wide {
	width: 270px;
	margin: 7px 0 14px 0;
	border: 1px solid #aaa;
	padding: 4px;
	height: 19px;
	font-size: 11pt;
}

input[type=submit], input[type=button] {
	padding: 2px 6px;
	font-size: 12pt;
}

.submit {
	text-align: right;
}

form.signup .submit {
	margin-top: 10px;
}

/*------------------------------------------------------------------------------------
  Sign Up Form
------------------------------------------------------------------------------------*/

#newsletter {
	margin: 5px 0 15px;
}

#newsletter input {
	margin-right: 5px;
	float: left;
}

#newsletter label {
	font-size: 10pt;
	display: table-cell;
	position: relative;
	top: -1px;
}

#newsletter small {
	font-size: 9pt;
	color: #888;
	margin-top: 5px;
	display: block;
}

/*------------------------------------------------------------------------------------
  Purchase Subscription Form
------------------------------------------------------------------------------------*/
#new_order {
	margin-top: 20px;
}

#new_order input#submit { margin-top: 10px; }

#products {
	margin-bottom: 20px;
}

#products label {
	font-size: 14px;
}

#products input {
	vertical-align: bottom;
	position: relative;
	top: -3px;
}

#products,
#payment_method,
#new_order input#submit,
#norefund {
	margin-left: 45px;
}

.creditcards img,
.paypal img,
.gcheckout img {
	vertical-align: middle;
	margin-left: 5px;
	position: relative;
	top: -3px;
}

.gcheckout img {
	top: -1px;
}

#norefund {
	color: #999;
	margin-top: 20px;
}

/*------------------------------------------------------------------------------------
  Error Display
------------------------------------------------------------------------------------*/

#errors {
	padding: 7px 7px 7px 15px;
	color: #b00;
	border: 1px solid #fdd;
	background-color: #fff0f0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.errorbox {
	float: left;
	height: 0;
	width: 300px;
	position: relative;
	top: -46px;
	left: 282px;
	font-weight: normal;
}

.errorbox div { float: left; height: 41px; }

.errorbox .l {
	width: 43px;
	background-image: url(/images/errorbox_l.png);
}

.errorbox .c {
	background: url(/images/errorbox_c.png) repeat-x;
	color: #fff;
	padding-top: 11px;
	font-size: 8pt;
}

.errorbox .r {
	width: 17px;
	background-image: url(/images/errorbox_r.png);
}