/*********************************
*
* CSS file for The Happy Magpie
* http://www.happymagpie.com/etching
* Philip Schulz 
* 
* Theme: Purple Cutout
* Non-content imgs in css/purplecutout/
* IE specific hacks in: 'Purple Cutout - IE'
* Default shows accessibility features, JS hides them.
* Last updated: 08/18/2009
*
***************************************/
/**
* Not-IE are "div>div" or div[attribute]
****/

/***
*
*  All pages
*
****/

/** fer debuggin' * /
div {border: red 1px solid;}
div div {border-color: orange;}
div div div {border-color: yellow;}
div div div div {border-color: lightgreen;}
div div div div div {border-color: cyan;}
div div div div div div{border-color: blue;}
div div div div div div div{border-color: darkblue;}
div div div div div div div div{border-color: purple;}
/*  */

#IEMAC {display:none;} /** temp until I can fix IEMAC */


body {
	background:#A48AA5 url(purplecutout/backgroundshadow15l.gif) top left;
	color:#330033;
	width:100%; height:100%; 
	padding:0; 
	margin:0; 
	font-size:medium ; 
    font-family:  georgia,  "Book Antiqua", palatino, "Times New Roman", serif;}

/********
* Body ID will modify the Navbar (already selected) 
* must be below the default nav selections
*****/

a:link {color:#5D3177; } 
a:visited {color:#663366;} 
a:hover {color:#990099;}       
a:active {color:#990099;}  		  
a:focus {color:#909; background: #A48AA5;}


/***
*  Accessibility options. need to setup and hide the divs later.
*
*  positioning and color should be set by CSS
*  Sizes may have to be set by JS if I want SUBTLE to work...
***/
div#access {
	position:absolute;
	top:160px; left:50%; 
	margin-left:270px; /*even though it's not in container, it will align in space in menu.*/
	background:#A48AA5; 
	color:black; 
	border:solid;
	border-width:2px 1px 1px 2px;
	border-color:#757 #a9a #a9a #757; 
	padding:0 5px;
	text-align:left; 
	font: 0.8em sans-serif; /*10pt/20px */
	line-height:1.7em; 
	overflow:hidden; 
	z-index:900;
	}
div #access form {margins:0; display:inline;}
#access a:link, #access a:visited {color:#ede;}
#access a:hover, #access a:focus, #access a:active {line-height:1.7em; font-weight:bold; background:#cac; color:#900;}



/* note class, not ID*/
a.acc {
	position:relative;/*need this for z-index; */
	background:#b9b;
	color:black ;
	text-align:left;
	font-size: 0.6em;
	z-index:900 ;
	white-space:nowrap;	
} /*JS will turn this off, until requested. */
a.acc:link, a.acc:visited {background:#b9b;color:black;}
a.acc:hover, a.acc:focus, a.acc:active {font-weight:bold;background:#b9b;color:#900;}

/*get the tabs to align in the gallery  */
body#gallery p.acc {clear:left; }
body#gallery div.overlapheightMoz {display:none;}

/**
* intro text
**/
#intro {
	width:150px; font-size:10px; 
	position:absolute; 
	left:380px; top:20px; 
	color:#A48AA5; 	z-index:1;
}

/****
*  page layout and shadows
*******/

div.container {
	position:absolute; 
	display:block; 
	width:785px; 
	top:0px; left:50%; 
	margin:0 0 0 -377px ;
	padding:0px; 
	background:url(purplecutout/purpletile.jpg) repeat;
	z-index:2;}


div#edget  {
	position:absolute; 
	top:0;left: 0; 
	width:785px; height:32px;
	background: url(purplecutout/backgroundtop.gif) no-repeat; 
	z-index:10;
	}

	
div#edger  {
	padding:0px 0px 0 0; /*1px 15px 1px 0; */ 
	margin:0px 0;
	background: url(purplecutout/backgroundright.gif) top right repeat-y;
	}

div#edgeL {
	
	padding:0;    /*1px 0 1px 15px; */  
	margin:0;
	background: url(purplecutout/backgroundleft.gif) top left repeat-y;
	}

div#edgeb  {
	padding:0 15px 15px 15px;  
	margin:0;
	background: url(purplecutout/backgroundbottom.gif) bottom left no-repeat ;
	}


/*****
* title graphic and menus
********/
#titlebar {
		position:relative;
		top:22px; left:0;
		width:100%; height:150px;
		text-align:center;
		margin:0 auto;
		padding:0;
		}


