/* CSS Document */
/* =====Common elements - Headers, Links & Utility Styles===== */
/* Basic tags - see also basic.css for NS4-safe ones */
html { }
body {
	background: url(../assets/bg1.jpg) repeat left top;
}
body, tr, td { }
h1, h2, h3, h4, h5, h6, p { }
h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
h3 {  }

/* Links - best order: link-visited-hover-active */
a:link { color: #ccf; }
a:visited { color: #fab; }
a:hover { color: #eef; }
a:active { color: #f84; }

/* Utility Classes (should rarely change) */
img { border:none; }
.hide { display: none !important; visibility: hidden !important; }
.center { text-align: center !important; }
.blockcenter { margin-right: auto !important; margin-left: auto !important; width: 595px; }
.vabscenter { position: absolute; top: 50%; margin-top:-100px; } /* Set margin-top to half element height */
.habscenter { position: absolute; left: 50%; margin-left:-100px; } /* Set margin-left to half element width */
.nopre { margin-top: 0em; } /* No space above - useful for first elements in blocks */
.nopost { margin-bottom: 0em; } /* No space below - useful for last elements in blocks */
.twocol { position: relative; margin-bottom: 1em; }
.twocol .col { float: left; width: 280px; padding: 0px 10px; position: relative; }
.cleardiv { clear: both; height: 0; margin:0; padding:0; overflow:hidden; line-height: 0; font-weight: lighter; }
.nobreak { white-space: nowrap; }

/* Wright Image Translation (change width, height) */
/* Create a 'window' for the link */
#logo.ir { display: block; width: 278px; height:100px; overflow:hidden; }
/* Ensure link and background are visible whether images are on or off */
#logo.ir, #logo.ir a { background: url(../assets/XothiqueLogo.png) no-repeat 10px top; color:#FFF; }
/* display:list-item puts an image INLINE with the link, pushing the link-text out of the 'window' if images are on. */
#logo.ir a { display: list-item; list-style-image: url(../assets/glass.gif); list-style-position: inside; }
/* Fix for Safari 1 and IEMac, which centre heading blocks with defined widths: */
#logo.ir { margin: 0; padding: 0; }
/* Repeat for tagline */
#tagline.ir { display: block; width: 490px; height:2em; overflow:hidden; }
#tagline.ir, #tagline.ir a { background: url(../assets/Tagline.gif) no-repeat left top; color:#FFF; }
#tagline.ir a { display: list-item; list-style-image: url(../assets/glass.gif); list-style-position: inside; }
#tagline.ir { margin: 0; padding: 0; }
/* =====Site Structure===== */
#sheen { height: 100px; line-height: 100px; margin: 0; padding: 0; width: 100%; background: url(../assets/HeaderGradient.png) repeat-x left top; }
#page {
  width: 960px;
  margin: -100px auto 0 auto;
  position: relative;
}
/* Header */
#header {
	margin:0;
	padding: 1px;
	height: 100px;
}
/* padding stops margins collapsing and repositioning inner float */
#logo { float: left; } /*Breaks image-replacement in Opera 6.0.3 (Mac), but not in more modern browsers*/
#tagline { position: absolute; top: 40px; height: 2em; font-style: italic; background: url(../assets/Tagline.png) no-repeat left top; left: 280px; }

/* Main Content */
#main { }
#content {
  padding: 10px 0;
  width: 810px;
  position: relative;
  left: 11em;
}
#pagetitle {
	margin-top: 0;
	font-size: 150%;
	text-align: center;
}

/* Navigation - LocalNav, GlobalNav */
#localnav { margin: 0; padding: 0 10px; position: absolute; top: 0px; left: 0px; height: 2.5em; width:780px; }
#localnav li { position: absolute; width:780px; list-style:none; text-align:center; margin: -1px; }
#localnav li.backlink { top: 0; left: 0; width:390px; z-index: 25; }
#localnav li.nextlink { top: 0; right: 0; width:390px; z-index: 25; }

#localnav a:link { color: #bbf; }
#localnav a:visited { color: #fab; }
#localnav a:hover { color: #ddf; }
#localnav a:active { color: #f84; }

