﻿/* ------------------------------------------------
	
	Copyright © 2008 Starfish
	Design by Flightless - www.flightless.co.nz 
	
	
	Version 1.0 - 07.07.08 (GLOBAL STYLE SHEET) 
	
	* Change log: COMPLETE CSS
	

	 =GLOBAL RESETS 
	 =GLOBAL STYLES
	 
	 =COLUMN WIDTHS
	 =HEADING IMAGES
	 
	 =HEADER + NAVIGATION
	 =SUBNAV + PAGE HEADINGS
	 
	 =HOME / COLLECTION
	 =ABOUT
	 =STORES
	 =STOCKISTS
	 =CONTACT
	 	
	 =FOOTER 
	 
	 =sIFR

--------------------------------------------------- */	 
/* =GLOBAL RESETS 
--------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,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: normal; 
	font-style: normal; 
	font-size: small; 
	font-family: inherit; 
	line-height: 1.5;
	text-align: left;}
ol,ul {
	list-style: none;
}
.clearboth {
	clear: both; height: 1px; font-size: 0.01px; line-height: 0.01px;
}
.indent {
	text-indent: -9999px;
}
:focus {
	-moz-outline-style: none;
	outline: 0;
}
body {
	font-family: Arial, sans-serif;
	background: #eeece0;
	color: #807d78;
}

/* =GLOBAL STYLES 
--------------------------------------------------- */
#wrapper {
	margin: 0px auto;
	width: 975px;
}
#main {
	float: left;
	width: 945px;
	background: #FFF;
	padding: 15px;
}
#collection #main {
	float: left;
	width: 975px;
	height: 715px;
	background: #FFF;
	padding: 0px;
}	
#mainTexture {
	float: left;
	width: 945px;
	background: #FFF url('/images/texture.jpg') left bottom no-repeat;
	padding: 15px 15px 50px 15px;
}
h2 {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px 0;
}
h3 {
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 6px 0;
}
p {
	margin: 0 0 22px 0;
	font-size: 12px;
}	
a {
	text-decoration: none;
	color: #739c9a;
	font-size: 11px;
}	
a:hover {
	color: #87B0AE;
	text-decoration: underline;
}
a.action {
	padding: 2px;
}
a.action:hover {
	text-decoration: none;
	background: #def2f6;
	padding: 2px;
}
#navigation li a:hover, a:hover.viewCollection {
	border-bottom: none;
}
a:hover.image {
	border: none;
	border-bottom: none;
	text-decoration: none;
}	
.dots {
	height: 1px;
	margin: 15px 0;
	background: #FFF url('/images/dots1.gif') left 50% repeat-x;
}
#logo {
    float: left;
    padding: 16px 0px 0px 25px;
}
#logo a {
    display: block;
    text-indent: -9999px;
    height: 35px;
    width: 102px;
    background: url(/images/starfish_logo.png) no-repeat top left;
}
#collection #logo a {
    display: block;
    text-indent: -9999px;
    height: 35px;
    width: 102px;
    background: url(/images/starfish_collection_logo.png) no-repeat top left;
} 
.bold {
	font-weight: bold;
	font-size: inherit;
}

/* =COLUMN WIDTHS 
--------------------------------------------------- */
.c145 {
	float: left;
	width: 145px;
	margin: 0 0 0 15px;
}
.c305 {
	float: left;
	width: 305px;
	margin: 0 0 15px 15px;
}

.c450 {
	float: left;
	width: 440px;
	margin: 0 10px 0 15px;
	display: inline;
}	
.c465 {
	float: left;
	width: 465px;
}
.c625 {
	padding: 15px;
	float: left;
	width: 595px;
	background: #f5f4f3;
}
.c945 {
	float: left;
	width: 945px;
}

/* =sIFR
--------------------------------------------------- */

/* heading Implementation */