#titlepic {
	display:block; 
	float:left;  /* don't need auto  margins if you want left aligned.*/
	background: url(purplecutout/HMtitlemagpietilt2.gif);
	width:661px; height:140px; /*140*/
	/*margin: 0 auto; /*if want centered */
	}

#titlepic h1 {position:relative; left:-9000px;}
	


#navbar {
	clear:both;
	display:block;
	position:relative; /* pos rel needto catch the submanu*/
	margin:10px auto 0;
	width:710px; height:3.6em;
	color:black;
	padding:0 5px; 
	}



#navbar ul {
	list-style-type:none;
	display:block;
	margin: 0 ;
	padding:0px;
	height:50px;
	}
		
#navbar li  {
	list-style-type:none;
	display:block;
	float:left;
	height:30px;
	padding:0;
	margin:0;
	font-family:tahoma, arial, sans-serif;
	text-decoration:none;
	}	
	
#navbar li a {
		display:block;
		float:left;
		text-decoration:none;
		padding:0px;
		height:30px;
		width:100px;
		outline:none; /*removed to hide the FF skewed text*/
	}

#navbar img {border:0;}
	
#navbar li ul  {   /* if doing sub-sub menus, this needs to be a child selector li > ul*/ 
	display:block;
	position:absolute;
	width:710px; height:25px;
	top:30px; left:-14px;
	}			
#navbar li ul#subulb {left:285px; width:450px; } /*710-285 = 425 */
	
#navbar li:hover  ul  { 
	display:block;
	}	


#navbar li b {
	font-weight: normal;
	display:block;
	width:100px; height:30px;
	position:relative;
	left:-9000px; /*move the text out of sight*/
	}	
	
#navbar ul#subula li a, 
#navbar ul#subulb li a {width:150px;}


#navbar ul#subulb ul {top:100px;} /* third tier not used */
	
/***
*  navbar Image replacement
****/

/*specific*/
#navbar a#ab  { background:  url("purplecutout/navabout1w.gif") no-repeat;}
#navbar a#abe  { background:  url("purplecutout/navetching1w.gif") no-repeat;}
#navbar a#aba  { background:  url("purplecutout/navartist1w.gif") no-repeat;}

#navbar a#ga  { background:  url("purplecutout/navgallery1w.gif") no-repeat;}
#navbar a#we  { background:  url("purplecutout/navweddings1w.gif") no-repeat;}
#navbar a#ev  { background:  url("purplecutout/navevents1w.gif") no-repeat;}
#navbar a#co  { background:  url("purplecutout/navcontact1w.gif") no-repeat;}
#navbar a#ho  { background:  url("purplecutout/navhome1w.gif") no-repeat;}

#navbar a#or  { background:  url("purplecutout/navordering1w.gif") no-repeat;}
#navbar a#ord { background:  url("purplecutout/navcustom1w.gif") no-repeat;}
#navbar a#org  { background:  url("purplecutout/navmedia4w.gif") no-repeat;}          
#navbar a#ora  { background:  url("purplecutout/navetsy1w.gif") no-repeat;} 


#navbar a#ab:hover, #navbar a#ab:active ,#navbar a#ab:focus,
#navbar a#ga:hover, #navbar a#ga:active ,#navbar a#ga:focus,
#navbar a#we:hover, #navbar a#we:active ,#navbar a#we:focus,
#navbar a#ev:hover, #navbar a#ev:active ,#navbar a#ev:focus,
#navbar a#co:hover, #navbar a#co:active ,#navbar a#co:focus,
#navbar a#ho:hover, #navbar a#ho:active ,#navbar a#ho:focus,
#navbar a#or:hover, #navbar a#or:active ,#navbar a#or:focus
{background-position:-100px 0px;}

