/*-------------------------------------------------------------------
Madison Handbags Main Stylesheet

Version: 			1.0
Last edited by: 		John Lytle
On:				2007.10.26
Framework: 		The Plant System
For:				Madison Handbags
Site Design by:		John Lytle Productions

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


/* =General Styles
---------------------------------------------------------------------*/

* {
	margin: 0pt;
	padding: 0pt;
}

html {font: 76.5%/1.3 "Trebuchet MS", arial, sans-serif}

body {
	margin: 13px 13px;
	color: #000;
	background: #CF9;
	text-align: center;
	min-width: 800px;	
}

body.home {background: #CF9 url(/app/css/images/global/bg_body_home.jpg) top left repeat-x;}
body.history {background: #CF9 url(/app/css/images/global/bg_body_history.jpg) top left repeat-x;}
body.team {background: #CF9 url(/app/css/images/global/bg_body_team.jpg) top left repeat-x;}
body.party {background: #CF9 url(/app/css/images/global/bg_body_party.jpg) top left repeat-x;}
body.handbag {background: #CF9 url(/app/css/images/global/bg_body_handbags.jpg) top left repeat-x;}
body.fabric {background: #CF9 url(/app/css/images/global/bg_body_fabrics.jpg) top left repeat-x;}
body.seen {background: #CF9 url(/app/css/images/global/bg_body_seen.jpg) top left repeat-x;}
body.contact {background: #CF9 url(/app/css/images/global/bg_body_contact.jpg) top left repeat-x;}
body.faq {background: #CF9 url(/app/css/images/global/bg_body_faq.jpg) top left repeat-x;}
body.join {background: #CF9 url(/app/css/images/global/bg_body_join.jpg) top left repeat-x;}


/* =Structure
---------------------------------------------------------------------*/

#container {
	width: 810px;
	margin: 0 auto;
	text-align: left;
	border: 10px solid #FFF;
}

.home #container {background: #FFF url(/app/css/images/global/bg_container_home.jpg) top left repeat-x;}
.handbag #container {background: #FFF url(/app/css/images/global/bg_container_handbags.jpg) top left repeat-x;}
.fabric #container {background: #FFF url(/app/css/images/global/bg_container_fabrics.jpg) top left repeat-x;}
.party #container {background: #FFF url(/app/css/images/global/bg_container_party.jpg) top left repeat-x;}
.history #container {background: #FFF url(/app/css/images/global/bg_container_history.jpg) top left repeat-x;}
.team #container {background: #FFF url(/app/css/images/global/bg_container_team.jpg) top left repeat-x;}
.seen #container {background: #FFF url(/app/css/images/global/bg_container_seen.jpg) top left repeat-x;}
.join #container {background: #FFF url(/app/css/images/global/bg_container_join.jpg) top left repeat-x;}
.contact #container {background: #FFF url(/app/css/images/global/bg_container_contact.jpg) top left repeat-x;}
.faq #container {background: #FFF url(/app/css/images/global/bg_container_faq.jpg) top left repeat-x;}

#content {
	width: 570px;
	float: left;
	display: inline;
	margin-left: 10px
}

#primaryContent {
	width: 560px;
	float: left;
	display: inline;
	padding: 10px;
}


/* -- Logo  -------------------------------------------------------------*/

h1#logo {
	width: 200px;
	height: 123px;
	margin: 10px 10px 1px 0pt;
	text-indent: -9000px;
}

	h1#logo a {
		display: block;
		width: 200px;
		height: 123px;
		background: url(/app/css/images/logos/madison_handbags_logo.gif) top left no-repeat;
		text-decoration: none;
	}
	
	h1#logo a:hover {
		background-position: 0 -123px;	
		}

/* =Navigation
---------------------------------------------------------------------*/


/* --  MAIN NAV LIST -------------------------------------------------------------*/
#mainNav {
	float: left;
	display: inline;
	width: 200px;
	height: 635px;
	margin: 0pt 0pt 10px 10px;
	background:url(images/nav/nav_bot.jpg) bottom left no-repeat;
}

#mainNav ul {
	margin: 0pt;
}

	#mainNav ul li {
		clear: both;
		display: block;
		width: 200px;
		height: 40px;
		text-indent: -9000px;
		margin-bottom: 0pt;
		background:url(images/nav/nav_main.gif) -200px 0 no-repeat transparent;
	}

#mainNav ul a {clear:both; display:block; background:url(images/nav/nav_main.gif) -200px 0 no-repeat transparent; width: 200px; height: 40px}
#mainNav li a:hover {background-position: -200px 0; text-decoration:none}
#mainNav li.current a {background-position: 0 0}

#mainNav ul li#nav-home, #mainNav ul li#nav-home a {background-position: -200px 0}
#mainNav ul li#nav-home a:hover {background-position: -400px 0}
#mainNav ul li#nav-home.active a {background-position: 0 0}
	
#mainNav li#nav-history, #mainNav li#nav-history a {background-position: -200px -40px}
#mainNav li#nav-history a:hover {background-position: -400px -40px}
#mainNav li#nav-history.active a {background-position: 0 -40px}
	
#mainNav li#nav-handbags, #mainNav li#nav-handbags a {background-position: -200px -80px}
#mainNav li#nav-handbags a:hover {background-position: -400px -80px}
#mainNav li#nav-handbags.active a {background-position: 0 -80px}

#mainNav li#nav-fabrics, #mainNav li#nav-fabrics a {background-position: -200px -120px}
#mainNav li#nav-fabrics a:hover {background-position: -400px -120px}
#mainNav li#nav-fabrics.active a {background-position: 0 -120px}
	
#mainNav li#nav-party, #mainNav li#nav-party a {background-position: -200px -160px}
#mainNav li#nav-party a:hover {background-position: -400px -160px}
#mainNav li#nav-party.active a {background-position: 0 -160px}

#mainNav li#nav-team, #mainNav li#nav-team a {background-position: -200px -200px}
#mainNav li#nav-team a:hover {background-position: -400px -200px}
#mainNav li#nav-team.active a {background-position: 0 -200px}

#mainNav li#nav-join, #mainNav li#nav-join a {background-position: -200px -240px}
#mainNav li#nav-join a:hover {background-position: -400px -240px}
#mainNav li#nav-join.active a {background-position: 0 -240px}

#mainNav li#nav-seen, #mainNav li#nav-seen a {background-position: -200px -280px}
#mainNav li#nav-seen a:hover {background-position: -400px -280px}
#mainNav li#nav-seen.active a {background-position: 0 -280px}

#mainNav li#nav-contact, #mainNav li#nav-contact a {background-position: -200px -320px}
#mainNav li#nav-contact a:hover {background-position: -400px -320px}
#mainNav li#nav-contact.active a {background-position: 0 -320px}

#mainNav li#nav-faq, #mainNav li#nav-faq a {background-position: -200px -360px}
#mainNav li#nav-faq a:hover {background-position: -400px -360px}
#mainNav li#nav-faq.active a {background-position: 0 -360px}



/* --- Footer ---------------------------------- */

#footer {
	clear: both;
	color: #CCC;
	text-align: left;
	padding: 10px 10px 5px 10px;
	border-top: 1px solid #EEE;
}