.headingsHolder {
	padding: 8px 0px 0px 0px;
	height: 50px;
}
h1.collectionTitleHeader {
	padding: 0px;
	margin: 0px;
	font-size: 20px;
	font-weight: normal;
	line-height: 22px;
	color:#656056;
	text-transform: uppercase;
}
h1.collectionDateHeader {
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
	color:#656056;
	text-transform: uppercase;
}
	
/* =HEADING IMAGES 
--------------------------------------------------- */

h1.aboutStarfish {
	float: left;
	margin: 0;
	height: 46px;
	width: 175px;
	background: url('/images/h1-about-starfish.gif') left bottom no-repeat;
}
h1.aboutStarfish-sub {
	float: left;
	margin: 0;
	padding: 10px 0 0 0;
	height: 18px;
	width: 175px;
	background: url('/images/h1-about-starfish.gif') left bottom no-repeat;
}
h1.starfishStores {
	margin: 10px 0 0 0;
	height: 18px;
	background: url('/images/h1-starfish-stores.gif') left 50% no-repeat;
}
h1.stockists {
	margin: 10px 0 0 0;
	height: 18px;
	background: url('/images/h1-stockists.gif') left 50% no-repeat;
}	
h1.contact {
	margin: 10px 0 0 0;
	height: 18px;
	background: url('/images/h1-contact.gif') left 50% no-repeat;
}	
h1.signup {
	margin: 10px 0 0 0;
	height: 18px;
	background: url('/images/h1-signup.gif') left 50% no-repeat;
}
h2.previousCollections {
	margin: 10px 0 10px 15px;
	height: 38px;
	width: 465px;
	float:left;
	background: url('/images/h2-previous-collections.gif') left 50% no-repeat;
}
h2.latest a {
	display: block;
	margin: 0 0 15px 0;
	width: 54px;
	height: 20px;
	background: url('/images/h2-latest.gif') left bottom no-repeat;
}
h2.signup {
	margin: 10px 0 15px 0;
	height: 14px;
	background: url('/images/h2-signup.gif') left 50% no-repeat;
}	
h2.top5Picks {
	margin: 0;
	height: 11px;
	background: url('/images/h2-top5-picks.gif') left 50% no-repeat;
}

/* about page headers */
h2.aboutHeader {
	margin: 0 0 10px 15px;
}
h2.ourClothesOurWay {
	margin: 12px 0px 8px 0px;
	height: 16px;
	width: 190px;
	background: url('/images/h2-our-clothes.gif') left top no-repeat;
	font-size: 1px;
	line-height: 1px;
}
h2.ourStory {
	margin: 12px 0px 8px 0px;
	height: 16px;
	width: 86px;
	background: url('/images/h2-our-story.gif') left top no-repeat;
	font-size: 1px;
	line-height: 1px;
}
h2.ourCommitment {
	margin: 12px 0px 8px 0px;
	height: 16px;
	width: 146px;
	background: url('/images/h2-our-commitment.gif') left top no-repeat;
	font-size: 1px;
	line-height: 1px;
}
h2.ourClothesOurWay a, h2.ourStory a, h2.ourCommitment a {
	text-indent: -3000px;
	display: block;
	height: 16px;
}	
h1.aboutStarfish-sub a {
	display: block;
}

/* store page headers */
h3.top5-1 {
	margin: 0;
	height: 20px;
	background: url('/images/h3-1.gif') left 50% no-repeat;
}	
h3.top5-2 {
	margin: 0;
	height: 20px;
	background: url('/images/h3-2.gif') left 50% no-repeat;
}	
h3.top5-3 {
	margin: 0;
	height: 20px;
	background: url('/images/h3-3.gif') left 50% no-repeat;
}
h3.top5-4 {
	margin: 0;
	height: 20px;
	background: url('/images/h3-4.gif') left 50% no-repeat;
}
h3.top5-5 {
	margin: 0;
	height: 20px;
	background: url('/images/h3-5.gif') left 50% no-repeat;
}
h3.storeLocations {
	margin: 0;
	height: 11px;
	background: url('/images/h3-store-locations.gif') left 50% no-repeat;
}
h3.contactDetails {
	margin: 0;
	height: 11px;
	background: url('/images/h3-contact-details.gif') left 50% no-repeat;
}