#navbar a#abe:hover, #navbar a#abe:active ,#navbar a#abe:focus,
#navbar a#aba:hover, #navbar a#aba:active ,#navbar a#aba:focus,
#navbar a#ord:hover, #navbar a#ord:active ,#navbar a#ord:focus,
#navbar a#org:hover, #navbar a#org:active ,#navbar a#org:focus,
#navbar a#ora:hover, #navbar a#ora:active ,#navbar a#ora:focus  {background-position:-150px 0px;}



/*Even more page specific turn-ons and offs KEEP THE CURRENT PAGE AND PARENT selected*/
body#home #navbar a#ho,  
body#aboute #navbar a#ab, body#abouta  #navbar a#ab,
body#gallery #navbar a#ga,  
body#weddings #navbar a#we,
body#contact #navbar a#co,  
body#orderd #navbar a#or, body#orderg #navbar a#or, body#ordera #navbar a#or, body#orderdd #navbar a#or 
{cursor:default; background-position:-100px 0px;}
/*submenus are 150px*/
body#aboute #navbar a#abe, body#abouta #navbar a#aba,
body#orderd #navbar a#ord, body#orderg #navbar a#org, 
body#ordera #navbar a#ora, body#orderdd #navbar a#ord 
{cursor:default; background-position:-150px 0px;}






/****delete  me  *** /
#navbar a#ab  { background:  url("purplecutout/navabout1.gif") no-repeat;}
#navbar a#ab:hover, #navbar a#ab:active ,#navbar a#ab:focus  { background:  url("purplecutout/navabout1a.gif") no-repeat;}
#navbar a#abe  { background:  url("purplecutout/navetching1.gif") no-repeat;}
#navbar a#abe:hover, #navbar a#abe:active ,#navbar a#abe:focus  { background:  url("purplecutout/navetching1a.gif") no-repeat;}
#navbar a#aba  { background:  url("purplecutout/navartist1.gif") no-repeat;}
#navbar a#aba:hover, #navbar a#aba:active ,#navbar a#aba:focus  { background:  url("purplecutout/navartist1a.gif") no-repeat;}

#navbar a#ga  { background:  url("purplecutout/navgallery1.gif") no-repeat;}
#navbar a#ga:hover, #navbar a#ga:active ,#navbar a#ga:focus  { background:  url("purplecutout/navgallery1a.gif") no-repeat;}
#navbar a#we  { background:  url("purplecutout/navweddings1w.gif") no-repeat;}
#navbar a#we:hover, #navbar a#we:active ,#navbar a#we:focus /* { background:  url("purplecutout/navweddings1a.gif") no-repeat;}
#navbar a#ev  { background:  url("purplecutout/navevents1.gif") no-repeat;}* /
#navbar a#ev:hover, #navbar a#ev:active ,#navbar a#ev:focus  { background:  url("purplecutout/navevents1a.gif") no-repeat;}
#navbar a#co  { background:  url("purplecutout/navcontact1.gif") no-repeat;}
#navbar a#co:hover, #navbar a#co:active ,#navbar a#co:focus  { background:  url("purplecutout/navcontact1a.gif") no-repeat;}
#navbar a#ho  { background:  url("purplecutout/navhome1.gif") no-repeat;}
#navbar a#ho:hover, #navbar a#ho:active ,#navbar a#ho:focus  { background:  url("purplecutout/navhome1a.gif") no-repeat;}

#navbar a#or  { background:  url("purplecutout/navordering1.gif") no-repeat;}
#navbar a#or:hover, #navbar a#or:active ,#navbar a#or:focus  { background:  url("purplecutout/navordering1a.gif") no-repeat;}
#navbar a#ord { background:  url("purplecutout/navcustom1.gif") no-repeat;}
#navbar a#ord:hover, #navbar a#ord:active ,#navbar a#ord:focus  { background:  url("purplecutout/navcustom1a.gif") no-repeat;}
#navbar a#org  { background:  url("purplecutout/navmedia4.gif") no-repeat;}           /*navglass1 * /
#navbar a#org:hover, #navbar a#org:active ,#navbar a#org:focus  { background:  url("purplecutout/navmedia4a.gif") no-repeat;}
#navbar a#ora  { background:  url("purplecutout/navetsy1.gif") no-repeat;} /* navavailable1.gif * /
#navbar a#ora:hover, #navbar a#ora:active ,#navbar a#ora:focus  { background:  url("purplecutout/navetsy1a.gif") no-repeat;}

DElete me  */













