/* Styles for jeu.de.jupe website 
   Copyright(c) 2010 jeu de jupe - All rights reserved */
/* note on popouts: must have background color for IE6 to work. Also,
   IE6 needs an href.				*/
/* top level has pink around, with a main div that floats centered */
body 				{margin: 0px 0px 0px 0px; background-color: #FFEEFF; color: black;
		 			 font-size:10px; font-family: arial, Helvetica, sans-serif;}
div#main 			{position: relative; margin-left: auto; margin-right: auto; 
	 				 width: 960px; }
/* every thing else is a table - mix of HTML and CSS */
table 				{border: 0px; border-collapse: collapse; }
img 				{border:0px;}
/* top row is logo, unique euro, and address */
#top_row 			{width: 960px; }
#top_row table 		{width: 100%;}
#logo 				{width:12%;}
#unique 			{width:45%;text-align: center; color:#EF3E96;font-size:280%;}
.jdj_def 			{font-size:58%; color: #4205ae; display:block;
					 text-align: center; font-style: italic;} /* 58% of 280% */
#addr 				{width:33%;text-align: right; font-size:150%;}
#phone 				{width:10%;text-align: right;;color:blue;font-size:150%;}
/* Top menu is gray with cuts - uses adjust of image for hover */
#menuTop 			{height: 35px; width:960px; display: inline; list-style-type: none; 
		 			 padding: 0; margin: 0;}
#menuTop li 		{height: 35px; float: left; margin-right: 0px; font-size:100%;}
#menuTop li a 		{height: 35px; display: block; text-indent:-3000px; 
					 background: white url(graphics/top_menu_image.jpg) no-repeat 0 0;}
  /* if you wonder why the 'li#name a' approach, this is because nothing else works, 
	 at least on FF. If I remove 'li', it fails to work even though the names are unique. */
li#brands a 		{width: 109px; background-position: 0px 0px; }
li#brands a:hover 	{width: 109px; background-position: 0px -35px; }
li#new a 			{width: 87px; background-position: -110px 0px; }
li#new a:hover 		{width: 87px; background-position: -110px -35px; }
li#specials a 		{width: 92px; background-position: -197px 0px; }
li#specials a:hover {width: 92px; background-position: -197px -35px; }
li#tops a 			{width: 90px; background-position: -289px 0px; }
li#tops a:hover 	{width: 90px; background-position: -289px -35px; }
li#pants a 			{width: 86px; background-position: -379px 0px; }
li#pants a:hover 	{width: 86px; background-position: -379px -35px; }
li#dresses a 		{width: 106px; background-position: -465px 0px; }
li#dresses a:hover 	{width: 106px; background-position: -465px -35px; }
li#others a 		{width: 108px; background-position: -571px 0px; }
li#others a:hover 	{width: 108px; background-position: -571px -35px; }
li#onsale a 		{width: 85px; background-position: -679px 0px; }
li#onsale a:hover 	{width: 85px; background-position: -679px -35px; }
li#none a 			{width: 194px; background-position: -764px 0px; }
/* Bottom menu is gray with cuts - uses adjust of image for hover */
#menuBot 			{height: 35px; width:960px; display: inline; list-style-type: none; 
		 			 padding: 0; margin: 0;}
#menuBot li 		{height: 35px; float: left; margin-right: 0px; font-size:100%;}
#menuBot li a 		{height: 35px; display: block; text-indent:-3000px; 
					 background: white url(graphics/lower_menu_image.jpg) no-repeat 0 0;}
li#about a 			{width: 88px; background-position: 0px 0px; }
li#about a:hover 	{width: 88px; background-position: 0px -35px; }
li#contact a 		{width: 91px; background-position: -88px 0px; }
li#contact a:hover 	{width: 91px; background-position: -88px -35px; }
li#store a 			{width: 111px; background-position: -179px 0px; }
li#store a:hover 	{width: 111px; background-position: -179px -35px; }
li#press a 			{width: 80px; background-position: -290px 0px; }
li#press a:hover 	{width: 80px; background-position: -290px -35px; }
li#blog a 			{width: 66px; background-position: -370px 0px; }
li#blog a:hover 	{width: 66px; background-position: -370px -35px; }
li#facebook a 		{width: 114px; background-position: -436px 0px; }
li#facebook a:hover {width: 114px; background-position: -436px -35px; }
li#yelp a 			{width: 63px; background-position: -550px 0px; }
li#yelp a:hover 	{width: 63px; background-position: -550px -35px; }
li#none_bot a 		{width: 345px; background-position: -613px 0px; }
#middle_row 		{background-color: white; padding-left: 20px; padding-top: 10px;
					 font-size:160%;}
