/* ---------------------
	Title: Constant Contact - Seminar 07 - main screen stylesheet
	Filename: screen.css
	Author: One Pica Inc, Boston MA
	
	Table of Contents:
		Searchstring (Section Name)				Description
		
		=General (General Styles):				Set font sizes, Page backgrounds, link behaviors, etc
		=Master (Master #container Styles):		Placing, sizing, styling the main container
		=Branding (Branding Styles):			Logos, taglines, branding info
		=Nav (Navigation Styles):				The navigation bar; internal and external
		=Forms (Form Styles)					Set appearance of forms, inputs, buttons, etc
		=Multicol (Multi-Column Styles):		The cases where the content needs to be in multiple columns
		=Content (Content Styles):				The main content of the page
		...Further style sections go here...
		=Footer (Credit/Footer Styles):			The footer
		=Uni (Universal Styles):				Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF;
		Background Blue:						#EFEFFF;
	
	Thanks To:
		CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
		Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
		100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
		Beginning "global reset" styles, to clear troublesome browser defaults, 
		are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/) 
		Note that most form elements are omitted; style those separately, further down.
---------------------- */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}

/* Begin Actual Site Styles */
html {
	font-size: 100.01%; /* Ensures font consistency across browsers */
	height: 100%;
}
body {
	font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
	line-height: 1.4; /* Sets base leading for lines of text */
	background-color: #8D8F8E;
	font-family: Arial, sans-serif;
	height: 100%;
}
body.amex {
	background-color: #fff;
}
p {margin-bottom: 1em}

input, select, th, td {font-size: 1em}

h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.25em} /* 15px */
h4 {font-size: 1em} /* 12px */
h5 {font-size: 1em} /* 12px */
h6 {font-size: 1em} /* 12px */

strong {font-weight: bold}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}

p, h1, h2, h3, h4, h5, h6, ul, ol, li {
	line-height: 1.4;
}

/* Basic link styles */
a, a:link {
	color: #3366CC;
	text-decoration: underline;
}
a:visited {
	color: #0033CC;
}
a:hover, a:active {
	color: #0066FF;
	text-decoration: underline;
}
a:focus {
	outline: none; /* Removes dotted outline in Firefox */
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	position: relative;
	margin: 0px auto;
	padding: 0 0 36px 0;
	width: 754px;
	font-size: 1.1em; /* 11px (based on value from body) */
	text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
	background: #fff url(../images/bg/masthead_bg_reg.jpg) 0 0 no-repeat;
	border-bottom: solid 7px #FDC334;
}
body.amex #container {
	border-left: solid 1px #E1E1E1;
	border-right: solid 1px #E1E1E1;
	background: #fff url(../images/bg/masthead_bg_amex.jpg) 0 0 no-repeat;
	border-bottom-color: #0077D4;
}

/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
	#skiplink a {
		position: absolute;
		top: -1000px;
		left: -2000px;
	}
		#skiplink a:focus, #skiplink a:active {
			position: absolute;
			margin: 0;
			top: 0;
			left: 0;
			display: block;
			padding: 0;
			background: #000;
			color: #fff;
			font-weight: bold;
		}
		#skiplink a:hover { 
		}

/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	height: 149px;
}
	#branding-logo {
		position: relative;
		cursor: default;
		width: 348px;
		height: 61px;
		top: 12px;
		left: 22px;
	}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/branding/mem_logo_reg.gif) 0 0 no-repeat;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0;
		}
		body.amex #branding-logo h1 {
			background: transparent url(../images/branding/mem_logo_amex.gif) 0 0 no-repeat;
		}
			#branding-logo h1 a {
				display: block;
				cursor: default;
				width: 100%;
				height: 100%;
			}
	#branding-tagline {
		position: relative;
		width: 295px;
		height: 15px;
		top: 12px;
		left: 22px;
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/branding/mem_tagline_reg.gif) 0 0 no-repeat;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0;
		}
		body.amex #branding-tagline h2 {
			background: transparent url(../images/branding/mem_tagline_amex.gif) 0 0 no-repeat;
		}
	#branding-info {
	}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
}
	#nav-main {
	}
	#nav-section {
	}
	#nav-external {
	}

