@import url(/assets/styles/navigation.css);
@import url(/assets/styles/home.css);
@import url(/assets/styles/style_me.css);
@import url(/assets/styles/products.css);
@import url(/assets/styles/salons.css);
@import url(/assets/styles/charles.css);
@import url(/assets/styles/win.css);
@import url(/assets/styles/other.css);
@import url(/assets/styles/free_content.css);
@import url(/assets/styles/vertical_nav.css);
@import url(/assets/styles/slide_in_popup.css);


/* ~~~~~ RESET ELEMENT STYLING SO DOESN'T USE BROWSER DEFAULT'S ~~~~~ */

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;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

/* ~~~~~ REDEFINED STYLES ~~~~~ */

html {
	min-height: 100.2%;
}
body {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 75%;
	background-color: #EEE;
	text-align: center;
	behavior: url(/assets/styles/csshover.htc);
}
.hidden {
	display:none;
}
h2 span {
	position: absolute;
	top: 0;
	left: -999px;
}
strong {
	font-weight: bold;	
}
.caption {
	color: #666;
	padding: 5px 0;
	font-size: 90%;
}
.margin {	
	margin:12px 0 15px 0;
}
.clear {
	clear:both;
}

/* STYLES FOR CLEARING NEW LINE ON FLOATED LIST ITEMS */

/* For all non-IE browsers, add this class to first LI on new line */
.clear-floated-list-items .new-line {
	clear:left;
}
/* for IE browsers, the inline-block method */
* + html .clear-floated-list-items,
* html .clear-floated-list-items {
	float:none !important; 
}
* + html .clear-floated-list-items li,
* html .clear-floated-list-items li {
	float:none !important; 
	display:inline-block; 
	vertical-align:top; 
	overflow:hidden; 
	word-wrap:break-word;
}
/* for IE 6 */
* html .clear-floated-list-items li {
	display:inline; 
}
/* for IE 7 */
* + html .clear-floated-list-items li {
	display:inline;
}

/* ~~~~~~~~~~ GENERIC LINK STYLES ~~~~~~~~~~ */
a {
	color: #ff0066;
	text-decoration: underline;
}
a:hover {
	color: #000;
}
a.bold-link {
	font-weight:bold;
}
a.black-link {
	color: #000;
	text-decoration: underline;
}
a:hover.black-link {
	color: #ff0066;
}
a.bold-black-link {
	color: #000;
	text-decoration: underline;
	font-weight:bold;
}
a:hover.bold-black-link {
	color: #ff0066;
}
a.green-link {
	color:#6F7809;
}
a.bold-green-link {
	color:#6F7809;
	font-weight:bold;
}

/* ~~~~~~~~~~ GENERIC LAYOUT STYLES ~~~~~~~~~~ */

#page-container {
	width: 987px;
	margin: 0px auto 0 auto;
	background-image: url(/assets/images/content-background.gif);
	overflow: hidden;
}
.half-page-content {
	width:340px;
	padding-right:14px;
	margin-top:20px;
	float:left;
}

/* ~~~~~ MAIN LAYOUT STYLES ~~~~~ */

#top-content {
	background-image: url(/assets/images/top-content.gif);
	width: 633px;
	height: 12px;
	clear: both;
	margin-left: 14px;
	font-size: 0;
}
#main-content {
	float: left;
	width: 942px;
	margin-left: 14px;
	display: inline;
}
#main-content-content {
	float: left;
	width: 942px;
	margin-left: 14px;
	background-image: url(/assets/images/main-content-background.gif);
	background-repeat: repeat-y;
	display: inline;
}
#top-row {
	background-color: #FFF;
	padding-left: 20px;
	overflow: hidden;
}
#bottom-content {
	background-image: url(/assets/images/bottom-content.gif);
	width: 589px;
	height: 12px;
	clear: both;
	font-size: 0;
}
#bottom-row {
	overflow: hidden;
}
#bottom-footer {
	width: 533px;
	height: 5px;
	font-size: 0
}

/* ~~~~~~~~~~ CONTENT STYLES FOR ALL PAGES ~~~~~~~~~~ */

