/* stylesheet.css - http://www.magaretnicole.com/ style sheet */
/* this style sheet determines placement, size, colours, 
background images, fonts, etc. for all the pages on your site */


html { 
	text-align: center; /* IE5 hack */ 
	}

body, #container, #header, #content, #footer {width: 700px;}

body { 
	text-align: left; /* IE5 hack */
      margin: 0 auto;
	background-color: #fffded;
	}

body.addresspages {
	width: 320px; height: auto;
	padding-left: 10px;
	background-color: #fdedf2;
	}


div, td, p, li, form, optgroup, input {
	text-align: justify;
	font-style: normal; 
	font-weight: normal;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, san-serif; 
	line-height: 15px;
	color: #560007;
	}

td {vertical-align: top;}



/* main divs - container, header, content, footer */

#container {
	position: absolute; 
	top: 0px; 
	height: auto;
	text-align: center;
	}


/* HEADER - top background image, main navigation ie. links to main pages */ 
#header {
	height:125px;
	background: url(graphics/head.gif) no-repeat;
	overflow: hidden; /* keeps header, content and footer together with no gap between */
	}

#home {
	position: absolute; left: 265px; top: 11px;  
	width: 160px; height: 105px;
	}


/* the main navigation links at top of each page.  nav1 sits to the left of the logo/#home div, nav2 sits to the right. */
#nav1 {
	position: absolute; left: 115px; top: 45px; 
	width: 145px; height: 70px;
	text-align: right;
	}

#nav2 {
	position: absolute; left: 442px; top: 45px; 
	width: 145px; height: 70px;
	text-align: left;
	text-transform: lowercase;
	}

/* for the div links #home, #mailto, #designby - img src="../graphics/transparent.gif" class="nav" - image expands to full h/w of div */
img.nav {
	width:100%; height:100%; 
	border: 0px;
	}

/* the SHOP link in #nav2, transforms the lowercase 'shop' to 'SHOP' */
span.shop {text-transform: uppercase; font-size: 12px;}



/* styling specific to main navigation links at top of each page */
#nav1 a:link {color:#f289ae; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav1 a:visited {color:#f289ae; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav1 a:active {color:#560007; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav1 a:hover {color:#412700; text-decoration: none; background-color:#f7b5cb; padding: 0px 8px;}

#nav2 a:link {color:#f289ae; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav2 a:visited {color:#f289ae; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav2 a:active {color:#560007; font-weight: bold; text-decoration: none; padding: 0px 8px;}
#nav2 a:hover {color:#412700; text-decoration: none; background-color:#f7b5cb; padding: 0px 8px;}


/* HEADER ENDS */





/* CONTENT - all the stuff in the middle of your page - tables, text, images, etc... */
#content {
	height: auto;
 	background: url(graphics/mid.gif) repeat-y;
	border: 0px; padding: 0px; margin: 0px;
	}

/* these are all tables that span the full width of the 'page' */
.tcontent, .ttitle, .tadmail, .ttitleindex, .ttop, .tbottom, .tshop {
	width: 650px; /* width of #content (700px) - width of .tcontent padding (25px x 2) */
	padding: 0px; margin: 0px 25px;
	cellspacing: 0px;
	}



/* the table at the top of the page containing a pink bar with the page title ie. PRESS, NEWS & EVENTS, etc. */
.ttitle {
	background-color:#f7b5cb;
	margin-top: 10px;
	}

.ttitleindex {
	background-color:#f7b5cb;
	margin-top: 5px;
	margin-bottom: 10px;
	}

/* the text within .ttitle */
.title {
	font-weight: bold; 
	text-align: center;
	text-transform: uppercase;
	}


/* various tables that go beneath .ttitleindex, contains shop tds such as .column1-4 and itempics/descriptions */

.ttop {
	border-top: 2px solid #f7b5cb; 
	border-right: 2px solid #f7b5cb; 
	border-left: 2px solid #f7b5cb; 
	border-bottom: 0px;
	}

.tbottom {
	border-top: 0px; 
	border-right: 2px solid #f7b5cb; 
	border-left: 2px solid #f7b5cb; 
	border-bottom: 2px solid #f7b5cb;
	}


