/* General
----------------------------------- */
.hidden {
	display: none;
}


/* Color Trends. Personalities, and Families
----------------------------------- */
body.secondary #content {
	padding: 60px 40px 60px 20px;
	width: 570px;
}

p#color-families-instructions {
	clear: left;
	width: 100%;
	margin: 0 0 1em 0 !important;
}

#color-trend,
#color-family,
#color-style,
#color-personality {
	padding: 15px;
	background-color: #e7ede4;
	color: #424341;
	float: left;
	position: relative;
	clear: both;
	width: 540px;
}

#color-trend dt#trend-name,
#color-family dt#family-name,
#color-style dt#style-name,
#color-personality dt#trend-name {
	font-size: 120%;
	margin-bottom: 0.25em;
}

#color-family dt#family-name,
#color-family dd.description,
#color-trend dt#trend-name,
#color-trend dd.description,
#color-personality dt#trend-name,
#color-personality dd.description {
	float: right;
	width: 270px;
}

#color-style dt#style-name,
#color-family dt#family-name,
#color-family dd.palette,
#color-trend dt#trend-name,
#color-trend dd.swatches ,
#color-personality dt#trend-name,
#color-personality dd.swatches {
	margin-top: 265px;
}

#color-family dd.image img,
#color-trend dd.image img,
#color-style dd.image img, 
#color-personality dd.image img {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1000;
}

#color-family dd.palette,
#color-trend dd.swatches,
#color-personality dd.swatches {
	background-color: #fff;
	float: left;
	width: 240px;
	padding: 10px;
}

#color-trend dd.swatches dl.swatch,
#color-personality dd.swatches dl.swatch {
	width: 55px;
	height: 65px;
	float: left;
	margin-right: 5px;
}

#color-trend dd.swatches dl.swatch dt,
#color-personality dd.swatches dl.swatch dt {
	overflow: hidden;
	height: 20px;
	margin-bottom: 2px;
}

#color-personality dd.swatches dl.swatchLarge dt {
	height: 55px;
}

#color-trend dd.swatches dl.swatch dd,
#color-personality dd.swatches dl.swatch dd {
	font-size: 85%;
	line-height: 1em;
}

#color-personality dd.swatches dl.swatch img {
	width:55px;
	height:20px;
}

#color-family dd.palette dl.family-group {
	float: left;
	clear: both;
	width: 100%;
}

#color-family dd.palette dl.family-group dt {
	color: #666666;
	font-weight: bold;
	padding: 0.5em 0 0 0;
	clear: both;
	float: left;
	width: 100%;
}

#color-family dd.palette dd.chips dl.chip {
	width: 42px;
	float: left;
	margin-right: 5px;
}

#color-family dd.palette dd.chips dl.chip img {
	width: 40px;
	height: 40px;
}

#color-family dd.palette dd.chips {
	margin: 0 0 10px 0;
	float: left;
}


/* Color Family Styles via JavaScript
----------------------------------- */
#color-family dd.dynamic-palette dd.chips dl.chip {
	width: 17px;
	margin-right: 0;
}

#color-family dd.dynamic-palette dd.chips dl.chip dd {
	display: none;
}

#color-family dd.dynamic-palette dd.chips dl.chip img {
	width: 17px;
	height: 24px;
}

#color-family dd.palette-dynamic dd.chips dl.chip {
	width: 42px;
	height: auto;
}

#color-family dd.palette p.chip-name {
	margin-top: 0;
	float: left;
}

#color-family dd.palette p.chip-name strong {
	font-style: italic;
}


/* Color Trends Browser
----------------------------------- */
h2 {
	float: left;
}

#extraneous-browser-div {
	width: 100%;
}

#styles-browser,
#family-browser,
#trends-browser {
	margin-bottom: 1em;
	float: right;
}

body.secondary #styles-browser p,
body.secondary #family-browser p,
body.secondary #trends-browser p {
	float: left;
	margin: 0 1em 0 0;
}

#style-select,
#family-select,
#trend-select {
	float: left;
}

#style-select fieldset,
#family-select fieldset,
#trend-select fieldset {
	border: none;
}

#style-select #style-submit,
#family-select #family-submit,
#trend-select #trend-submit {
	margin-left: 0.5em;
	float: left;
	border: 1px solid #999999;
	font-size: 100%;
	padding: 1px 3px;
}

#style-select #location,
#family-select #location,
#trend-select #location {
	border: 1px solid #b7b7b7;
	padding: 1px;
	float: left;
  font-size: 100%;
}


/* Enlarged Swatch
----------------------------------- */
#enlarged-swatch {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 100px;
	background-color: #B7B7B7;
	padding: 2px;
	display: none;
}

#enlarged-swatch dt img {
	width: 100px;
	height: 100px;
}



/* Personality Profile pages in general
----------------------------------- */
#personality-section #header h1 {
background-image:url("/images/text/h1/color.jpg");
}

#personality-section #content {
padding-top:30px 
}