#top-content-page {
	background-image: url(/assets/images/top-content.gif);
	width: 613px;
	clear: both;
	margin-left: 14px;
	padding: 15px 0 15px 20px;
	font-size: 80%;
}
#content-page {
	float: left;
	background-color: #FFF;
	width: 680px;
	padding-left: 20px;
	padding-bottom: 20px;
}
#main-content-background {
	background-color: #F00;
	float: left;
	width: 100%;	
}
#breadcrumb {
	color: #666;	
	text-transform: lowercase;
}
#breadcrumb a, #breadcrumb a:link {
	color: #666;	
	text-decoration: none;
}
#breadcrumb a:hover {
	color: #F90087;	
	text-decoration: underline;
}
div.intro-text p {
	color: #666;
	font-size: 130%;
	font-weight: bold;
	margin: 10px 10px 15px 0;
}

/* ~~~~~ SIGN UP AND WIN STYLES ~~~~~ */

#sign-up-and-win {
	background-color: #000;
	float: left;
	width: 158px;
	padding: 15px;
}
#sign-up-and-win h2 {
	background-image: url(/assets/images/h2-cw-vips-wanted.gif);
	width: 158px;
	height: 26px;
}
#sign-up-and-win h2 a {
	width: 100%;
	height: 26px;
	display:block;
}
#sign-up-and-win h2 span {
	margin-left: -9999px;	
}
#sign-up-and-win .form-area {
	clear: both;	
}
#sign-up-and-win p {
	margin: 7px 0;
	line-height:1.2em;	
}
#sign-up-and-win span {
	position: absolute;
	top: 0;
	left: -999px;	
}
#sign-up-and-win .signup {
	clear: both;
	background-color: #FFFF7F;
	padding: 1px;
	font-size: 75%;
	float: left;
	margin-top: 6px;
	width: 105px;
}
#sign-up-and-win .go-button {
	float: left;
	margin: 7px 0 0 10px;
}
.sign-up-and-win-wide {
	width: 270px !important;
	padding:15px !important;
}
.sign-up-and-win-wide h2 {
	width: 260px !important;
}
.sign-up-and-win-wide p {
	margin:12px 0 0 0 !important;
}
.sign-up-and-win-wide img
{
	margin: 12px 0 0 0;
	float:right;
}
.sign-up-and-win-wide .form-area {
	float:left;
	width:170px;
	margin-top:10px;
	clear:none !important;
}
.sign-up-and-win-wide .signup {
	width: 120px !important;
}

/* ~~~~   Ad Unit    ~~~~ */
#adunit
{
	float: left;
	width: 158px;
	margin-top: 15px;
}
#adunit a, #adunit a:link {
	color: #FFF;	
}
#adunit a:hover {
	color: #FF0;	
}

/* ~~~~~  RELATED LINKS ~~~~~ */
#related-links {
	float: left;
	width: 158px;
	padding: 15px;
	background-color: #000;
	color: #FFF;
	margin-top: 15px;
}
#related-links h2 {
	background-image: url(/assets/images/h2-related-links.gif);
	width: 158px;
	height: 23px;
}
#related-links h2 span {
	margin-left: -999px;
}
#related-links ul {
	padding: 15px 5px 5px 0;	
}
#related-links li {
	padding-bottom: 5px;
	font-size: 90%;
}
#related-links a, #related-links a:link {
	color: #FFF;	
}
#related-links a:hover {
	color: #FF0;	
}

/* ~~~~~  AVAILABLE AT ~~~~~ */

#available-at {
	float: right;
	width: 158px;
	padding: 15px;
	background: #FFF;
	color: #000;
	margin-top: 15px;
}
#available-at h2 {
	background: url(/assets/images/h2-available-at.gif);
	width: 158px;
	height: 24px;
}
#available-at h2 span {
	margin-left: -999px;	
}
#available-at ul {
	margin-top:10px;
}
#available-at li {
	overflow:hidden;
	margin-bottom:2px;
}
#available-at li img {
	float:left;
	display:block;
}
#available-at li a.buy-now {
	float:left;
	display:block;
	margin:3px 0 0 7px;
	background: url(../images/pink-bullet.gif) 0 1px no-repeat;
	padding-left:10px;
	font-weight: bold;
	text-decoration:none;	
	white-space:nowrap;
}