.tcontent {
	border: 2px solid #f7b5cb; 
	}

.tshop {
	border: 2px solid #f7b5cb;
	}


/* upper left hand td on item index pages - clutches/index.html, ribbonspins/index.html, etc. - contains category description.  With the column being 325px w and the padding totalling 40px w, you have 285px w for content. */
.category1	{
	width: 325px; 
	background-color: #fff; 
	vertical-align: middle;
	text-align: center;
	padding: 20px 0px 30px 20px;
	}
.notation {
	font-size: 9px;
	}

/* upper right hand td on item index pages - clutches/index.html, ribbonspins/index.html, etc. - contains category image.  With the column being 325px w and the padding totalling 40px w, your image can be no wider than 285px. */
.category2	{
	width: 325px; 
	background-color: #fff; 
	vertical-align: middle;
	text-align: center;
	padding: 20px 0px 30px 10px;
	}

/* section headings - Large Wool Clutches, Small Cotton Clutches, etc. - similar to .ttitleindex above */
.categorytitle	{
	text-align: center;
	border-bottom: 2px dotted #f9c8d8;
	border-top: 2px dotted #f7b5cb;
	padding: 2px 0px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	}


/* tds containing thumbnail pics and color/price of each bag */
.column1, .column2, .column3, .column4 {
	width: 162px; 
	vertical-align: top;
	text-align: center; 
	background-color: #fff; 
	padding: 0px 0px 30px 0px;
	}

.column1-3, .column2-3, .column3-3 {
	vertical-align: top;
	text-align: center; 
	background-color: #fff; 
	padding: 0px 0px 10px 0px;
	}

.column1-5, .column2-5, .column3-5, .column4-5, .column5-5 {
	vertical-align: top;
	text-align: center; 
	background-color: #fff; 
	padding: 0px 0px 10px 0px;
	}

/* tds containing thumbnail pics and color/price of tote bags */
.column1t, .column2t, .column3t {
	width: 216px; 
	vertical-align: top;
	text-align: center; 
	background-color: #fff; 
	padding: 0px 0px 30px 0px;
	}

.thumbtext {
	text-align: center;
	font-size: 11px;
	text-transform: capitalize;
	}

optgroup {
	margin-top: 4px;
	}


/* defines width/height of thumbnails on item index pages */
.thumbnail {
	width: 130px; height: 118px;
	}
.thumbnail-wicker {
	width: 100px; height: 90px;
	}