/** 
* BOTTOM COMMON
***/
.disclaimer {font-family:arial,sans-serif; font-size:0.7em; text-align:left; line-height:1.9em; }

#footer {padding:5px 10px 40px; text-align:center;}

#footernav {padding:0 0 1em 0; font-family:arial,sans-serif; font-size:0.8em;  }

#footerhr {}  /** replaces line over top of footer.**/
#footerhr hr {}

#footer .disclaimer p {float:left;}
#footer .disclaimer img {float:right;}
#footer .disclaimer {padding:10px;margin:10px;}




/***
*
*  common content
*
**/

/******
*  main text, lots of hoops to get the left column .png transparency to work.  
****/
.main {font-weight:normal; text-align:left;}

/***
*  Moz -ReDefines the left border PNG
*  Mozilla cannot have height. It will not change a fixed height, 
*  causing text to spill into the footer.
*  Picture must be shorter than text to avoid cropping.  need empty divs to set min height... 
*
*  IE ignores styles with [attributes], so it will skip the following. 
*  IE7 must handle it correctly?
******/
#home .main[class],
#contact .main[class],
#weddings .main[class],
#aboute .main[class],
#abouta .main[class] {
	background :url(purplecutout/lsidebarpurple2.png) no-repeat;  /*in relation toCSS */
	border-bottom: #BEACBF solid 1px; /*nec to get min height*/
	}



/***
*  change this height if .png height changes 
**/
.overlapheightMoz{float:left; height:700px;} 
.overlap{ padding-left:20px;position:relative; }

/***
* width/ of sidebar -specific pages
***/
#home .main .overlap,
#contact .main .overlap,
#weddings .main .overlap,
#aboute .main .overlap,
#abouta .main .overlap {padding-left:190px;}


p.glasstext {text-align:justify; padding:0px 20px 10px 20px ;}
p.glasstext:first-letter {font-size:1.5em;}


h4 {margin:0;  padding-top:1em; padding-bottom:0;}
	
h4+p {margin:0em 0 0 0;}

	
/* box headers*/
h3 { 
	width:100%;
	background:#ede url(purplecutout/h3gradient3.gif)  no-repeat;
	margin:0;
	padding:0;
	}

/***
* in DETAils, Available and also CUSTOM page
***/

.shipping {text-align:center; 
	font-size:1.2em;
	padding:10px; 
	padding-left:5%; 
	padding-right:5%;
	
	}


/****
*
*  specific pages
*
*****/

/****
*
*  index page
*
*****/

/** column 1 **/
#content1  {
	display:block;
	width:410px;  
	margin:0;
	}


.box {
	background:#A48AA5 url(purplecutout/backgroundshadow10.gif);
	padding: 7px 0 0 7px;
	margin:10px;
	}
.box a:active, .box a:focus {background:#b9b;}
	
body#home dt {
	width:100%; 
	background:#304; 
	color:#dcf;
	}


/**Secondary column **/	
#content2  {
	
	position:absolute;
	top:0; right:0;
	width:150px;   
	margin:0;}

.box2 {
	background:#A48AA5;
	border:solid;
	border-width:2px 1px 1px 2px;
	border-color:#757 #a9a #a9a #757;
	padding: 0;
	margin:10px 5px ;
	}	