#globalnav { margin: 10px; position: absolute; top: 100px; left: 0px; }
#globalnav ul { margin: 0; padding: 0 ; }
#globalnav li { width:8.5em; list-style: none; background: url(../assets/bullet.gif) 5px 3px no-repeat !important; padding: 0 0 0 20px; margin: 0 -1.2em 0 0; }
#globalnav a:link, #footer a:link { color: #ccf; background: #336; }
#globalnav a:visited, #footer a:visited { color: #fbb; background: #336; }
#globalnav a:hover, #footer a:hover { color: #ddf; background: #336; }
#globalnav a:active, #footer a:active { color: #f84; background: #336; }
#globalnav li#here { list-style: none; background: url(../assets/bullet_here.gif) 5px 3px no-repeat !important; }
#globalnav #here a { text-decoration: none; }

/* Footer */
#footer { clear: both; margin: 120px 10px 10px 10px; position: absolute; top: 27em; left: 0px; }
#footer ul { text-align: center; padding: 0 5px; list-style: none; font-size: 85%; margin: 0; padding: 0 ; }

#footer ul li a.nolink { text-decoration: none !important; color: #fff !important; }
a.nolink span.showlink { text-decoration: underline !important; color: #ccf !important; }
a:visited span.showlink { color: #fbb !important; }

/* =====Box Styling===== */
.box { background: #336 url(/assets/boxedge.gif) repeat-x left -9px; }
#globalnav.box { background: #336 url(../assets/boxedge.gif) repeat-x left -9px; width: 9.5em; }
#footer.box { background: #336 url(../assets/boxedge.gif) repeat-x left -9px; width: 9.5em; }
.boxtop { background: url(../assets/corners.gif) no-repeat -10px -10px; height: 10px; margin: 0; overflow: hidden; }
.boxtop div { background: url(../assets/corners.gif) no-repeat 0 -10px; float: right; width: 10px; line-height: 10px; margin: 0; }
.boxcontent { margin: 0; padding: 0; border-right: 1px solid white; border-left: 1px solid white; }
.boxbase { background: #336 url(../assets/boxedge.gif) repeat-x 10px top; overflow: hidden; height: 10px; margin: 0; }
.basecorners { background: url(../assets/corners.gif) no-repeat -10px 0; height: 10px; margin: 0; }
.basecorners div { background: url(../assets/corners.gif) no-repeat 0px 0px; float: right; width: 10px; line-height: 10px; margin: 0; }

/* =====Other Classes===== */
#globalnav li.navgroup { font-weight: bold; margin-left: 5px; background: none !important; padding-top: 0.5em; padding-left: 0; }
#pictitle { text-align: center; }
#artpic { margin: 1em auto; }
.galleryInfo { text-align: left; }

.thumb { display: inline-block; width: 140px; height: 160px; position: relative; }
.thumblink { position: relative; text-decoration: none; }
.thumbnail { padding: 10px 5px; }
.multithumb { padding: 10px 5px; }
.thumbcount { border: 1px solid #000; color: #000; background-color: #FFFF99; z-index: 25; display: inline; text-decoration: none; }
.thumbcount { position: absolute; left: 5px; }

/* ART PAGES */
#artinfo { margin-left: 20px; margin-right: 20px; text-align: left; }
#artinfo a:link {	color: #bbf; }
#artinfo a:visited { color: #fab; }
#artinfo a:hover { color: #ddf; }
#artinfo a:active { color: #f84; }
#artpage { text-align: center; margin-top: 2em; }
#artpage ul { margin: 1em 0; padding: 0; list-style: none; }
#artpage ul li { margin: 0; padding: .5em 0; list-style: none; width: 50%; text-align: center; float: left; }

#artpage .priceinfo { position: relative; height: 32px; margin-top: -5px; padding: 0;}
#artpage .priceinfo .label { font-weight: bold; }
#artpage .priceinfo .buylink { line-height: 36px; }
#artpage .priceinfo .pricecut { font-size: smaller; text-decoration:line-through; position:absolute; top: -0.3em; }
#artpage .priceinfo form { display: inline; margin: 0 5px; position: relative; top: 5px;}
#artpage .priceinfo .stockcount { white-space: nowrap; }
.wide {	width: 100% !important; }

/* CONTACT PAGE */
#contactForm .formfield { display: block; list-style: none; font-weight: bold; line-height: 2em; }
.formInput, .radioGroup, .checkboxGroup { display: inline; position: absolute; left: 25%; }
#contactForm .tallfield { display: block; list-style: none; font-weight: bold; margin-bottom: 8em; }
.vcard { margin-left: 10em; }
#contactForm .captcha { font-weight: normal; }
#contactForm .formBtns { text-align: center; padding: 1em 0 0 0; }

/* BIO PAGE */
#xothique_pic { float: right; margin: -2em 0 0 10px; }

#piclinks {
	margin: 15px auto 0 auto;
	width: 520px;
}
#piclinks li {
	list-style: none;
	width: 206px;
	text-align: center;
	float: left;
	margin: 0 20px;
}
#piclinks li a { text-decoration: none; border: none; }
#piclinks li a strong { text-decoration: underline; }
#piclinks li img#aceopic { background: url(../assets/ACEOs.png) no-repeat center top; }
#piclinks li img#maskpic { background: url(../assets/Masquerade-Mask-Green-Man.png) no-repeat center top; }
#piclinks li img#paintingpic { background: url(../assets/Painting.png) no-repeat center top; }

#main #content .tooltip .tipinfo { }
a.info:link, a.info:visited { color:#fff; position: relative; font-weight:bold; z-index: 24; text-decoration:none; border-bottom: 1px dotted #fff; }
a.info span { display: none; }
a.info:hover span { display:block; position: absolute; top: -1.6em; left: 0; color: #000; background-color: #FFFF99; font-weight: normal; font-size: x-small; width: 12.5em; z-index: 25; border: 1px solid #000; text-decoration: none; }
a.info:hover { background-color:#fff;	/* required by IE6 */ 
	color:#669; }

.smallText { font-size: 90%; }

#globalnav #subnav li { width: 7.5em; margin-left: -5px; font-size: 85%; }

fieldSet {
	margin-top: 0.75em;
	border: none;
}
fieldset legend {
	margin-left: -1em;
	font-size: larger;
	font-weight: bold;
}

/*SHOP*/
.subcatTitle { clear: both; padding-top: 1em; }
#Shop .thumb { float: left; height: 190px; position: relative; width: 150px; margin: 0 2px; }
#Shop .thumb img { padding: 0; }

#Shop .thumb .priceinfo, #Shop .thumb .buylink { text-align: center; width: 75px; position: absolute; bottom: 0; }
#Shop .thumb .priceinfo { left: 0; height: 25px; }
#Shop .thumb .buylink { right: 0; height: 30px; }
#Shop .thumb .buylink form { display: inline; padding: 0; margin: 0 auto; }
#Shop .thumb .buylink form img { width:1px; height: 1px; }
#Shop .thumb .priceinfo .pricecut { text-decoration:line-through; font-size: smaller; margin: -1em 0 0 0; padding: 0; position: relative; top: -0.5em; }
#Shop .thumb .priceinfo .saleprice { margin: 0; padding: 0; position: relative; top: -0.5em; color:#FFFF00; font-weight: bold; }
.saleprice { color:#FFFF00; font-weight: bold; }

/*=============SALE+CALLOUT BANNERS=============*/
#sale, #callout {
	margin: 1em auto 0 auto;
	width: 80%;
	font-size: 1em;
	background-color: #447;
	padding: 10px 5px;
}
#sale, #callout {
	border: 1px solid white;
	-moz-border-radius: 10px;	-webkit-border-radius: 10px;	border-radius: 10px;
}
#sale p, #callout p { text-align: center; }
#sale h2, #callout h2 { text-align: center; }
#sale h2, #sale p, #callout h2, #callout p { margin: 5px; padding: 0; }
#callout.snow { padding: 5px; margin: 0 auto;
  width: 620px;
  text-align: center;
  background-color: #558;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid white;
}
#callout.snow h2:before {
  padding-right: 10px;
  content: url(../assets/flakes-l.png);
}
#callout.snow h2:after {
  padding-left: 10px;
  content: url(../assets/flakes-r.png);
}
.subtitle {
	margin-bottom: -0.6em;
	margin-top: 1.6em;
}
#shares { text-align: center; clear: left; padding: 2em 0 1em 0; }
.sociable_tagline { display: inline; }
#content .sociable ul { position: absolute; }

/*--- CSS3 enhancements --*/

#social { width: 120px;
position: absolute;
top: 600px;
margin: 10px 40px; }

#page #social div {  }

.highlight { font-weight: bold; font-style:italic; color: yellow; }
#Shop .thumb.nostock:before {
content: "Made To Order";
position: absolute;
text-align: center;
width: 100%;
bottom: 30px;
color: yellow;
font-weight: bold;
font-style: italic;

img[alt] { } /* stub for debugging to find images *with* alt text */