/* =Typography
---------------------------------------------------------------------*/

h3, h4, h5, h6 {
	font-family: "Trebuchet MS", helvetica, arial, sans-serif;
	font-weight: normal;
}

h2 {margin: 40px 0pt 6px 0;}
h3 {margin-top: 20px;}

.home h3 {margin-top: 0pt;}

p + h3, ul + h3, h2 + h3 {margin-top: 20px;}

p {
	text-indent: 15px;
	margin-bottom: 6px;
}

p span {font-weight: bold;}
p.right {text-align: right;margin-right: 10px}
p.right a {color: #000;}
p.right a:visited {color: #000;}
form p {text-indent: 0em;}


/* =Misc
---------------------------------------------------------------------*/

.contact ol li {
	float: left;
	display: inline;
	font-style: normal;
	font-size: 95%;
	width: 155px;
	height:  100px;
	list-style-type: none;
	text-indent: 0pt;
	border-top: 1px solid #EEE;
	margin: 0px 10px 0pt 15px;
	padding-top: 10px;
}

.contact span {
	display: block;
}

.contact ol li span.given-name, .contact ol li span.family-name {
	display: inline;
	font-weight: bold;
	font-size: 105%;
}

.contact ol li span.title {
	font-style: italic;
}

/* =Images
---------------------------------------------------------------------*/

img {border: none}


img.border {
	clear: both;
	display: block;
	background: #EEE;
	border: 1px solid #CCC;
	margin-bottom:10px;
	padding: 6px;
}

a img.lt, a img.rt {
	float: right;
	display: inline;
	background: #F9C;
	margin: 10px 0pt 10px 20px;
	padding: 6px;
}

a img.lt {
	float: left;
	display: inline;
	margin: 10px 20px 10px 0pt;
}


/* =Link Styles
---------------------------------------------------------------------*/

a:link, a:visited  {
	color: #C69;
	font-weight: bold;
	text-decoration: none;
	}

a:hover, a:active {
	color: #666;
	font-weight: bold;
	text-decoration: underline;
}

a:link img, a:visited img {
	background: #F9C;
	padding: 6px;
}

a:link img:hover, a:visited img:hover {
	background: #CF9;
	padding: 6px;
}

a.current {color: #F9C}
	
a {outline: none}

abbr[title]  {border-bottom: 1px dotted #999}
abbr[title]:hover {cursor: help}

hr {
	clear: both;
	margin: 0pt;
	color: #FFF;
	background-color: #FFF;
	border: none;
	height: 1px
}


/* =List Styles
---------------------------------------------------------------------*/

ul, dl {
	margin-bottom: 10px;
	list-style-type: none;
}

ul li {
	margin: 0pt 0pt 6px 0pt;
}

.handbag ol {
	clear: both;
	list-style-type: none;
	display: block;
	width: 100%;
	height: 100%;
}

	.handbag ol li.item, .fabric ol li {
		float: left;
		display: inline;
		text-align: center;
		min-height: 180px;
		margin: 0pt 5px 10px 5px;
	}
	
	.fabric ol li {
		min-height: 125px;
		margin: 10px 5px 10px 5px;
	}
	
	.handbag ol li img, .fabric ol li img {
		padding: 3px;
		background: #EEE;
		border: 1px solid #CCC
		}
	
	.handbag ol li a:hover img, .fabric ol li a:hover img   {
		padding: 3px;
		background: #FFF;
		border: 1px solid #EEE
		}
	
		
	span.title {
		display: block;
		text-decoration: none;
		font-size: 12px;
	}
	
	.fabric ol li span.title {
		font-size: 11px;
	}
	
	span.dimensions {
		display: block;
		font-family: georgia, serif;
		color: #999;
	}
	
	span.price {
		display: block;
		font-family: georgia, serif;
		color: #F9C;
		margin-bottom: 10px;
	}
	
dl.image {
	float: right;
	display: inline !important;
	background: #CF9;
	margin-left: 20px;
	padding: 6px 6px 0pt 6px;
}
	dl.image dt {margin-top: 0pt;}
	dl.image dd a {color: #000;}

.team dl {
	clear: both;
	padding-top: 12px;
	border-top: 1px solid #EEE;
}

	.team dl:after {
		display: block;
		content: '';
		clear: both;
	}

dt  {
	font-weight: bold;
	font-size: 120%;
	margin-top: 15px;
}

.team dt.image {
	text-indent: 0pt;
	float: left;
	display: inline;
	height: 104px;
	margin: 0pt 16px 0pt 0pt;
	background: #CF9;
	padding: 6px 6px 3px 6px;
}

.home dt {
	font-family: "Trebuchet MS", helvetica, arial, sans-serif;
	font-size: 160%;
	font-weight: normal;
	color: #69F;
}

dd {
	text-indent: 15px;
	margin-bottom: 10px;
}

dd strong  {
	font-weight: bold;
	font-size: 120%;
	text-transform: none;
}

dd span {
	text-transform: uppercase;
	font-weight: normal;
	font-size: 90%;
}

.team dd {
	text-indent: 15px;
	margin-bottom: 0;
}

#content ul li, #content ul li a {
	margin-left: 10px;
	padding:  4px 0pt 4px 25px;
	line-height: 13px;
	background: transparent url(/app/css/images/assets/list_purse.gif) 0 50% no-repeat;
}


.party ol li {
	margin: 0 0 10px 20px;
	list-style-position: outside;
	display: list-item;
}


.party #content ul li a {
	background: none;
	padding-left: 0pt;
	margin-left: 0pt;
}

ul li + h4 {
	padding-left: 0;
	background: none !important;
}


/* =Form Specifics
---------------------------------------------------------------------*/
	
fieldset {
	border: none;
	margin-bottom: 10px;

	}
	

legend {
	font-size: 140%;
	font-weight: bold;
	}


label {
	color: #666;
	display: block;
	}

select {
	font-size: 110%;
	font-family: georgia;
	background: transparent;
	border: 1px solid #FFF;
	margin: 5px 0;
	padding: 2px;
	}

	
input.text, textarea {
	display: block;
	background: #EEE;
	border: 1px solid #CCC;
	margin: 2px 0pt 10px 0pt;
	padding: 2px;
	}
	
	input:focus {
		background: transparent;
		border: 1px solid #333;
		}
	textarea:focus {
		background: #FFF;
		border: 1px solid #333;
		}
	input:hover, textarea:hover {
		background: #EEE;
		color: #000;
		}
	select:focus {
		background: #EEE;
		color: #000;
		}

input.submit {
	text-transform: uppercase;
	display: block;
	background: #F9C;
	color: #FFF;
	border: 1px solid #FFF;
	margin: 2px 0;
	padding: 2px;
	width: auto;
	overflow: visible;
	}
	
	input.submit:hover {
		background: #CF9;
		border: 1px solid #FFF;
		}


/* =Class Specifics
---------------------------------------------------------------------*/
	
.hide {
	display: none;
	visibility: hidden;
	}
	
.clear {
	clear: both;
	}
	
.error {
	font-style: italic;
	color: #F00;
	}
	
strong {text-transform: uppercase;}