/* styling specific to .thumbtext links */
.thumbtext a:link {color:#560007; text-decoration: none;}
.thumbtext a:visited {color:#560007; text-decoration: none;}
.thumbtext a:active {color:#560007; text-decoration: none;}
.thumbtext a:hover {color:#f289ae; text-decoration: none;}


/* left hand top td on item pages, contains product image */
.shop1 {
	width: 280px; 
	vertical-align: middle; 
	background-color: #fff; 
	padding-right: 20px;
	text-align: center;
	}

/* defines width/height, border color and margins of product image on item pages */
img.itempic {
	width: 260px; height: 235px;
	margin: 20px 0px 20px 20px;
	}

/* right hand top td on item pages, contains item description, ribbon menu, order link */
.shop2 {
	width: 330px; 
	vertical-align: middle; 
	background-color: #fff; 
	padding: 20px 20px 0px 0px;
	}

/* right hand, bottom left td on item pages, contains 'back' link */
.shop3 {
	width: 165px; 
	vertical-align: middle; 
	text-align: right;
	background-color: #fff; 
	padding: 0px 0px 20px 0px;
	}
/* right hand, bottom right td on item pages, contains 'view cart' link */
.shop4 {
	width: 200px; 
	vertical-align: middle; 
	text-align: left;
	background-color: #fff; 
	padding: 0px 20px 20px 0px;
	}


.itemheading {
	font-size: 12px; 
	font-weight: bold; 
	text-align: center;
	text-transform: uppercase;
	}

.itemsubheading {
	font-size: 11px; 
	font-weight: bold; 
	text-align: center;
	text-transform: uppercase;
	}

.price {
	font-size: 13px;
	font-weight: bold; 
	}

.description {
	text-align: center;
	vertical-align: middle;
	}

.ribbon {
	font-weight: bold;
	}
#ribbonform, form#orderform-wicker {text-align: center;} 
#orderform-wickername {font-weight: 700;}
#orderform-wickerheadline {font-size: 10px;}

.back {
	height:15px;
	width:52px;
	}

.view {
	height:15px;
	width:68px;
	}

/* press - magazine covers */
.cover {
	width: 55px; height: 72px;
	border: 1px solid #560007;
	}



/* the table at the bottom of most pages containing the ad and mailing list */
.tadmail {
	margin-top: 10px;
	}


.ad, .maillist {
	background-color: #fff;
	border: 2px solid #f5a0bd;
	padding: 2px 5px;
	font-size: 10px;
	text-align: center;
	vertical-align: middle; 
	}

.ad {
	margin: 0px 10px 0px 0px;
	}

/* you can have as many of these as you want - ie. .ad6, .ad7 etc. - just remember to change the image height/width in for each one as needed below.  width: 340px is the maximum size for any ad image.  height is up to you but keep the look of the site consistant, I recommend staying between 50-60px.  */
.ad1 {
	width: 300px; height: 52px;
	text-align: center;
	vertical-align: middle; 
	}

.ad2 {
	width: 300px; height: 52px;
	text-align: center;
	vertical-align: middle; 
	}

.ad3 {
	width: 300px; height: 52px;
	text-align: center;
	vertical-align: middle; 
	}

.ad4 {
	width: 300px; height: 52px;
	}

.ad5 {
	width: 300px; height: 52px;
	text-align: center;
	vertical-align: middle; 
	}


/* titles (image gifs) above white/pink boxes ie. boutiques, about us, how to order, etc. */
.heading {
	text-align: left;
	margin-top: 10px;
	}

/* white and pink boxes containing info, located under .heading */
.section {
	vertical-align: top; 
	border: 2px solid #f5a0bd;
	background-color: #fff; 
	padding: 10px;
	}

/* pink boxes containing info locations ie. California, Florida, etc. */
.location {
	background-color: #f5a0bd;
	padding: 1px 30px;
	text-align: center;
	vertical-align: middle; 
	}

/* white and pink boxes containing info, located under .location */
.boutiques {
	vertical-align: top; 
	border: 2px solid #f5a0bd;
	background-color: #fff; 
	padding: 10px;
	margin-bottom: 0px;
	text-transform: capitalize;
	}

/* buttons for 'order' and 'join' */
.order {
	background-color:#f7b5cb; 
	border: 0px; 
	padding: 1px 2px; 
	font-size: 9px; 
	font-weight: bold; 
	color:#560007; 
	text-align: center;
	vertical-align: middle;
	margin-left: 2px;
	margin-bottom: 5px;
	text-transform: uppercase;
	}



/* CONTENT ENDS */




/* FOOTER - bottom background image, mail to link, link to thinkpretty.com */
#footer {
	height: 48px; 
 	background-image: url(graphics/foot.gif);
	background-repeat: no-repeat;
	border: 0px; padding: 0px; margin: 0px;
	overflow: hidden; /* keeps #header, #content and #footer together with no gap between */
	}

/* 'margaret nicole new york city' link at bottom of each page */
#mailto {
	position: absolute; left: 265px; 
	margin-top: 25px;
	width: 160px; height: 10px;
	}

/* 'site design by think pretty' link at the bottome of each page */
#designby {
	position: absolute; left: 600px; 
	margin-top: 25px;
	width: 80px; height: 10px;
	}
/* FOOTER ENDS */


/* chocolate brown text - used for bullets between states on boutiques/index.html */
.color1 {color: #560007;}


/* link color for most pages */
a:link {color:#ee71a2; text-decoration: none;}
a:visited {color:#f5a0bd; text-decoration: none;}
a:hover, a:active {color:#d1004b; text-decoration: none;}