/*
#available-at {
	float: right;
	width: 158px;
	padding: 15px 15px 50px 15px;
	background-color: #F4F4F2;
	color: #000;
	margin-top: 15px;
}
#available-at h2 {
	background-image: url(/assets/images/h2-available-at.gif);
	width: 158px;
	height: 20px;
}
#available-at h2 span {
	margin-left: -999px;	
}
.available-at-item {
	padding: 7px 0 7px 10px;
	clear: both;
}
.available-at-item img {
	float: left;
	padding-left: 5px;	
}
.available-at-item a, .available-at-item a:link {
	font-size: 95%;
	float: right;
	text-align: right;
	color: #000;
	font-weight: bold;
	background-image: url(/assets/images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 0.7em;
	padding: 5px 0 0 10px;
}
.available-at-item a:hover {
	color: #F90087;	
}
*/

/* ~~~~~ ADDITIONAL CONTENT BOX ~~~~~ */

#additional-side {
	float: right;
	width: 188px;
	color: #FFF;
}
#additional-content {
	float: right;
	width: 300px;
	color: #FFF;
}

/* ~~~~~ SEARCH STYLES ~~~~~ */

#search-content {
	min-height:400px;
	position:relative;
}
#search-content legend,
#search-content h3 {
	color: #666;
	font-size: 120%;
	font-weight: bold;
	padding: 20px 10px 10px 0;	
}
#search-content legend {
	color: #666;
	font-size: 120%;
	font-weight: bold;
	padding: 20px 10px 10px 0;	
}
#search-content .searchinput {
	float:left;
	margin:10px 3px 0 0;
	height:1.05em;
	font-size:0.95em;
	width:150px;
}
#search-content .go-button {
	margin:10px 0 0 0;
}
#search-content ul#results-list {
	margin:10px 0 0 0;
}
#search-content ul#results-list li {
	overflow:hidden;
	margin:0 8px 15px 0;
	padding-bottom:15px;
	background: url(/assets/images/dotted-line.gif) left bottom no-repeat;	
}
#search-content ul#results-list li h4 {
	color:#FF0066;
	font-weight:bold;
	margin-bottom:15px;	
}
#search-paging-bar {
	font-family:Arial, Helvetica, sans-serif;
	margin:30px 0 25px 0;
	overflow:auto;
}
#search-paging-bar h3 {
	float:left;
	width:250px;
	padding:0;
}
#search-paging-bar .pagination-links {
	float:left;
}
#search-paging-bar .pagination-links li {
	display:inline;
}
#search-paging-bar a:link {
	text-decoration: none;
}
#search-paging-bar a:hover {
	text-decoration: underline;
	color: #FF9900;
}
#search-again {
	position:absolute;
	right:20px;
	top:28px;
}
#search-again legend {
	font-size:0.9em;
}
#search-again .searchinput {
	margin:0 3px 0 0;
}
#search-again .go-button {
	margin:0;
}
/* BAFTA PAGE */
h3 span, h4 span {
	position: absolute;
	left: -999em;
	top: 0;
}
.bafta-intro-text {
	color: #af8f57;
	margin: 15px 0;
	font-size: 1.4em;
}
#behind-the-scenes-col {
	float: left;
	width: 353px;
}
#behind-the-scenes-col h3, #red-carpet-col h3 {
	margin-bottom: 7px;
}
#behind-the-scenes-container {
	padding: 7px;
	background: url(../images/dotted-border.gif) bottom left #eee repeat-x;
}
#video-container p {
	margin: 7px 0;
	line-height: 1.3;
}
#behind-the-scenes-col h4 {
	margin: 10px 0;
}
.news-item {
	overflow: hidden;
	width: 100%;
	background: url(../images/dotted-border.gif) repeat-x bottom left;
	margin: 0 0 15px;
	padding: 0 0 15px;
}
.news-item img {
	float: left;
}
.news-item h5 {
	margin: 0 0 3px 109px;
}
.news-item p {
	margin: 0 0 0 109px;
}
.news-item a {
	background: url(../images/arrow-news.gif) no-repeat 0 4px;
	color: #af8f57;
	text-transform: uppercase;
	padding: 0 0 0 10px;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
}
.news-item a:hover {
	color: #000;
}
#red-carpet-col {
	width: 339px;
	float: right;
	background: #eee;
	padding: 7px;
	margin-right: 8px;
	display: inline;
}
.top-row, .bottom-row {
	overflow: hidden;
	width: 100%;
	background: url(../images/dotted-border.gif) repeat-x bottom left;
	padding: 0 0 15px 0;
	margin: 0 0 15px;
}
.bottom-row {
	background: none;
	padding: 0;
}
.red-carpet-item {
	width: 159px;
}
.red-carpet-item.first {
	float: left;
}
.red-carpet-item.last {
	float: right;
}
.red-carpet-item a {
	color: #af8f57;
	display: block;
	margin: 5px 0;
	background: url(../images/arrow-get-the-look.gif) no-repeat 0 4px;
	padding: 0 0 0 12px;
	font-weight: bold;
}
.red-carpet-item a:hover {
	color: #000;
}