/* stockists page headers */
h3.stockistsCountry {
	margin: 0 0 10px 0;
	height: 11px;
	background: url('/images/h3-stockists-country.gif') left 50% no-repeat;
}	
h3.stockistsRegion {
	margin: 0 0 10px 0;
	height: 11px;
	background: url('/images/h3-stockists-region.gif') left 50% no-repeat;
}
h3.stockistsContact {
	margin: 0 0 10px 0;
	height: 11px;
	background: url('/images/h3-stockists-contact.gif') left 50% no-repeat;
}

/* =HEADER + NAVIGATION
--------------------------------------------------- */	
#headerLarge {
	float: left;
	width: 975px;
	height: 460px;
	background-repeat: no-repeat;
	background-color: #F5F4F3;
}
#headerMedium {
	float: left;
	width: 975px;
	height: 235px;
	background-color: #F5F4F3;
}	
#headerSmall {
	float: left;
	width: 975px;
	height: 130px;
	background-color: #F5F4F3;
}
#headerCollection {
	float: left;
	width: 975px;
	height: 115px;
	background-color: #FFFFFF;
}	

.collections-banner {
	background: url('/images/banners/collections.jpg') no-repeat;
}
.about-banner {
	background: url('/images/banners/about.jpg') no-repeat;
}
.ourClothes-banner {
	background: url('/images/banners/our-clothes.jpg') no-repeat;
}
.ourStory-banner {
	background: url('/images/banners/our-story.jpg') no-repeat;
}
.ourCommitment-banner {
	background: url('/images/banners/our-commitment.jpg') no-repeat;
}
.stores-banner {
	background: url('/images/banners/header-clothesrack.jpg') no-repeat;
}
.stockists-banner, .contact-banner, .signup-banner {
	background: url('/images/banners/header-texture.jpg') no-repeat;
}

#navigation {
	float: right;
	width: 	466px;
	height: 37px;
	margin: 20px 15px 0 0;
	display: inline;
	background: #FFF;
}
#navigation li {
	float: left;
	height: 9px;
}
#navigation li a {
	display: block;
	height: 9px;
	line-height: 0;
}
#navigation li a.navCollections {
	width: 83px;
	height: 9px;
	margin: 14px 0 0 23px;
	background: url('/images/navigation.gif') 0 -21px no-repeat;
}
#navigation li a.navAbout {
	width: 42px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -98px -21px no-repeat;
}
#navigation li a.navStores {
	width: 47px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -155px -21px no-repeat;
}
#navigation li a.navStockists {
	width: 66px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -219px -21px no-repeat;
}
#navigation li a.navLatest {
	width: 44px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -303px -21px no-repeat;
}
#navigation li a.navContact {
	width: 56px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -363px -21px no-repeat;
}
#navigation li a:hover.navCollections {
	background: url('/images/navigation.gif') 0 -10px no-repeat;
}
#navigation li a:hover.navAbout {
	background: url('/images/navigation.gif') -98px -10px no-repeat;
}
#navigation li a:hover.navStores {
	background: url('/images/navigation.gif') -155px -10px no-repeat;
}
#navigation li a:hover.navStockists {
	background: url('/images/navigation.gif') -219px -10px no-repeat;
}
#navigation li a:hover.navLatest {
	background: url('/images/navigation.gif') -303px -10px no-repeat;
}
#navigation li a:hover.navContact {
	background: url('/images/navigation.gif') -363px -10px no-repeat;
}
#navigation li a.navCollections-current {
	width: 83px;
	height: 9px;
	margin: 14px 0 0 23px;
	background: url('/images/navigation.gif') 0 0 no-repeat;
}
#navigation li a.navAbout-current {
	width: 42px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -98px 0 no-repeat;
}
#navigation li a.navStores-current {
	width: 47px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -155px 0 no-repeat;
}
#navigation li a.navStockists-current {
	width: 66px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -219px 0 no-repeat;
}
#navigation li a.navLatest-current {
	width: 44px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -303px 0 no-repeat;
}	
#navigation li a.navContact-current {
	width: 56px;
	height: 9px;
	margin: 14px 0 0 14px;
	background: url('/images/navigation.gif') -363px 0 no-repeat;
}