.box2 a:active, .box2 a:focus {background:#b9b;}


	
body#home .box2 img {width:98%}
.box2 p {padding:2px 5px;}
.box2 li, .box2 ul {
	margin:2px;
	padding:2px;
	list-style-type:none
	}

.galbox, .aboutbox, .specbox {}	
	
/***
*
*  Photo GALLERY
*
****/
.galstable { 
	margin-top:10px;
	text-align:center; 
	padding:5px 2px;
	margin:0 auto; 
	float:left; 
	width:31%;
	min-width:200px;
	height:270px;
	}
	
.galscell {
  	margin-right:auto;    /* IE doesn't need these but MOZ does */
	margin-left:auto; 
	text-align:center; 
	width:200px; 
	height:250px;
	}
	
.galscell a img {border:0; }
.galscell a:hover img {opacity:0.8;}
.galscell a span {display:block; position:relative; left:-9000px; height:50px; width:200px;  }
  
.galscell a {width:200px; height:50px;  text-decoration:none; display:block; outline:none; /*removed to hide the FF skewed text*/}
#gallery a#gg { background: url(lilac/galglasslilacw.gif) no-repeat 0px 0px;} 
 #gallery a#gg:hover,  #gallery a#gg:focus,
 #gallery a#gg:active {background-position:-200px 0px;}
#gallery a#gm { background: url(lilac/galmetlilacw.gif) no-repeat ;} 
 #gallery a#gm:hover,  #gallery a#gm:focus,
 #gallery a#gm:active {background-position:-200px 0px;}
#gallery a#gj { background: url(lilac/galjewlilacw.gif) no-repeat ;} 
 #gallery a#gj:hover,  #gallery a#gj:focus,
 #gallery a#gj:active {background-position:-200px 0px;}
#gallery a#gw { background: url(lilac/galwinlilacw.gif) no-repeat ;} 
 #gallery a#gw:hover,  #gallery a#gw:focus,
 #gallery a#gw:active {background-position:-200px 0px;}
#gallery a#gf { background: url(lilac/galfestlilacw.gif) no-repeat ;} 
 #gallery a#gf:hover,  #gallery a#gf:focus,
 #gallery a#gf:active {background-position:-200px 0px;}
#gallery a#gh { background: url(lilac/galhodlilacw.gif) no-repeat ;} 
 #gallery a#gh:hover,  #gallery a#gh:focus,
 #gallery a#gh:active {background-position:-200px 0px;}



/****
*
*  new gallery.php  need to convert what? replaces all the old JS
*  wedding still has old galboxes 
****/
/** category menu **/
#gallery ul#galcat {position:relative; top:0px;z-index:20; margin:4px auto 0; padding:0; width:100%;  height:1.5em; text-align:center;}
#gallery ul#galcat li {z-index:20;width:150px; display:inline; height:100%; margin:0; padding:6px 0 0 0; list-style-type:none;  background:#A48AA5 url(purplecutout/backgroundshadow10.gif)} 
#gallery ul#galcat a {
	text-decoration:none; 
	font-family:tahoma, arial, sans-serif;  
	width:150px; 
	padding:0 10px 15px 10px ;
	margin: 0 0 0 0;
	text-align:center; 
	background: url(purplecutout/backgroundshadow10BL.gif) bottom left no-repeat ;
	color:#c9b9d9;
	z-index:20;
	/*border:solid; 	
	border-width:2px 1px 0 2px;	
	border-color:#757 #a9a #a9a #757;*/
	}


	
#gallery ul#galcat li:hover,
#gallery ul#galcat li:active,  /** doesn't work, ya gob*/
#gallery ul#galcat li:focus,
#gallery ul#galcat li:hover a,
#gallery ul#galcat li:active a,
#gallery ul#galcat li:focus a,
#gallery ul#galcat li.sel,
#gallery ul#galcat a:hover,
#gallery ul#galcat a:active,
#gallery ul#galcat a:focus,
#gallery ul#galcat a.sel {background:transparent; color:#333; /*border:0; margin:2px 1px 1px 2px;*/}
#gallery ul#galcat a.sel {cursor:default;} 


/*border:solid;
	border-width:2px 1px 1px 2px;
	border-color:#757 #a9a #a9a #757;*/

/* pallette  - thumbs and big  */
#gallerya {position:relative; 
	 
	/*  border:solid; 	border-width:2px 1px 1px 2px;	border-color:#757 #a9a #a9a #757; */
	height:510px; width:700px;
	margin:3px auto; 
	z-index:0; overflow:hidden;
	background:#A48AA5 url(purplecutout/backgroundshadow10.gif);
	padding: 7px 0 10px 7px;
}



