/* 
	Document:				hp.css
	Creation date:			17 January 2007
	Created by:				Gemma Leigh
	This version:			*** Commented for development ***
	Deployment version:		Sitename/css/hp.css
	Notes:					Homepage styles
	-----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	
	Header font changes
	Generic (large left image) homepage styles
	- Sale strip
	- Details black strip
	Single image homepage styles
	Archive
*/

/* Header font changes */
.special-projects h3 		{ font-size: 1.500em;}
.archive h2					{ font-size: 0.857em;}
.archive h3.title			{ font-size: 0.857em; text-transform: uppercase;}
.archive h3.underline		{ font-size: 1.500em;}
.archive h3					{ font-size: 1.286em;}
.archive h3 a				{ font-size: 18px!important; color: #000;}
.archive h3 a:hover	span.grey-text	{ color: #797979 !important;}

/* =Generic homepage styles
-----------------------------------------------------------------------------*/
#main-content				{ position: relative; width: 960px; float: left; clear: both;}
.main-image					{ float: left; width: 640px; display: block;}
.secondary-image			{ float: left; width: 320px; display: block;} /* BUG: 3px float see ie.css */
.single-image .main-image	{ float: none; width: 960px;}

/* Sale red strip*/
#sale-overlay				{ position: absolute; top: 218px; left: 0px;}
#sale-overlay				{ width: 620px; height: 49px; background: url(../images/bg-sale-overlay-640.png) bottom left no-repeat; padding: 0 0 0 20px; }
#sale-overlay a				{ background: url(../images/arrow-white-right.gif) center right no-repeat; padding-right: 12px; color: #FFF;}
#sale-overlay a				{ position: relative; top: 14px; }

/* Details black strip*/
#main-overlay				{ position: absolute; top: 287px; left: 0px; width: 960px; float: left; background: url(../images/bg-main-overlay.png) bottom left repeat;}

#main-image-title			{ width: 600px; float: left; margin: 0 20px 0 20px; display: inline;}
#secondary-image-title		{ width: 320px; float: left;}

#main-overlay h2			{ padding-top: 14px; padding-bottom: 2px;}
#main-overlay h3			{ padding-bottom: 16px; text-transform: uppercase;}

#main-overlay ul,
#main-overlay .dash      	{ width: 100%; float: left; background: url(../images/header-divider.gif) top left repeat-x; padding: 12px 0 17px 0;}

/* Dotted list */
#main-overlay ul li						{ float: left; background: url(../images/header-bullet.gif) 100% 80% no-repeat;}
#main-overlay ul li						{ padding:0 30px 0 0;}

#main-overlay ul li#homepage-select		{ padding: 0; background: none;}
#main-overlay select 					{ width: 14.6em; text-transform: uppercase !important; font-size:0.786em !important; position: relative; top: 4px; float: left;}
#main-overlay input.proxy-simple		{ font-size:0.786em !important; padding: 2px 0 2px 0; margin: 4px 0 -3px 10px; }

/* Dots on first and last list items */
#main-overlay ul li#homepage-last 		{ background: url(../images/header-bullet.gif) 0% 80% no-repeat; padding:0 0 0 30px;}
#main-overlay ul li a					{ white-space: nowrap; padding: 5px 0 0 0; margin: 0; display: block;}
#main-overlay ul li.last				{ background: none; padding: 0;}


/* =Single image homepage styles
-----------------------------------------------------------------------------*/
.single-image #sale-overlay					{ width: 940px; background: url(../images/bg-sale-overlay-940.png) bottom left no-repeat;}
.single-image #main-overlay .dash     		{ width: 100%; float: left; background: url(../images/header-divider.gif) top left repeat-x; padding: 15px 0 18px 0;}
.single-image #main-overlay select 			{ position: relative; top: 2px;}
.single-image #main-overlay input.proxy-simple	{ margin: 2px 0 -4px 10px; }
.single-image #main-image-title				{ width: 460px; float: left; margin: 0 20px 0 20px; display: inline;}
.single-image #secondary-image-title		{ width: 420px; float: left; margin-right: 40px; display: inline;}

/* Homepage - Shoes*/
.single-image .shoes #main-overlay .dash	{ padding-top: 17px;}
/* Homepage - Perfume */
.single-image .perfume #sale-overlay		{ top: 240px;}
.single-image .perfume #main-overlay		{ top: 310px;}
.single-image .perfume #main-overlay h2		{ padding-bottom: 11px;}
.single-image .perfume #main-overlay .dash	{ padding-top: 18px;}
.single-image #footer-wrapper				{ margin-top: 0;}

/* Special projects - Index */
.special-projects h3 						{ margin-top: 10px; padding-bottom: 20px;}
.special-projects h4						{ margin-top: 15px;}
.special-projects .project					{ width: 470px; margin-right: 20px; float: left; margin-bottom: 50px; display: inline; padding-top: 30px;}
.special-projects .even 					{ margin-right: 0;}

/* Special projects */
.special-projects .special-projects-detail	{ width: 960px; overflow: hidden; margin-top: 20px;}
.special-projects .special-projects-main	{ width: 540px; float: left;}
.special-projects .special-projects-main p  { margin:0; padding:0 20px 22px 0;}
.special-projects .special-projects-side	{ width: 320px; float: right; border-left: 1px solid #666; padding-left: 20px;}
.special-projects .special-projects-side li { padding-bottom: 10px;}

/* =Archive
-----------------------------------------------------------------------------*/
.archive-wrapper			{ width: 960px; float: left; clear: both;}
.project-wrapper			{ width: 960px; float: left; padding-bottom: 26px;}
.video-wrapper				{ width: 960px; float: left; margin: 15px 0 0 0; padding: 0; }

.archive h3					{ margin: 14px 0 0 0; padding-bottom: 0;}
.archive h3 span.grey-text	{ padding-left: 5px;}
.archive h4					{ margin-top: 2px;}
.archive .project			{ width: 470px; margin: 0 20px 0 0;  float: left; display: inline;}
.archive .even 				{ margin-right: 0px;}

.archive h2.title			{ float: left;}
.archive h3.title			{ margin: 0; padding: 0 0 0 30px; float: left; clear: right; color: #999999;}

/* =Archive navigation */
/* Set navigation to be the same as the main nav*/
.navigation				{ width: 960px; float: left; overflow: hidden; margin: 21px 0 20px 0; background: url(../images/header-divider.gif) bottom left repeat-x;}

.navigation ul			{ width: 960px; float: left;}
.navigation ul li		{ float: left; background: url(../images/header-bullet.gif) 100% 36% no-repeat;}
.navigation ul li		{ padding: 0 30px 15px 0;}
.navigation ul li.last 	{ padding-right: 0; background: none !important;}

.navigation .primary-nav,
.navigation .secondary-nav			{ margin: 0; padding: 2px 0 2px 0;}

.navigation .primary-nav 			{ padding: 5px 0 8px 0; margin-bottom: 0px;}
.navigation .primary-nav li 		{ background: url(../images/header-bullet.gif) 100% 38% no-repeat; }
.navigation .primary-nav li.active	{ color: #FFFFFF;}

.navigation .secondary-nav				{ margin-bottom: 10px;}
.navigation .secondary-nav li.active	{ background: url(../images/header-bullet.gif) 100% 45% no-repeat; }
.navigation .secondary-nav li.active a	{ display: block; font-size: 1.909em; letter-spacing: 2px; position: relative; top: -10px; margin-bottom: -20px;}