/* =Forms
----------------------
	Form styles
	Notes:
		A <p></p> should always enclose every label-input (or label-select) pair.
		Widths are in % to start, so that they scale, but they are the attributes most likely to change.
		Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
	fieldset {
		border: 0px solid;
		border-bottom: solid 1px #ccc;
		padding: 0 0 1.4em 0;
		margin: 0 0 1.4em 0;
		
	}
	form p {
		display: block;
		clear: both;
		margin: 0 0 0.8em 0;
		padding: 0;	
	}
		form label {
			display: inline;
			float: left;
			width: 35%;
			padding: 0 5% 0 0;
			margin: 0;
			line-height: 1.6;
		}
		form input, form select, form textarea {
		   margin: 0;
		   padding: 0;
		   width: 58.2%; /* CLOSE to full width; use pixels for the real thing */
		   font-size: 1em;
		   border: solid 1px #999;
		   border-bottom-color: #ccc;
		   background-color: #fff;
		   font-family: Tahoma, sans-serif;
		}
		form input {height: 1.6em; padding: 0.2em 0 0.1em;}
		form select {width: 59.5%; height: 1.6em}  /* Selects are not the same as inputs */
		form textarea {height: 6em}
		
		/* Radio buttons */
		form input.radio, form input.radiobtn {
			text-align: left;
			width: 1.3em;
			height: 1.3em;
			margin: 0.1em 0.3em 0 0;
			padding: 0;
			border: none;
			background: none;
			float: left;
			display: inline;
		}
		form .radiotext {
			float: left;
			display: inline;
			width: 88%;
			/* height: 1.6em; */
			padding: 0 0 0.3em 0;
			margin: 0.2em 1em 0.2em 0;
		}
		
		/* Check boxes */
		form input.ckbx, form input.checkbox {
			text-align: left;
			width: 1.2em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		
	form p.indent { /* For buttons or text that need to align with inputs/selects */
		margin-left: 40%;
	}
	form p.xspa { /* "extra space after" */
		margin-bottom: 2.0em;
	}
	form .required {
		color: red;
	}
	form input:focus {
		/* however we want the focused field to look */
	}
	form input.submit, button { /* There are lots of default values to fix */
		border: 3px double #999;
		border-top-color: #ccc;
		border-left-color: #ccc;
		padding: 1px 2px;
		background: #f6f6f6;
		color: #555;
		font-size: 0.9em;
		font-weight: bold;
		height: auto;
		width: auto;
		cursor: pointer;
		font-family: inherit;
	}
	form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
		color: #fff;
		background-color: #ff0000;
	}
	form input.submit:active, button:active { /* Button 'feedback' behavior */
		border: 3px double #ccc;
		border-top-color: #999;
		border-left-color: #999;
	}
	button.nostyle {
		border: 0px none !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
	}
	/* Specialized stuff */
	#regForm {
		font-size: 1.1em;
		padding: 1em 0 0 20px;
		width: 290px;
	}
		#personalinfo label {
			padding-top: 0.1em;
		}
		form .fullwidth {
			margin-bottom: 0.3em;
		}
			form .fullwidth label, form .fullwidth input, form .fullwidth select {
				width: 99%;
				float: none;
			}
		form .req {
		}
			form .req label {
				font-weight: bold;
			}
		/* form input.hilite {
			background-color: #FFFEA1;
		} */
		.err {
			font-weight: bold;
			color: #FF3333;
		}
		.venuecity {
			float: none;
			display: block;
			padding: 0.2em 0 0.3em 0;
			width: 95%;
			font-weight: bold;
		}
		.seminarfull {
			font-weight: bold;
			color: #0E7ED5;
			display: block;
			margin-left: 0;
			clear: both;
			padding: 0.3em 0 0em;
		}
		.allseminarsfull {
			font-weight: bold;
			color: #FF9900;
			display: block;
			padding: 0 0 0.5em;
		}
		input.hidden {
			background: none !important;
			border: 0px none !important;
			height: 1px !important;
		}
		/* input.imagebutton {
			height: 32px;
			width: 75px;
			border: none;
			padding: 0;
		} */
	
/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		These columns should be used for text within #content.
		Values are in percentages to start off -- remember that the IE stylesheet has different values.
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
	float: left;
	clear: none;
	width: 47%;
}
	.twoColumnLeft {
		margin-right: 5%;
	}
	.twoColumnRight {
		margin-right: 5%;
	}

.threeColumnLayout {
	width: 30%;
	float: left;
	clear: none;
}
	.threeColumnLeft {
		margin-right: 4%;
	}
	.threeColumnMiddle {
		margin-right: 4%;
	}
	.threeColumnRight {
		margin-right: 0;
	}

/* =Headings
----------------------
	<h1> through <h6> styles
---------------------- */
h1 {}
h2 {}
h3 {
	font-size: 1.8em;
	color: #FFB403;
	font-weight: normal;
}
body.amex h3 {
	color: #0E7ED5;
}
h4 {
	font-size: 1.545em;
	margin: 0 0 0.2em 0;
	font-weight: normal;
}
h5 {
	font-weight: bold;
}