/** holds the thumbs skinny **/
ul#galleryframe {padding:0px; margin:0px; width:160px;position:relative; }
ul#galleryframe li{
	float:left;
	margin:0 ;  /*5px 0 0 5px;*/
	padding:4px 0 0 4px; /*padding increases the hover so no flickering */
	width:74px; height:74px;
	list-style-type: none
	}


	
ul#galleryframe li .big{
	visibility:hidden;
	background:#A48AA5;
	position:absolute; /* from gallery frame*/
	top:5px;
	left:160px;    /** this is in gallery frame which is tiny. so right margin is neg margins to get absolute? **/
	width:530px;    /** MAX big Picture size is 500 + text //change to 500 for cutout**/  
	height:500px;
	}
ul#galleryframe li:hover .big , 
ul#galleryframe li:active .big ,
ul#galleryframe li:focus .big  {
	visibility:visible !important;z-index:100 !important;cursor:default !important;}
ul#galleryframe li:hover .big {z-index:20;} /*hover behind  clicked or  active */
ul#galleryframe li a {border:0px;}
ul#galleryframe li a img.thumb {}
ul#galleryframe li img.thumb {visibility:visible;border:1px solid #5D3177; width:70px;
height:70px;}  /*#5D3177*/
ul#galleryframe li:hover img.thumb,
ul#galleryframe a:active img.thumb,
ul#galleryframe a:focus img.thumb {opacity:0.7;}  
ul#galleryframe li .big img  {float:left; border:0px;margin-right:20px;}	
ul#galleryframe li .big p.bigtext {float:left;width:200px; padding:5px;margin:0; } 

#gallerya #nn {clear:both; padding-top:10px;}
#gallery #gallerya .displaybtn {       /*replace the main one when you delete the pop-ups*/
	border-left:  0px;            
	border-right: 0px;
	background: #C39FD8;
	text-decoration:none;
	padding: 0px 10px;  
	margin: 15px;
	font-size:0.9em;
	}

















/******** DELETE *************
#gallerya .thumb .big{
	visibility:hidden;
	background:#A48AA5;
	position:absolute; /* from gallery frame* /
	top:5px;
	left:160px;    /** this is in gallery frame which is tiny. so right margin is neg margins to get absolute? ** /
	width:630px;    /** MAX big Picture size is 500 + text //change to 500 for cutout** /  
	height:500px;
	}
#gallerya .thumb:hover .big, 
#gallerya .thumb:active .big,
#gallerya .thumb:focus .big  {
	visibility:visible;z-index:100;cursor:default;}
#gallerya .thumb:hover .big {z-index:20;} /*hover infront of clicked or  active onover hover?* /

#gallerya .thumb span img {visibility:visible; border:0px; width:70px;
height:70px;}
#gallerya .thumb:hover span img,
#gallerya .thumb:active span img,
#gallerya .thumb:focus span img {opacity:0.7;}
#gallerya .thumb .big img  {float:left; border:0px;margin-right:20px;}	
#gallerya .thumb .big p#bigtext {float:left;width:200px; padding:5px;margin:0; }   /*this hides behind float. how to pop out?  If I make this a float, it pushes below.* /


#gallery #gallerya .displaybtn {       /*replace the main one when you delete the pop-ups* /
	border-left:  0px;            
	border-right: 0px;
	background: #C39FD8;
	text-decoration:none;
	padding: 0px 10px;  
	margin: 15px;
	font-size:0.9em;
	}









/***
*
* CUSTOM page and sub pages
*
****/
/*body#orderd .overlap { padding-left:20px;position:relative; }*/

.customtext {display:block; margin: 0 10px 0 0 ; float:right; width:495px;}

#custlink {
	text-align:center; 
	padding: 20px 0;
	margin:0;
	mar/gin-left:0px; /* adjust this dependingon picture gutter auto */
	
	} 		
/****
*  glamourizes alt text if:
*  1) picture doesn't load;
*  2) they have monotype corsiva
*
*  Sort of an ego trick, not very useful
*/

#custlink2 a, 
.custlinkcells a, 
#custsubtitle {  
	font-size:2em;
	font-family: 'monotype corsiva', sans-serif;
	text-align: center;
	outline:none; /*removed to hide the FF skewed text*/
	}

 