/* ~~~~~ PERSONAL SELECTOR HAIR CONSULTATION SOLUTION STYLES ~~~~~ */

/* generic */
.steps {
	display: block;
	margin: 20px 0;
}
#brand-logos {
	display: block;
	margin: 30px 0 0;
}
.graphic {
	float: left;
}
.form-row {
	overflow: hidden;
	width: 100%;
	padding: 0 0 3px 0;
}
#button-container input.next-button {
	float: right;
}
#button-container {
	position: absolute;
	bottom: 30px;
	left: 25px;
	width: 320px;
}

/* step one */
#step-one-container {
	overflow: hidden;
	width: 100%;
}
#step-one-container #content {
	background: #f06;
	width: 320px;
	min-height: 276px;
	padding: 30px 25px;
	float: left;
}
* html #step-one-container #content {
	height: 276px;
}
#step-one-container #content p {
	font-size: 1.8em;
	color: #fff;
	line-height: 1.2;
}
#step-one-container #form {
	display: block;
	margin: 20px 0 0;
}
#step-one-container label {
	display: block;
	font-size: 1.4em;
	margin: 0 0 5px 0;
	color: #fff;
	font-weight: bold;
}
#step-one-container input {
	vertical-align: bottom;
}

/* step two */
#step-two-container {
	overflow: hidden;
	width: 100%;
}
#step-two-container #content {
	background: #f06;
	width: 320px;
	min-height: 276px;
	padding: 30px 25px;
	float: left;
	position: relative;
}
* html #step-two-container #content {
	height: 276px;
}
#step-two-container #content p {
	font-size: 1.8em;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
#step-two-container form {
	display: block;
	margin: 20px 0 0;
}
#step-two-container input {
	float: left;
}
#step-two-container label {
	float: left;
	font-size: 1.4em;
	color: #fff;
	font-weight: bold;
	margin: 0 0 0 5px;
	width: 280px;
	display: inline;
}

/* step three */
#step-three-container {
	overflow: hidden;
	width: 100%;
}
#step-three-container #content {
	background: #f06;
	width: 660px;
	min-height: 276px;
	padding: 30px 25px;
	float: left;
	position: relative;
}
* html #step-three-container #content {
	height: 276px;
}
#step-three-container #content p {
	font-size: 1.8em;
	color: #fff;
	line-height: 1.2;
}
#step-three-container #content p small {
	font-size: 0.6em;
}
#step-three-container form {
	display: block;
	margin: 15px 0 20px;
}
#step-three-container input {
	float: left;
}
#step-three-container label {
	float: left;
	font-size: 1.2em;
	color: #fff;
	font-weight: bold;
	margin: 0 0 0 5px;
	width: 500px;
	display: inline;
}

/* holding */
#holding-container {
	overflow: hidden;
	width: 100%;
	margin: 10px 0 0;
}
#holding-container #content {
	background: #f06;
	width: 320px;
	min-height: 276px;
	padding: 30px 25px;
	float: left;
	position: relative;
}
* html #holding-container #content {
	height: 276px;
}
#holding-container #content p {
	font-size: 1.8em;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
.loading-graphic {
	display: block;
	margin: 50px 0 0;
}