/* =Content
----------------------
	Main Content styles
	Notes:
		
		Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
	font-size: 1em; /* Inherits 11px from #container */
}
	#content-main {
		float: left;
		display: inline;
		margin-left: 24px;
		width: 425px;
		padding: 55px 0 0 0;
	}
	
		.learn {
			height: 24px;
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/headings/hereswhatyoulllearn_reg.gif) 0 0 no-repeat;
			margin: 1.2em 0 0.5em 0;
		}
		body.amex .learn {
			background: transparent url(../images/headings/hereswhatyoulllearn_amex.gif) 0 0 no-repeat;
		}
		.seminarregistration {
			height: 24px;
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/headings/seminar_registration_reg.gif) 0 0 no-repeat;
		}
		body.amex .seminarregistration {
			background: transparent url(../images/headings/seminar_registration_amex.gif) 0 0 no-repeat;
		}
		.seminarconfirmation {
			height: 19px;
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/headings/seminar_confirmation_reg.gif) 0 0 no-repeat;
		}
		body.amex .seminarconfirmation {
			background: transparent url(../images/headings/seminar_confirmation_amex.gif) 0 0 no-repeat;
		}
			.thankyoumsg {
				font-size: 1.1em;
				padding: 1.2em 0 0 20px;
				width: 400px;
			}
				.reginfo {
					border: solid 1px #ccc;
					padding: 10px 10px 14px;
					margin: 0 0 1em 0;
				}
					.reginfo p {
						clear: left;
						padding: 0 0 1em 0;
					}
						.labelspan {
							float: left;
							display: inline;
							width: 20%;
							margin: 0 5% 0 0;
							line-height: 1.2;
						}
						.infospan {
							float: left;
							display: inline;
							width: 70%;
							margin: 0 0 0 0;
							line-height: 1.2;
						}
		
		#content ul {
			padding: 0 0 0 19px;
			margin: 0 0 1em 0;
		}
			#content li {
				margin: 0 0 0.4em 0;
			}
		.btnrow {
			padding: 2em 0 0 18px;
		}
	
	
	#content-secondary {
		float: right;
		display: inline;
		width: 268px;
	}
		.cs-inner1 {
			background: #EFEFEF url(../images/bg/cs1_bg.gif) 0 0 repeat-y;
			margin: 0 0 22px 0;
		}
			.cs-inner2 {
				background: transparent url(../images/bg/cs2_bg.gif) left bottom no-repeat;
			}
				.cs-inner3 {
					background: transparent url(../images/bg/cs3_bg_reg.gif) 0 0 no-repeat;
					padding: 22px 26px 8px 8px;
				}
				body.amex .cs-inner3 {
					background: transparent url(../images/bg/cs3_bg_amex.gif) 0 0 no-repeat;
				}
		
		#content-secondary h3 {
			color: #666;
			padding-bottom: 0.3em;
			border-bottom: solid 1px #E1E1E1;
			margin: 0 0 0.3em 10px;
		}
		#content-secondary h3.portland {
			height: 19px;
			background: transparent url(../images/headings/portlandseminars.gif) 4px 0 no-repeat;
			text-indent: -5000px;
			overflow: hidden;
		}
		#content-secondary h3.seattle {
			height: 19px;
			background: transparent url(../images/headings/seattleseminars.gif) 4px 0 no-repeat;
			text-indent: -5000px;
			overflow: hidden;
		}
		.cs-inner1 p {
			padding-left: 14px;
		}
		.cs-inner1 .btnrow {
			padding: 1.6em 0 0 22px;
		}
		.session-info {
			background: #F6F6F6;
			padding: 8px 14px 10px;
			margin: 0 0 4px 0;
		}
			.session-info h5 {
				font-weight: bold;
				font-size: 1.273em;
			}
			.session-info p {
				padding: 0 0 1em 0;
				margin: 0;
				line-height: 1.2;
			}
			.session-info span {
				line-height: 1.2;
			} 
		
		.moreinfo {
			padding: 0 22px 0 32px;
		}
			.testimonial {
				font-family: Georgia, serif;
				margin-bottom: 2em;
			}
				.testimonial div {
					font-size: 1.364em;
					font-style: italic;
					line-height: 1.4;
					margin: 0 0 0.8em 0;
				}
				.testimonial span {
					display: block;
					line-height: 1.4;
					padding: 0 0 0 1em;
					text-indent: -1em;
				}
			.questions {
				
			}
	

/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#siteinfo {
}
	#siteinfo-legal { /* Usually the copyright notice */
	}
	#siteinfo-links { /* Usually Terms, Privacy and Accessibility */
	}

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}

.bold {font-weight: bold}
.em {font-style: italic}