/***
*  img replacement test
***/


/** test for border edges**/
#custlink2 {
	padding: 10px 0;
	margin:0;
	} 		


 
/***
*  img replacement test
***/
#custlink2 ul {
	list-style-type: none;
	text-align:left;
	width:210px;
	padding:0;
	}

#custlink2 ul li { 
	width:200px; height:50px;
	display:block;
	margin:0 ;
	padding:0; 
	}

#custlink2 ul li a {
	width:200px; height:50px;
	display:block;
	padding:0 ;
	margin:0 3px 3px 0;
	text-align:center;

	}

#custlink2 ul li a#W {background: url(purplecutout/clkwedd.gif) no-repeat ;}
#custlink2 ul li a#W:hover, #custlink2 ul li a#W:focus,
#custlink2 ul li a#W:hover {background: url(purplecutout/clkwedda.gif) no-repeat ;}

#custlink2 ul li a#A {background: url(purplecutout/clkanim.gif) no-repeat ;}
#custlink2 ul li a#A:hover, #custlink2 ul li a#A:focus,
#custlink2 ul li a#A:hover {background: url(purplecutout/clkanima.gif) no-repeat ;}

#custlink2 ul li a#K {background: url(purplecutout/clkcelt.gif) no-repeat ;}
#custlink2 ul li a#K:hover, #custlink2 ul li a#K:focus,
#custlink2 ul li a#K:hover {background: url(purplecutout/clkcelta.gif) no-repeat ;}

#custlink2 ul li a#O {background: url(purplecutout/clkorie.gif) no-repeat ;}
#custlink2 ul li a#O:hover, #custlink2 ul li a#O:focus,
#custlink2 ul li a#O:hover {background: url(purplecutout/clkoriea.gif) no-repeat ;}

#custlink2 ul li a#F {background: url(purplecutout/clkfant.gif) no-repeat ;}
#custlink2 ul li a#F:hover, #custlink2 ul li a#F:focus,
#custlink2 ul li a#F:hover {background: url(purplecutout/clkfanta.gif) no-repeat ;}

#custlink2 ul li a#M {background: url(purplecutout/clkmisc.gif) no-repeat ;}
#custlink2 ul li a#M:hover, #custlink2 ul li a#M:focus,
#custlink2 ul li a#M:hover {background: url(purplecutout/clkmisca.gif) no-repeat ;}

#custlink2 ul li a#G {background: url(purplecutout/clketch.gif) no-repeat ;}    /*glas*/
#custlink2 ul li a#G:hover, #custlink2 ul li a#G:focus,
#custlink2 ul li a#G:hover {background: url(purplecutout/clketcha.gif) no-repeat ;}

#custlink2 ul li a#Av {background: url(purplecutout/clkavai.gif) no-repeat ;}
#custlink2 ul li a#Av:hover, #custlink2 ul li a#Av:focus,
#custlink2 ul li a#Av:hover {background: url(purplecutout/clkavaia.gif) no-repeat ;}

#custlink2 ul li a#E {background: url(purplecutout/clketsyw.gif) no-repeat ;}
#custlink2 ul li a#E:hover, #custlink2 ul li a#E:focus,
#custlink2 ul li a#E:active {background-position:-200px 0px;}

#custlink2 ul li a span {display:block; position:relative; width:200px;height:50px;overflow:hidden;
left:-9000px; }




/**/






/****
*
* DESIGN and GLASS option pages
*
*****/



/***
*  Is there a better way to do this? should I just make the common
*  bits #custsubtitle div ? can't add a new div to thelayout..
***/
#custsubtitle div {
	width:250px ;
	height:63px;
	margin: 0 auto 1em auto;
	}
#custsubtitle * h2 {display:block; position:relative; overflow:hidden; left:-9000px;}



