/*
		Site:	Microsite 7 (2006)
		File:	Main Screen CSS
		Author:	Eric Shepherd
		Date:	June 2006
*/

body {
	font-family: helvetica, arial, sans-serif;

}

#content h2 {
	margin-bottom: .5em;
	color: #3846a4;
	font-size: x-large;
	letter-spacing: -0.05em;
	width: 560px;
	font-family: "trebuchet ms";
	line-height: 1.2em;
}

#content h3 {
	margin-bottom: .7em;
	color: #3846a4;
	font-size: large;
	font-size: medium;
	letter-spacing: -0.05em;
	text-align: center;
}

#content p, #content ul, #content ol, #content dl {
	margin-bottom: 1em;
}

#content ul, #content ol {
	margin-left: 1em;
}

.clear {
	clear:both;
	height:0;
}

/* LINKS */

#content a:link {
	color: #3846a4;
	text-decoration: underline;
	font-weight: bold;
}

#content a:visited {
	color: #888;
	text-decoration: underline;
	font-weight: bold;
}

#content a:hover {
	background: #3846a4;
	text-decoration: none;
	color: #fff;
}

#content a:active {
	background: #3846a4;
	text-decoration: none;
	color: #fff;
}

#content p:hover a {
	text-decoration: none;
	background-color: #FFFFCC;
}

	#content p:hover a:hover {
		background: #3846a4;
	}

/* BUTTONS */

ul.button {
	list-style: none;
	margin: .8em 0;
	padding: 0;
}

	ul.button li {
		text-align: center;
		
	}
	
		ul.button a {
			text-decoration: none;
			border: 0;
			background: #fff;
		}

/* DIVS */

#content {
	margin: 10px 8px 15px 10px;
	color: #000;
	font-size: small;
	width: 570px;
}


/* THUMBS */

/* THUMBNAIL DISPLAY */
/* you also have classes of "on" to work with for the hovers on the image and text by default. if you ignore them, 
they won't do anything, but if you want the image to highlight when the text is hovered, or the text to highlight when 
the image is hovered, just style the .on class for both elements */
		
#thumbs {
	max-width: 582px;
	margin: 0 auto;
}

		#thumbs div, #thumbs dd.product-image {
			width: 12em; /* adjust to taste, always set in ems */
			margin: 0;
			padding: 0;
		}
		
		#thumbs div {
			float: left;
			position: relative;
		}
		
				#thumbs dl {
					position: relative;
					padding-top: 120px;
					text-align: center;
					padding-bottom: 1em;
					height: 5em;
				}
				
						#thumbs dd.product-price, #thumbs dd.product-category {
							font-size: 80%;
						}
				
						#thumbs dd.product-image {
							position: absolute;
							top: 0;
							left: 0;
						}
						
								#thumbs dd.product-image a {
									display: block;
								}
						
										#thumbs dd img { 
											display: block;
											width: 110px;
											margin: 0 auto;
											border: 3px solid;
										}
										
										#thumbs dd.product-image a:hover {
											background: #fff;
										}
										
										#thumbs dd.product-image a:hover img {
											border-width: 2px;
										}
								
						#thumbs dt.product-name {
							padding: .3em;
						}

/* LANDING PAGE */

ul#page-list, ul#page-list ul {
	list-style: none;
	margin: 0;
}

		ul#page-list li {
			margin: 0;
			border: 1px solid #eee;
			background: #fafafa;
			color: #333;
			text-align: center;
			font-weight: bold;
			font-size: 170%;
			letter-spacing: -0.05em;
		}

				ul#page-list li li {
					list-style: none;
					width: auto;
					margin: .5em 1em;
					border: 0;
					font-size: small;
					letter-spacing: normal;
				}
				

/* FACEBOOK - LIKE BUTTON */
#add-this-container{
	margin:10px auto; 
	text-align:left; 
}
#content #add-this-container a,
#content #add-this-container a:hover{
	background-color:transparent;
}