/******** Basic Page Layout ********/

	/** for IE browsers so they will use elastic fonts (em) properly **/
	html {
		font-size: 100%;
	}

	body {
		background: #f0f0f0;

		/* Set base fonts and sizes. All other sections use
		   elastic (em) values to grow/shrink their sizes
		   based on these.
		*/
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 16px;
		color: #000;
	}


/******** Manage Your Subscriptions Container Section ********/

	.mysContainer {
		background: #fff;
		border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;

		margin: 20px auto;
		width: 780px;
		padding: 20px 40px;
	}


/******** Header Section *******/

	#headerSection {
		width: 100%;
		overflow: hidden;
	}
		#headerSection img {
			float: left;
			max-width: 100%;
		}


/******** Page Title *******/

	#pageTitleSection {
		/* font size uses em which is relative to
		   font-size defined in body tag above.
		 */
		font-size: 1.83em;
		font-weight: normal;
		color: #999;
		padding: 28px 0 10px 0;
	}


/******** Email Banner Section *******/

	#emailBannerSection {
		background: #e8f1f7;
		border: none;
		border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;

		width: 550px;
		padding: 8px 50px;

		margin: 20px auto;
		clear: both;

		color: #666;
		text-align: center;
	}
		/* Header in the email banner */
		#emailBannerSection h2 {
			margin-bottom: 0;
			/* font size and line height use em which is
			   relative to sizes defined in body tag above.
			 */
			font-weight: normal;
			font-size: 1.5em;
			line-height: 1.35em;
		}

		/* style for email addresses shown in email banner */
		#emailBannerSection span {
				color: #337098;
		}

		/* style for paragraph section in email banner */
		#emailBannerSection p {
			margin: 6px 0 16px 0;
			padding: 0;
		}