#cstglas {background: url(purplecutout/cttetch.gif);}  /*glas*/
#cstanim {background: url(purplecutout/cttanim.gif);}
#cstchil {background: url(purplecutout/cttchil.gif);}
#cstfant {background: url(purplecutout/cttfant.gif);}
#cstorie {background: url(purplecutout/cttorie.gif);}
#cstmisc {background: url(purplecutout/cttmisc.gif);}
#cstwedd {background: url(purplecutout/cttwedd.gif);}
#cstcelt {background: url(purplecutout/cttcelt.gif);}


/***
*  skips the specific IDs and hides the text
***/
#custsubtitle * h2 {display:none;}




.cgaltable { 
	margin-top:10px;
	text-align:center; 
	padding:5px;
	margin:0 auto; 
	float:left; 
	width:31%;
	height:195px;
	}
	
.cgalcell {
  	margin-right:auto;    /* IE doesn't need these but MOZ does */
	margin-left:auto; 
	text-align:center; 
	width:180px; 
	height:180px;
	}


/***
*
*  Media type/etchable replaces glass page.
*  note: structural only.  color is by box or box2
*
****/
.itable {margin:0 10px; width:40%; float:left; padding:0 5px; height:250px; min-width:300px; }
.icell {min-width:300px;  /*IE 6 doesn't rec, but does anyway*/  
	min-height:180px;
	} 

.icell img {float:left; padding-right:10px;}

.itext {margin-top:10px;} /*make this the same as otext*/



 
/******
*
* glasstypedetail and patterndetail.phps
*
******/


.cdetailtable {
	position:relative;
	text-align:center; 
	padding:10px 5px 0 10px;
	float:left; 
	width:265px; /*38%*/
	}
	
.cdetailcell {
  	margin: 0 auto; 
	text-align:center; 
	width:250px; 
	height:auto;
	}

.custframe {
	position:relative;
	height:100%; 
	margin:0 0 0 280px; 
	padding:0 0 0 10px; 
	}

.custtable { 
	margin-top:10px;
	text-align:center; 
	padding:0px;
	margin:0px 0px 10px 5px;
	float:left; 
	width:45%; 
	}
	
.custcell {
  	margin:0 auto; 
	text-align:center; 
	width:150px;
	height:auto; 
	}



.custgframe {
	margin-left:40%; 
	buffer-left:40px; 
	}

.custgframe ul {
	font-family:arial, sans-serif;
	font-size:1em;
	}

.custgframe li {
	list-style: none;
	padding-left:2em;
	}




/****
*  WEdding page
****/
/**swiped from gallery. delete this when rmoved the JS..*/

.galtable {
	text-align:center; 
	float:left; 
	width:19.4%;  /*just under to get 5 across*/
	}
	
.galcell {
	margin-right:auto;    /* IE doesn't need these margins but MOZ does */
	margin-left:auto; 
	text-align:center; 
	font-size:0.8em;
	width:100px; height:110px;
	}

/**
*  buttons for photo viewer
*/
.displaybtn {
	border-left: double 4px #5D3177;
	border-right: double 4px #5D3177;
	background: #b9b;  /*#C39FD8;*/
	text-decoration:none;
	padding: 0px 10px;  
	margin: 15px;
	font-size:1.3em;
	}



/** UNKNOWN ARE THIS DEFUNCT?  **/

/******
*
*  AVAILABLE page
*
*****/
/** Should be  defunct.. Etsy page  are you sho-a?**/

.picframe {
	width:100%;
	height: auto; 
	text-decoration:none; }

.otable {
	margin:0 auto 20px auto; 
	text-align:center; 
	float:left; 
	width:49%; /* always a hair too small. */
	}
	
.ocell {
	margin: 0 auto; 
	text-align:center; 
	width:184px;   /* max picture size 180 +2 +2 for borders */
	
	
	}


.otitle { 
	font-family: sans-serif;
  	font-weight: bold;
 	text-align:left;
	text-transform: uppercase;
	
	padding-left:5px; }

.otext  {
	font-family: serif;
	text-align:left;
	}


/**
*  Price and sold should be mutually exclusive.
***/
.price, .sold  {  
	color:#dcf;
	background-color: #304;          
	text-align: right;
    font-family: sans-serif;
	} 
.sold	{ /*color:darkred*/	text-transform: lowercase;}






/***
*  ENd Defunct
***/