/* ------------------------------
d'Pholk Designs Screen CSS
Updated 20080830
------------------------------ */

/* Layout */
body { margin: 0; padding: 0; border: 0; text-align: center; background: #fff7ec url(../img/headertile.png) 0 0 repeat-x; font: normal 13px/18px "Trebuchet MS", Trebuchet, Verdana, sans-serif; color: #555; }
img { border: 0; }
#mainwrap { margin: 0 auto; padding: 0; border: 0; width: 860px; text-align: left; }
#header { margin: 0; padding: 0; border: 0; width: 860px; height: 152px; background: url(../img/header.png) 0 0 no-repeat; }
#navwrap { margin: 0; padding: 0; border: 0; float: left; width: 160px;display: inline;  }
#contentwrap { margin: 18px 0 0 160px; padding: 0; border: 0; width: 690px; }
#footer { text-align: right; margin: 0; padding: 0; border-top: 1px dashed #ddd; clear: both; }
#nav { margin: 18px 0; padding: 0; border: 0; }
#nav li { margin: 0; padding: 0; border: 0; height: 25px; list-style: none; color: #999; }
#nav .subnav { margin: -4px 0 2px 10px; padding: 0; border: 0; height: 22px; list-style: none; }


/* Typography */
h1 { margin: 0; padding: 0; border: 0; text-indent: -9999px; }
h2 { margin: 0 0 8px 0; padding: 0; font-size: 20px; color: #333; text-transform: uppercase; letter-spacing: 2px; }

#nav li a { font-size: 14px; }
#nav .subnav a { font-size: 12px; color: #666; font-weight: normal; }
#content p { margin: 2px 0 10px 0; padding: 0; border: 0; }
#footer p { margin: 0; padding: 0; border: 0; font-size: 10px; color: #999; }
#content ul { list-style: none; margin: 0 4px; padding: 0; border: 0; text-align: center; }
#content li { display: inline; margin: 0 8px; padding: 0; border: 0; font-size: 14px; }

a:link, a:visited { color: #930; text-decoration: none; }
a:hover { color: #f90; }


/* Home Page */
#homewrap { position: relative; margin: 18px 0 0 160px; padding: 0; border: 0; width: 690px; height: 500px; }
#home1 { position: absolute; top: 13px; left: 0; }
#home2 { position: absolute; top: 233px; left: 70px; }
#home3 { position: absolute; top: 0; left: 274px; }
#home4 { position: absolute; top: 66px; left: 408px; }
#home5 { position: absolute; top: 269px; left: 408px; }
#home6 { position: absolute; top: 269px; left: 552px; }
p#callout { position:absolute; top: 430px; left: 0; font-size: 24px; color: #369; }


/* Fused Glass Containers */
#maincontent .container { float: left; margin: 0 10px 0 0; padding: 1px; border: 1px solid #ccc; background: #fff; width: 150px; }
#maincontent .containerInfo { float: left; margin: 0; padding: 0 0 0 4px; }
#maincontent .containerInfo p { font: normal 11px Verdana, sans-serif; color: #666; }
#maincontent .container p strong { text-transform: uppercase; color: #444; }

#containerPics { position: relative; margin: 0 0 20px 0; padding: 0; border: 0; }
#containerPics div { text-align: center; }
#containerPics div img { margin: 0; padding: 1px; border: 1px solid #ccc; background: #fff; }
#containerPics div p span { font-size: 10px; }

#containerPics #fab1 { position: absolute; top: 0; left: 0; }
#containerPics #fab2 { position: absolute; top: 0; left: 274px; }
#containerPics #fab3 { position: absolute; top: 139px; left: 0; }

#containerPics #stars1 { position: absolute; top: 40px; left: 35px; }
#containerPics #stars2 { position: absolute; top: 0; left: 228px; }
#containerPics #stars3 { position: absolute; top: 40px; left: 442px; }

#containerPics #pv1 { position: absolute; top: 40px; left: 80px; }
#containerPics #pv2 { position: absolute; top: 0; left: 231px; }
#containerPics #pv3 { position: absolute; top: 40px; left: 445px; }

#containerPics #pm1  {position: absolute; top: 30px; left: 20px; }
#containerPics #pm2 { position: absolute; top: 30px; left: 160px; }
#containerPics #pm3 { position: absolute; top: 30px; left: 540px; }

#content, #tier2content { position: relative; }
#content .container, #tier2content .container { margin: 0; padding: 0; border: 0; }
#content .container div { float: left; margin: 0 30px 30px 0; padding: 0; }
#content .container div.imglow { margin-top: 40px; }
#content .container div p { margin: 0; padding: 0; text-align: center; }
#content .container div p span { font-size: 10px; }
#content .container img, #tier2content .container img, #sgcontent .container img 
	{ margin: 0; padding: 1px; border: 1px solid #ccc; background: #fff; }


#content .containerInfo { clear: both; margin: 0 40px 0 0; padding: 0; border: 0; text-align: center; }
#content .containerInfo p { font-size: 14px; line-height: 22px; }
#content .container p, #tier2content .container p { margin: 0; padding: 0; font: normal 13px Verdana, sans-serif; color: #666; }
#content .container p strong, #tier2content .container p strong { text-transform: uppercase; color: #444; }
#sold { position: absolute; top: 82px; right: 0; width: 140px; background: #fff; border: 1px solid #ccc;  }

ul#submenu { margin: 20px 0; }

#tier2content h3 { margin: 0 0 4px 0; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; color: #333; line-height: 12px; }
#tier2content p { margin: 0; padding: 4px 12px 4px 0; text-align: justify; }
#tier2content .container, #tier2content .containerInfo { float: left; margin: 0 15px 15px 0; padding: 0; border: 1px solid #ccc; width: 325px; height: 154px; background: #fff; position: relative; }
#tier2content .container img { margin: 2px 0 0 2px; padding: 0; border: 0; }
#tier2content .container p { position: absolute; top: 2px; left: 160px; width: 158px; text-align: left; font-size: 11px; }
#tier2content .containerInfo { border: 0; background: none; }

#tier2content .samplecolors h2 { margin: 0 0 8px 0; padding: 0; border: 0; font-size: 18px; color: #666; text-transform: none; letter-spacing: 0; font-weight: normal; }
#tier2content .itemcolors { float: left; margin: 0 25px 0 0; }
#tier2content .itemcolors p { margin-top: -4px; padding: 0; text-align: center; text-transform: uppercase; font-size: 11px; color: #777; }

.viewcart { position: absolute; top: 0; right: 0; }
.addtocart { position: absolute; bottom: 2px; right: 2px; }

.itemfooter { clear: both; margin: 20px 0 10px 0; padding: 0; font-style: italic; }



/* Stained Glass Containers */
#sgcontent { position:relative; text-align: center; }
#sgcontent .container { float: left; margin: 10px 25px 5px 0px; padding: 0; border: 0; width: 250px; }
#sgcontent .container p { margin: 4px 4px 8px 4px; padding: 0; font: normal 11px/14px Verdana, sans-serif; color: #444; }
#sgcontent .container p b { font-size: 11px; color: #930; }
#sgcontent .container img { margin: 0 2px; }
#sold { position: absolute; top: 82px; right: 0; width: 140px; background: #fff; border: 1px solid #ccc; }



/* Shows Stores */
#showswrap, #storeswrap { display: inline; float: left; width: 340px; margin: 0; padding: 0; border: 0; }
#storeswrap { margin-right: 10px; }

#showswrap .shows, #storeswrap .shows { display: block; margin: 0 0 10px 0; padding: 0; border: 0; width: 320px; }
#showswrap .showdate, #storeswrap .showdate { margin: 0; padding: 0 4px; border: 0; height: 18px; background: #930 url(../img/showsbar.png) 0 0 repeat-x; }
#showswrap .showinfo { margin: 0; padding: 2px 4px; border: 0; }
#storeswrap .showinfo { margin: 0 0 15px 0; padding: 2px 4px; border: 0; }
#showswrap .showdate p, #storeswrap .showdate p { margin: 0; padding: 0; border: 0; color: #fff; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 4px; }
#showswrap .showinfo p, #storeswrap .showinfo p { margin: 0; padding: 0; border: 0; color: #555; }
#showswrap .showinfo p b, #storeswrap .showinfo p b { font-size: 15px; color: #333; }


/* Crochet */
#crochetwrap { margin: 6px 0 0 0; padding: 0; border: 0; display: block; }
#crochetwrap .crochetproduct { position: relative; float: left; margin: 0 0 20px 0; padding: 0 0 18px 0; border: 0; width: 410px; text-align: center; background: #fff url(../img/crochetproductback.gif) 0 0 no-repeat; }
#crochetwrap .crochetproduct .crochetproductbot { position: absolute; bottom: 0; left: 0; margin: 0; padding: 0; border: 0; width: 410px; height: 23px; background: #fff url(../img/crochetproductbackbot.gif) 0 0 no-repeat; }

#crochetwrap img { margin: 20px 0 0 0; padding: 0; border: 1px solid #555; }
#crochetwrap h3 { margin: -21px 0 10px 0; padding: 0 0 0 2px; border: 0; font-size: 18px; color: #fff; }
#crochetwrap p { margin: 0 0 4px 0; padding: 0; border: 0; }
#crochetwrap b { font-size: 14px; color: #333; }

#colors { float: right; width: 234px; margin: 0 20px 0 0; padding: 0; border: 0; }
#colors p {  margin: 10px 0 2px 0; padding: 0; width: 229px; font-size: 18px; font-weight: bold; color: #333; clear: both; }
#colors .colorblock { position: relative; margin: 0 10px 10px 0; padding: 0; border: 1px solid #555; float: left; width: 100px; height: 111px; background-color: #ccc; }
#colors .colorblock img { margin: 0; padding: 0; border: 0; }
#colors .colorblock p { position: absolute; bottom: 0; left: 0; margin: 0; padding: 0 3px; width: 94px; height: 11px; font: bold 9px Verdana, sans-serif; color: #fff; text-transform: uppercase; background-color: #000; }