/* main page */
#index_middle 		{font-size: 160%;padding-top:0;margin:0;}
#girl_walking 		{height:480px; padding-top:5px;padding-bottom:2px;}
#feat_info_store 	{width:310px;height:480px;}
#feat_info_store table {width:293px;}
#featured 			{height:480px; padding-top:5px;padding-bottom:2px;}
#feat_info 			{height:208px; background-color: black;padding:0;}
#feat_box 			{color: white; padding-right:15px; text-align:right;}
#feat_data 			{float:right;}
#feat_data td 		{padding-left:5px;}
.visit 				{margin: 2px 2px 2px 2px; color: white; text-decoration:none;}
.visit_text 		{margin: 2px 2px 2px 2px; color: white; text-decoration:none;}
#visit_us 			{display: block; height: 220px; color: white; text-decoration:none;}
.visit img 			{vertical-align: top; }
.visit:hover 		{background-color:#FFEEFF;}
  /* we have pop features on main page including map popout and hours */
#hours span 		{display: none; padding: 2px 2px; margin-left: 10px;
		  			 width: 290px; }
#hours:hover 		{background:white; text-decoration: none;}
#hours:hover span 	{display:inline; position: absolute;
					 background: white; border: 1px solid #600; 
 					 color: #600; font-style: normal; 
 					 font-family: tahoma,geneva,sans-serif; font-size: 120%;}
#map img#mapimg 	{visibility:hidden; width:1px; height:1px;}
#map:hover img#mapimg {visibility:visible; position: absolute;  
					 width:498px; height:466px;
			   		 top: 170px; /* position higher than default */}
/* contact page -- uses middle-row, so font is 16px by default */
#contact_top 		{width:260px; padding-left: 10px; padding-top: 10px;
	  				 font-family: arial, Helvetica, sans-serif; 
	  				 font-size: 180%; text-align: left;}
.mini 				{font-size: 66%; font-style: italic; font-weight: normal; margin-left: 20px;}
.hours 				{font-weight: normal; font-size: 77%; margin-left: 20px; 
	   				 position: relative; left: 20px;}
#park  				{padding-left: 10px; padding-top: 10px;
	  				 font-family: arial, Helvetica, sans-serif; 
	  				 font-size: 180%; text-align: left; font-weight: bold;}
.con  				{letter-spacing: -1px;}
.nobold 			{font-weight: normal; font-size: 83%; margin-left: 20px;}
/* about pages -- uses middle-row, so font is 16px by default */
#about_main 		{width: 620px;}
#about_main h4		{margin-top: 10px; margin-bottom: 0px;}
#about_main p		{padding-left: 20px; margin-top: 2px;}
#quote				{text-align:right;padding-left: 50px; color:#EF3E96;}
#store_pict 		{padding-left: 160px; width:340px; text-align:right; 
					 padding-right:20px;}
#store_pict a img 	{left:800px;}
#store_pict a:hover {background:white;}
#a img 				{display: block; position: absolute; top: 160px;}
#b img 				{display: block; position: absolute; top: 260px;}
#c img 				{display: block; position: absolute; top: 360px;}
#d img 				{display: block; position: absolute; top: 460px;}
#store_pict a:hover img {position:absolute; left: 290px; top: 160px;
					 width:640px; height:480px;}
