/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/

/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/

#content {  
  height: 100%;
  min-height: 100%;
  text-align: left;
}

#content,
#width {
  /* max-width hack for IE since it doesn't understand the valid css property */
  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");  
  max-width: 1000px;
  margin: 0 auto;
}

#content[id],
#width[id] {
  width: 94%;
  height: auto;
}

/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/
#header {
  position: relative;
  height: 193px;
}

/*#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 130px;
  padding: 5px;
  text-align: right;
}

#header h1 {
  margin: 0;
  padding: 0;
  font: 700 4em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #FFF;
}

*/#header h1 {
	position:absolute;
	top:-10px;
	left:250px;
	margin:0;
	display:block;
	width:475px;
	height:177px;
	background:transparent url(../images/bg/logo.png) no-repeat scroll 0%;
	text-indent:-9000px;
}


#header h2 {
  position: absolute;
  top: 10px;
  right: 5px;
  margin: 0;
  padding: 0;
  font: 700 1em "trebuchet ms", serif;
  text-transform: lowercase;
  color: #00F0EC;
}

#header img.left {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#header img.right {
  position: absolute;
  z-index: 0;
  top:-50px;
  right:0;
}

#legacy {
	display:none;
}

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/
#mainMenu { 
  float: left;
  width: 100%;
  clear: both;  
}

#mainMenu ul {
  margin: 0;
  padding: 0;
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;
  font: 400 1.6em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #DEDEDE;
}

#mainMenu li a:hover,
#mainMenu li a.here {
  color: #D5CE7E;
  border-top: 5px solid #35325C;
}

#home #mainMenu a.home,
#shop #mainMenu  a.shop,
#where #mainMenu a.where,
#button #mainMenu a.button ,
#about #mainMenu a.about ,
#contact #mainMenu a.contact  {
  color: #D5CA3E;
  border-top: 5px solid #35325C;
}


#mainMenu li a.last {
  margin-right: 0;
}

/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/
ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #65EBFF;
  background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #D5CE7E;
  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; 
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(../images/bg/bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #DEDEDE;
  background: #35325C url(../images/bg/bullet.gif) no-repeat 10px 0px;
}

/*
body.sculptpendants .sideMenu li.here ul li.sculptpendants a,
body.pendants .sideMenu li.here ul li.pendants a,
body.bracelets .sideMenu li.here ul li.bracelets a,
body.rings .sideMenu li.here ul li.rings a,
body.earrings .sideMenu li.here ul li.earrings a,
body.crosses .sideMenu li.here ul li.crosses a,
body.milbutton .sideMenu li.here ul li.milbutton a {
  color: #DEDEDE;
  background: #35325C url(../images/bg/bullet.gif) no-repeat 10px 0px;
}
*/

ul.rssFeeds {
	list-style-type:none;
	list-style-image:none;
	margin:0 0 25px 0;
	padding:0;
	font-size:.9em;
}

ul.rssFeeds li {
	margin:0 0 15px 0;
}

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/
#page {
  float: left;
  width: 100%;
  clear: both;
  padding-bottom: 4em;
}

/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/
#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;
  background: #9C985D url(../images/bg/footer.jpg) repeat-x top left;
}

/* Sets the width of the footer content */
#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding-top: 27px;
  color:#FFFFFF;
}

#footer img.right {
  position: absolute;
  z-index: 0;
  bottom:0;
  right: 5px;
}

/**************************************************************
   Width classes used by the site columns
 **************************************************************/
.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}

/**************************************************************
   Alignment classes
 **************************************************************/
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

/**************************************************************
   Generic display classes
 **************************************************************/
.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

.gradient {
  margin-bottom: 2em;
  background: #35335B url(../images/bg/gradient.jpg) repeat-x bottom left; 
}

.twitter {
	background: url(../images/bg/twitter24.png) no-repeat left center;
	padding:3px 0 3px 26px;
}

.facebook {
	background: url(../images/bg/facebook24.png) no-repeat left center;
	padding:3px 0 3px 26px;
}

.youtube {
	background: url(../images/bg/youtube24.png) no-repeat left center;
	padding:3px 0 3px 26px;
}

.rssFeed {
	background: url(../images/bg/rss24.png) no-repeat left center;
	padding:3px 0 3px 26px;
}

.contactLink {
	background: url(../images/bg/contact24.png) no-repeat left center;
	padding:3px 0 3px 26px;
}