/* 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: #bbf; }
a:visited { color: #fab; }
a:hover { color: #ddf; }
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===== */
/* Header */
#header {
	margin:0;
	padding: 1px;
	height: 100px;
	background: url(../assets/HeaderGradient.png) repeat-x left top;
}
/* 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: 780px; position: relative; left: 11em; }
#pagetitle {
	margin-top: 0;
	font-size: 150%;
}

/* 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; }
#pictitle { text-align: center; }
#artpic { margin: 1em auto; }
.galleryInfo { text-align: left; }

.thumb { display: inline; width: 155px; 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; width: 720px; 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; }
.address { 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: 620px;
}
#piclinks li { list-style: none; width: 206px; text-align: center; float: left; }
#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/Mask.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; }
#AvailableItemsGallery .thumb { float: left; height: 190px; position: relative; width: 150px; margin: 0 2px; }
#AvailableItemsGallery .thumb img { padding: 0; }

#AvailableItemsGallery .thumb .priceinfo, #AvailableItemsGallery .thumb .buylink { text-align: center; width: 75px; position: absolute; bottom: 0; }
#AvailableItemsGallery .thumb .priceinfo { left: 0; height: 25px; }
#AvailableItemsGallery .thumb .buylink { right: 0; height: 30px; }
#AvailableItemsGallery .thumb .buylink form { display: inline; padding: 0; margin: 0 auto; }
#AvailableItemsGallery .thumb .buylink form img { width:1px; height: 1px; }
#AvailableItemsGallery .thumb .priceinfo .pricecut { text-decoration:line-through; font-size: smaller; margin: -1em 0 0 0; padding: 0; position: relative; top: -0.5em; }
#AvailableItemsGallery .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: 0 auto; width: 520px; font-size: 1em; background-color: #447; padding: 10px 5px; }
#sale p, #callout p { text-align: center; }
#sale h2, #callout h2 { text-align: center; }
#sale h2, #sale p, #callout h2, #callout p { margin: 0 10px; padding: 0; }
#callout.snow { width: 537px; height:101px; font-size: 13px; background: url(../assets/snowbanner.gif) left top no-repeat; text-align: center; padding-top: 20px; margin-bottom: -30px; }
.subtitle {
	margin-bottom: -0.6em;
	margin-top: 1.6em;
}