#about_store 		{width: 560px;}
#about_store h4		{margin-top: 10px; margin-bottom: 0px;}
#about_store p		{padding-left: 20px; margin-top: 2px;}
#friends			{padding-left: 50px; padding-right:5px;} 
#friends tr			{height: 35px;}
#friends img		{vertical-align: middle;text-decoration:none;}
/* about press -- uses middle-row, so font is 16px by default */
#press_quote 		{font-size: 150%;}
#pq_link 			{font-size:58%;padding-left:450px;} /* font % of outer p */
.mag td  			{padding-right: 10px;}
.mag td  			{text-align: center;}
.mag img 			{border:0;}
/* brands -- uses middle-row, so font is 16px by default */
#brand_sel 			{font-size:106%;}
#brand_hover 		{color:gray;font-size:75%;}
#chart_span 		{display:inline; font-size:88%; padding-left: 180px;}
.brand_links 		{font-family: arial, Helvetica, sans-serif; 
			 		 font-size: 100%; color: #4205ae;}
.brands 			{font-family: arial, Helvetica, sans-serif; }
.brands th 			{padding-right: 40px; text-align: left;}
.brands th i 		{font-size:75%; color: gray;}
.brands a  			{font-size: 125%; color: #777;}
.country  			{}
.country img 		{vertical-align:middle; width:27px; height:18px;}
.country span 		{display:none; position: absolute; 
					 margin-left: 5px; padding: 5px; }
.country:hover 		{background:white; text-decoration:none; }
.country:hover span {display:inline; 
		  			 background-color: white; border: 1px solid #600; 
		 			 width:400px;color: #600; font-style: normal; 
	      			 font-family: tahoma,geneva,sans-serif; font-size: 75%; }
.size 				{}
.size img 			{vertical-align:middle; width:25px; height:17px;}
.size span 			{display:none; position: absolute; 
		 			 width:200px;}
.size:hover 		{background:white; text-decoration:none; }
.size:hover span	{display:inline; margin-left: 5px;
		  			 background-color: white; border: 1px solid #600; 
		 			 color: #600; padding: 5px; font-style: normal; 
	     			 font-family: tahoma,geneva,sans-serif; font-size: 75%; }
.slides img 		{vertical-align:middle; width:36px; height:18px;}
/* brand view and slide show */
.size_chart 		{border-style: none none dotted none; text-decoration:none;}
.size_chart span 	{display: none; position: absolute; font-size: 1px;}
.size_chart:hover 	{background:white; text-decoration: none;}
.size_chart:hover span {display: inline; width: 190px; margin-left: 5px;
		  		 	 background-color: white; border: 1px solid #600; 
		 			 color: #600; padding: 5px; font-style: normal;
	     			 font-family: tahoma,geneva,sans-serif; font-size: 120%; }
#bv_chart:hover span {left: 270px; top:180px;}
#ss_chart:hover span {left: 600px; top:280px;}
.size_chart span i 	{position:absolute;width:50px;height:25px; }
.scl, .scr 			{position:absolute;width:60px;
					 padding-left:5px;padding-bottom: 5px; }
.scl 				{left:50px;}
.scr 				{left:130px;}
.size_chart:hover span .scl {border-left: 1px solid; }
.size_chart:hover span .scr {border-left: 1px solid; }
.left 				{color: #777; padding-left:5px; padding-right:10px; padding-bottom:10px;}
.right 				{color: #777; padding-left:5px; padding-right:10px; padding-bottom:10px;}
.ref   				{color: #4205ae; }
.item_info 			{padding-bottom: 10px;font-size:108%;}
#popdiv				{background-color: #AAA;visibility:hidden;
					 position:absolute; padding-left: 10px; padding-top: 10px;
					 width:640px;height:660px; font-size:160%;}
#popdiv table tr td {vertical-align: top;}
#popimg 			{display:inline;vertical-align:top;}
#popspan 			{display:inline;}

/* Slide show */
.ref 				{width:80px;}
.slide_2nd 			{width:140px;}
.slide_3rd 			{width:80px;}
#slide_surr 		{background: #EEE;padding: 10px 10px 10px 10px;}
#slide_main 		{height:650px;width:490px;padding:0px 5px 0px 5px;vertical-align:top;}
#main_img 			{border: 1px solid;}
#slide_play 		{width:300px;height:30px;padding:0px 5px 0px 5px;}
#slide_info 		{width:350px;height:230px;padding:5px 5px 0px 5px;
					 background-color: #EEE; vertical-align: top;}
#slide_chart 		{padding-bottom:5px;}
#slide_prev 		{background-color: #EEE;padding: 0px 10px 0px 10px;
				 	 height:140px;}
#slide_next 		{background-color: #EEE;padding: 0px 10px 0px 10px;
					 height:140px;}
#slide_prev img 	{width:96px;height:128px;
					 background-color: white;border: 1px solid;}
#slide_next img 	{width:96px;height:128px;
					 background-color: white;border: 1px solid;}

#play_pause img		{height:32px;width:32px;
		     		 background: url(graphics/pause_64.png) no-repeat 0 0;}
#play_pause:hover img {background-position:0 -32px;}
#rev img			{height:32px;width:32px;
					 background: url(graphics/rev_64.png) no-repeat 0 -32px;}
#rev:hover img 		{background-position:0 -32px;}
#fwd img			{height:32px;width:32px;
					 background: url(graphics/fwd_64.png) no-repeat 0 0;}
#fwd:hover img 		{background-position:0 -32px;}
/* specials page -- uses middle-row, so font is 16px by default */
#specials_main 		{text-align: left;  font-family: arial, Helvetica, sans-serif; 
					 width:700px;}
#specials_main span {display:block;}
.evt_title 			{color:#EF3E96;font-weight: bold; font-size: 150%; 
					 padding-top: 10px; padding-bottom: 5px;
					 padding-left:5px;}
.evt_head 			{font-weight: bold; font-size: 100%;
					 padding-left:5px; padding-bottom: 10px;
					 padding-top: 15px;}
.base 				{padding-left:20px; }
/* blog -- uses middle-row, so font is 16px by default */
#blog_main 			{font-size: 88%; text-align: left; 
	   				 font-family: arial, Helvetica, sans-serif; 
					 width:700px;}
#blog_quote 		{font-size:113%;padding-left:5px;}
#blog_main span 	{display:block;}
	/* title is date-time */
.blog_title 		{color:gray;font-weight: bold; font-size: 100%; 
					 padding-top: 10px; padding-bottom: 5px;
					 padding-left:5px;border-style:none none solid none;
					 border-width:1px;}
.blog_head 			{color:#EF3E96;font-weight: bold; font-size: 125%;
					 padding-left:5px; padding-bottom: 15px;
					 padding-top: 5px;}
.base 				{padding-left:20px; padding-bottom:20px;}
/* special case below for handhelds that identify themselves - shows links at top */
#portable			{display: none;}