/*homepage view collection free text link*/
#headerLarge .viewLink a {
	float: right;
	margin: 355px 0 0 0;
	padding: 5px 25px 5px 12px;
	text-decoration: none;
	background: url('/images/view-link.gif') no-repeat top right #FFFFFF;
	text-indent: 0px;
	font-size: 12px;
	color: #447880;
}
#headerLarge .viewLink {
	padding:0px 16px 0px 0px;
	background-image: url(/images/view-link.gif) no-repeat top right;
}
#headerLarge .viewLink a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background: url('/images/view-link.gif') no-repeat right -28px #6d99a0;
}

/* =SUBNAV + PAGE HEADINGS
--------------------------------------------------- */
#subNavigation {
	float: left;
	width: 920px;
	margin: 0;
	padding: 0 0 0 15px;
	position: relative;
}
#subNavigation ul {
	float: left;
	margin: 16px 0 0 15px;
}
#subNavigation ul li {
	float: left;
	margin: 0 0 0 6px;
	font-weight: bold;
	font-size: 11px;
}
#subNavigation ul li a {
	margin: 0;
	font-weight: normal;
}
#pageHeading {
	float: left;
	width: 945px;
	margin: 5px 0 15px 0;
}
#pageHeading-about {
	float: left;
	width: 945px;
	margin: 5px 0 0 0;
	height: 60px;
}

/* =HOME & COLLECTION BUILDR 
--------------------------------------------------- */
.introText {
	margin: 15px 0 0 0;
	font-size: 14px;
	float: left;
}
.introText p {
	margin: 0 0 8px 0;
	font-size: 14px;
}
p.latest {
	margin: 0 0 5px 0;
}
p.latest a {
	margin: 0 0 0 12px;
}
.collectionImage {
	float: left;
	width: 465px;
	height: 205px;
	background-image: left top no-repeat;
	background-color: #FFF;
}
/* Used only on the collection page */
.viewCollection a {
	display: block;
	float: right;
	width: 121px;
	height: 28px;
	margin: 170px 0 0 0;
	text-decoration: none;
	border: none;
	background: #FFF url('/images/view-collection.gif') 0 0 no-repeat;
	text-indent: -9999px;
}
.viewCollection {
	padding: 0 10px 0 0;
}
.viewCollection a:hover {
	background: #FFF url('/images/view-collection.gif') 0 -28px no-repeat;
}
.promoImage {
	width: 145px;
	height: 205px;
}
.promoTitle {
	margin: 10px 0px 2px 0px;
}
.promoTitle a, .promoTitle {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	color: #447880;
	line-height: 15px;
}
.promoText p {
	font-size: 11px;
	line-height: 15px;
}

.collection_holder {
	width: 975px;
	height: 715px;
}
#collection_html a {
	display: block;
	width: 975px;
	height: 715px;
	background: #FFF url('/images/collections/collection_noflash.gif') 0 0 no-repeat;
	text-indent: -9999px;
}
#collection_flash {
}


/* =ABOUT PAGES
--------------------------------------------------- */
.noMargin {
	margin-left: 0px;
}
.nzMade {
	float: right;
	height: 46px;
	width: 49px;
	margin: 0;
}