/******** Error and Status Messages *******/

	#statusMessageSection {

	}

	.error, .status {
		background: #f7d6d6;
		border: none;
		margin: 20px auto;
		clear: both;
		width: 510px;
		padding: 16px 70px;
		color: #666;
		text-align: center;
		font-size: 1.2em;
		border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
	}

	.status {
		background: #e6f7d6;
	}

	.error:before, .status:before {
		content: url(../human/images/icons/warning-icon.png);
		margin-left: -16px;
		padding-right: 10px;
	}

	.status:before {
		content: url(../human/images/icons/checkmark-icon.png);
	}

	.testMessage {
		background: #FFFFE5;
		border: 1px solid #FFE6A6;
		font-size: 1.4em;
		color: #333;
		text-align: center;
		padding: 12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.headline {
		font-weight: bold;
	}


/******** Manage Subscriber *******/


	/** this is the main block for managing subscribers.
	    It contains both the subscriptions section and
	    profile section below **/
	#manageSubscriberSection {

	}


    /******** Manage Your Subscriptions Section *******/

	/** outer wrapper for manage your lists section **/
	.yourSubscriptions {
		border: 0;
		margin: 2px 0 0;
		padding-bottom: 0;
	}
		.yourSubscriptions legend {
			color: #337098;
			font-size: 1.3em;
			padding: 10px 0;
		}

	/** style for each choice radio button **/
	.choice {
		padding: 20px 0;
		border-top: 1px dotted #ccc;
	}
		.choice label {
			display: inline;
			margin-left: 10px;
			font-size: 1.3em;
		}
		.choice:last-of-type {
			border-bottom: 1px dotted #ccc;
			margin-bottom: 10px;
			padding: 20px 0;
		}

	/** style for subscriptions list table **/
	.listsTable {
		border: 0;
		padding: 0 5px 5px 5px;
		margin-left: 28px;
	}
		.listsTable label {
				font-size: 1.0em;
				display: block;
				margin-left: 40px;
		}
		.listsTable table {
			padding: 0;
			margin: 10px 0 0 20px;
		}
		.listsTable td {
			border-bottom: 1px dotted #eee;
			max-width: 450px;
			padding: 6px;
		}
		.listsTable input[type="checkbox"] {
			margin-top: 1px;
			float: left;
		}
		.listsTable input label {
			margin-left: 50px;
		}
		.listsTable .listStatus {
			width: 100px;
			padding-left: 20px;
		}

		.listStatus{
			color: #888;
			font-size: 12px;
			padding-left: 8px;
		}

		.unsubscribeMsg {
			margin:  1px 0 -5px 35px;
			padding: 4px 0 0 0;
			color: #888;
		}

		#dncConfirmMsgBox {
			margin: 0 0 10px 35px;
			padding: 4px 0 0 0;
			color: #222;
		}

		#dncConfirmMsgBox p {
			margin:  0;
			padding: 0 0 10px 0;
			color: #000;
			font-size: 1.0em;
			line-height: 1.5em;
		}

		label.confirmCheckbox {
			font-size: 1.0em;
			color: #990000;
			margin-top: 10px;
		}


    /******** Manage Your Profile Section *******/

	.profileSectionTitle {
		/* font size uses em which is relative to font-size
		   defined in body tag above
		 */
		font-size: 1.83em;
		font-weight: normal;
		color: #999;
		padding: 14px 0 14px 0;
	}

	#profileContainer {
		margin-top: -13px;
		margin-bottom: 20px;
		width: 624px;
	}

	#profileContainer label {
		display: block;
		font-size: 1.2em;
	}

	#yourProfile {
		border: 0;
		margin-left: 8px;
		padding: 0;
		width: 780px;
	}

		#yourProfile legend {
			color: #337098;
			float: right;
			margin-bottom: -17px;
			padding: 0;
			font-size: 1.0em;
		}
			#yourProfile legend span {
				color: #666;
				font-size: 0.90em;
				font-weight: normal;
			}
			#yourProfile legend a {
				color: #337098;
			}
			#yourProfile legend a:hover {
				color: #275676;
			}
			#yourProfile div {
				border: none;
				float: left;
				padding: 4px 0 0 0;
			}

	.email,
	.prefix,
	.address1,
	.address2,
	.business,
	.city,
	.custom,
	.phone
	.custom.checkbox {
		clear: left;
	}

	.custom.checkbox {
		margin: 0 10px 10px 0;
		width: auto;
	}

	.email input,
	.prefix input,
	.suffix input,
	.fname input,
	.lname input,
	.address1 input,
	.address2 input,
	.city input,
	.state input,
	.zip input,
	.business input,
	.phone input,
	.custom.text input,
	.custom.date input
	{
		padding: 4px;
		margin: 4px 20px 10px 0;
	}

	.email input {
		width: 442px;
		margin-right: 20px;
	}

	.address1 input,
	.address2 input {
		width: 442px;
	}

	.prefix input,
	.suffix input {
		width: 32px;
	}

	.fname input,
	.lname input {
		width: 172px;
	}

	.city input,
	.state input {
		width: 204px;
	}

	.zip input {
		width: 70px;
	}

	.business input,
	.phone input,
	.custom input {
		width: 204px;
		clear: right;
	}

	.custom.checkbox input {
		display: inline;
		margin-right: 10px;
		width: 20px;
	}

	.custom.checkbox label {
		display: inline;
		margin-left: 0;
	}


/******** Submit "Update" Button *******/

	input[type="submit"] {
		border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
		border: none;
		background-image: linear-gradient(bottom, rgb(224,224,224) 100%, rgb(204,204,204) 53%);
		background-image: -o-linear-gradient(bottom, rgb(224,224,224) 100%, rgb(204,204,204) 53%);
		background-image: -moz-linear-gradient(bottom, rgb(224,224,224) 100%, rgb(204,204,204) 53%);
		background-image: -webkit-linear-gradient(bottom, rgb(224,224,224) 100%, rgb(204,204,204) 53%);
		background-image: -ms-linear-gradient(bottom, rgb(224,224,224) 100%, rgb(204,204,204) 53%);
		cursor: pointer;
		margin:  0 0 10px 10px;
		padding: 8px 18px;
		color: #666;
	}
		input[type="submit"].activatedBtn, input[type="submit"].activatedBtnHover {
			background-color: #226699;
			background-image: linear-gradient(bottom, rgb(0,102,153) 22%, rgb(57,136,176) 53%);
			background-image: -o-linear-gradient(bottom, rgb(0,102,153) 22%, rgb(57,136,176) 53%);
			background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 22%, rgb(57,136,176) 53%);
			background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 22%, rgb(57,136,176) 53%);
			background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 22%, rgb(57,136,176) 53%);
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.22, rgb(0,102,153)),
				color-stop(0.53, rgb(57,136,176))
			);
			color: #fff;
		}
		input[type="submit"].activatedBtnHover {
			color: #003366;
		}


/******** Footer Section *******/

	/* We currently don't have a footer.
	   But if we did this is where it would be
	*/
	#footerSection {

	}