/* =STORE PAGE
--------------------------------------------------- */
.dots {
	height: 30px;
	margin: 0;
	background: url('/images/dots2.gif') left 50% repeat-x;
	display: block;
	clear: both;
}
.store {
	margin: 5px 0;
	background: #f5f4f3;
	width: 595px;
	display: block;
	clear: both;
	float: left;
}
h2.storeTitle {
	font-size: 14px;
	margin: 0 0 10px 0;
	padding: 0px;
}
.storeIntro {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	float: left;
}
.storeIntro p {
	font-size: 14px;
	line-height: 22px;
}
.store dl {
	float: left;
	width: 280px;
	margin: 0 15px 0 0;
	display: inline;
}
.store dl img {
	margin: 0 0 10px 0;
}
.store dt {
	font-size: 11px;
	font-weight: bold;
	padding: 0 0 0 5px;
}
.store dd {
	font-size: 11px;
	padding: 0 0 0 5px;
}
.store .label {
	float: left;
	margin: 0 0px 10px 0;
}
.store .label img {
	float: left;
	margin: 0 10px 0 0;
}
.store .label h3 {
	font-weight: bold;
	padding: 4px 0 0 0;
}
.store .label p {
	font-size: 12px;
}	
.store .labelURL {
	float: left;
	clear: both;
	padding: 0 0 0 5px;
}
.top5 h3 {
	float: right;
	margin: 0 0 5px 0;
	width: 144px;
	font-weight: bold;
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
}
.top5 p {
	float: right;
	width: 144px;
	font-size: 11px;
	line-height: 1.1;
	margin: 0;
}
.top5 img {
	float: left;
	margin: 0 15px 0 0;
	width: 145px;
}

/* =STOCKISTS PAGE
--------------------------------------------------- */
.boxCountry {
	float: left;
	margin: 0 15px 0 0;
	width: 145px;
}
.boxRegion {
	float: left;
	margin: 0 15px 0 0;
	width: 305px;
	*width: 295px;
}
.boxContact {
	float: left;
	width: 465px;
	*width: 455px;
}
.boxCountry ul, .boxRegion ul {
	margin: 10px 10px 20px 10px;
}
.boxContact dl {
	margin: 10px;
}	
.boxContact dt {
	font-weight: bold;
}
.boxContact dd {
	font-size: 11px;
}
.boxContact p {
	margin: 0px;
}
.dots2 {
	width: 440px;
	height: 1px;
	margin: 0 15px;
	background: url('/images/dots2.gif') left 50% repeat-x;
}	
.grey {
	padding: 5px 0;
	background: #f5f4f3;
}	
	
/* =CONTACT PAGE
--------------------------------------------------- */	
.contactForm p {
	margin: 20px 0;
	font-size: 12px;
}
.contactForm label {
	font-size: 12px;
	color: #736e64;
	font-weight: bold;
}
p.required {
	float: right;
	width: 200px;
	margin: 20px 0 0 0;
	padding: 0;
}	
form {
	float: left;
}
.formHolder {
	width: 585px;
}
fieldset {
	margin: 0 0 15px 0;
}
input, textarea {
	color: #807d78;
	border: 1px solid #cacaca;
	width: 350px;
}
input.radiobutton {
	border: none;
	width: auto;
}	
select {
	color: #807d78;
	border: 1px solid #cacaca;
	width: 350px;
	font-size: 11px;
	padding: 2px;
}
.message {
	height: 100px;
	width: 590px;
}	
.checkbox {
	width: auto;
	border: none;
}
span.checkbox {
	font-size: 12px;
}
.radio {
	margin: 0 0 5px 0;
	border: none;
	width: auto;
}
.submit {
	float: right;
	width: 133px;
	margin: 0 0 20px 0;
	border: none;
}
.contact dl {
	margin: 0 0 15px 0;
}
.contact dt {
	font-size: 11px;
	font-weight: bold;
}
.contact dd, .contact p {
	font-size: 11px;
}
	
/* =FOOTER
--------------------------------------------------- */
#footer {
	float: left;
	width: 975px;
	background: url('/images/page-base.png') left top no-repeat;
}	
#footer ul {
	float: right;
	padding: 20px 20px 20px 0px;
}
#footer ul li {
	float: left;
	margin-left: 10px;
	font-size: 11px;
	color: #999;
}	
#footer ul li a {
	color: #999;
	font-size: 11px;
}
#footer ul li a:hover {
	text-decoration: underline;
	color: #666;
}

/* ------------------------------------------------ */
/* ------------------------------------------------ */

