@charset "UTF-8";
/* CSS Document */

body {
	font-size: 76%;
	padding:0;
	margin:0;
	background:url(images/girdygirdy_background.jpg);
}

#wrapper {
	width:1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
}

img {
	border-style: none;
}

/*build the layout for the home page*/

#home_content{
	width:569px;
	margin-left: auto;
	margin-right: auto;
	background:url(images/girdy_home.jpg) no-repeat;
}


/*build the layout for the template*/

#content{
	width:957px;
	margin-left: auto;
	margin-right: auto;
}

/*build the remote rollovers for the home navigation*/

#remote {
  width: 569px;
  height: 505px;
  position: relative;

}

#remote ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*these are the parts needed for duplication*/

/*HOME*/

#hotspot_home{
	z-index:1;
}

#remote a #hotspot_home {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */
#remote a:hover #hotspot_home {
  background:url(images/home_over.jpg) no-repeat;
  width:236px;
  height:85px;
}

/* BUG Neither does this rule  */
#remote a:hover .home_link {
  color: #0066FF;
}

/* KLUDGE However if you add this rule, both the previous rules now work. Weird*/
#remote a:hover {
  border: none;
}


#remote .home a #hotspot_home {
  top: 311px;
  left: 49px;
  
}

#remote .home_link{
	position:relative;
	top:333px;
	left:42px;
	background:url(images/home_a.jpg) no-repeat;
}

#remote a .home_link {
  position: absolute;
  display: block;
  width:103px;
  height:82px;

}

/*MUSIC*/

#hotspot_music{
	z-index:1;
}


#remote a #hotspot_music {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */
#remote a:hover #hotspot_music {
  background:url(images/music_over.jpg) no-repeat;
  width:272px;
  height:118px;
}

#remote .music a #hotspot_music {
  top: 161px;
  left: 52px;
}

#remote .music_link{
	position:relative;
	top:159px;
	left:53px;
	background:url(images/music_a.jpg) no-repeat;
}

#remote a .music_link {
  position: absolute;
  display: block;
  width:94px;
  height:117px;
}

/*lyrics*/

#hotspot_lyrics{
	z-index:1;
}


#remote a #hotspot_lyrics {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_lyrics {
  background:url(images/lyrics_over.jpg) no-repeat;
  width:290px;
  height:100px;
}
#remote .lyrics a #hotspot_lyrics {
  top: 56px;
  left: 78px;
}

#remote .lyrics_link{
	position:relative;
	top:57px;
	left:76px;
/*	  border:dotted 1px;
*/
background:url(images/girdy_a.jpg) no-repeat;
}

#remote a .lyrics_link {
  position: absolute;
  display: block;
  width:89px;
  height:73px;
}

/*friends*/

#hotspot_friends{
	z-index:1;
}


#remote a #hotspot_friends {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_friends {
  background:url(images/friend_over.jpg) no-repeat;
  width:337px;
  height:116px;
}
#remote .friends a #hotspot_friends {
  top: 36px;
  left: 157px;
}

#remote .friends_link{
	position:relative;
	top:27px;
	left:205px;
/*	border:dotted 1px;
*/	background:url(images/friends_a.jpg) no-repeat;
}

#remote a .friends_link {
  position: absolute;
  display: block;
  width:103px;
  height:82px;
}

/*links*/

#hotspot_links{
	z-index:1;
}


#remote a #hotspot_links {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_links {
  background:url(images/links_over.jpg) no-repeat;
  width:217px;
  height:270px;
}
#remote .links a #hotspot_links {
  top: 12px;
  left: 250px;
}

#remote .links_link{
	position:relative;
	top:13px;
	left:326px;
/*	border:dotted 1px;
*/	background:url(images/links_a.jpg) no-repeat;
}

#remote a .links_link {
	position: absolute;
	display: block;
    width:94px;
  	height:90px;
}

/*contact*/

#hotspot_contact{
	z-index:1;
}


#remote a #hotspot_contact {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_contact {
  background:url(images/contact_over.jpg) no-repeat;
  width:317px;
  height:128px;
}
#remote .contact a #hotspot_contact {
  top: 80px;
  left: 240px;
}

#remote .contact_link{
	position:relative;
	top:83px;
	left:480px;
/*	border:dotted 1px;
*/	background:url(images/contact_a.jpg) no-repeat;
}

#remote a .contact_link {
  position: absolute;
  display: block;
  width:74px;
  height:84px;
}

/*about*/

#hotspot_about{
	z-index:1;
}


#remote a #hotspot_about {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_about {
  background:url(images/about_over.jpg) no-repeat;
  width:261px;
  height:74px;
}
#remote .about a #hotspot_about {
  top: 210px;
  left: 278px;
}

#remote .about_link{
	position:relative;
	top:211px;
	left:465px;
/*	border:dotted 1px;
*/	background:url(images/about_a.jpg) no-repeat;
}

#remote a .about_link {
  position: absolute;
  display: block;
  width:73px;
  height:68px;
}

/*shop*/

#hotspot_shop{
	z-index:1;
}


#remote a #hotspot_shop {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#remote a:hover #hotspot_shop {
  background:url(images/shop_over.jpg) no-repeat;
  width:210px;
  height:68px;
}
#remote .shop a #hotspot_shop {
  top: 260px;
  left: 271px;
}

#remote .shop_link{
	position:relative;
	top:261px;
	left:407px;
/*	border:dotted 1px;
*/	background:url(images/shop_a.jpg) no-repeat;
}

#remote a .shop_link {
  position: absolute;
  display: block;
  width:73px;
  height:69px;
}

/*********************build the remote rollovers for the template navigation*****************************/

#template_remote {
  width: 957px;
  height: 505px;
  position: relative;
background:url(images/girdy_page.jpg) no-repeat;
}

#template_remote ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* KLUDGE However if you add this rule, both the previous rules now work. Weird*/
#template_remote a:hover {
  border: none;
}

/*these are the parts needed for duplication*/

/*HOME*/
#template_hotspot_home{
	z-index:1;
}

#template_remote a #template_hotspot_home {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */
#template_remote a:hover #template_hotspot_home {
  background:url(images/home_over_pages.jpg) no-repeat;
  width:236px;
  height:85px;
}

#template_remote .template_home a #template_hotspot_home {
  top: 308px;
  left: 438px;
}

#template_remote .template_home_link{
	position:relative;
	top:334px;
	left:436px;
	background:url(images/home_a_pages.jpg) no-repeat;
}

#template_remote a .template_home_link {
  position: absolute;
  display: block;
  width:103px;
  height:82px;
}


/*MUSIC*/

#template_hotspot_music{
	z-index:1;
}


#template_remote a #template_hotspot_music {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */
#template_remote a:hover #template_hotspot_music {
  background:url(images/music_over_pages.jpg) no-repeat;
  width:272px;
  height:118px;
}

#template_remote .template_music a #template_hotspot_music {
  top: 160px;
  left: 440px;
}

#template_remote .template_music_link{
	position:relative;
	top:159px;
	left:441px;
	background:url(images/music_a.jpg) no-repeat;
}

#template_remote a .template_music_link {
  position: absolute;
  display: block;
  width:94px;
  height:117px;
}

/*lyrics Girdy*/

#template_hotspot_lyrics{
	z-index:1;
}


#template_remote a #template_hotspot_lyrics {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_lyrics {
  background:url(images/lyrics_over_pages.jpg) no-repeat;
  width:240px;
  height:108px;
}
#template_remote .template_lyrics a #template_hotspot_lyrics {
  top: 52px;
  left: 473px;
}

#template_remote .template_lyrics_link{
	position:relative;
	top:51px;
	left:473px;
/*	  border:dotted 1px;
*/
background:url(images/lyrics_a_pages.jpg) no-repeat;
}

#template_remote a .template_lyrics_link {
  position: absolute;
  display: block;
  width:89px;
  height:73px;
}

/*friends*/

#template_hotspot_friends{
	z-index:1;
}


#template_remote a #template_hotspot_friends {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_friends {
  background:url(images/friend_over_pages.jpg) no-repeat;
  width:337px;
  height:116px;
}
#template_remote .template_friends a #template_hotspot_friends {
  top: 36px;
  left: 543px;
}

#template_remote .template_friends_link{
	position:relative;
	top:27px;
	left:593px;
/*	border:dotted 1px;
*/	background:url(images/friends_a.jpg) no-repeat;
}

#template_remote a .template_friends_link {
  position: absolute;
  display: block;
  width:103px;
  height:82px;
}

/*links*/

#template_hotspot_links{
	z-index:1;
}


#template_remote a #template_hotspot_links {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_links {
  background:url(images/links_over.jpg) no-repeat;
  width:217px;
  height:270px;
}
#template_remote .template_links a #template_hotspot_links {
  top: 12px;
  left: 638px;
}

#template_remote .template_links_link{
	position:relative;
	top:13px;
	left:714px;
/*	border:dotted 1px;
*/	background:url(images/links_a.jpg) no-repeat;
}

#template_remote a .template_links_link {
	position: absolute;
	display: block;
    width:94px;
  	height:90px;
}

/*contact*/

#template_hotspot_contact{
	z-index:1;
}


#template_remote a #template_hotspot_contact {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_contact {
  background:url(images/contact_over.jpg) no-repeat;
  width:317px;
  height:128px;
}
#template_remote .template_contact a #template_hotspot_contact {
  top: 80px;
  left: 628px;
}

#template_remote .template_contact_link{
	position:relative;
	top:83px;
	left:868px;
/*	border:dotted 1px;
*/	background:url(images/contact_a.jpg) no-repeat;
}

#template_remote a .template_contact_link {
  position: absolute;
  display: block;
  width:74px;
  height:84px;
}

/*about*/

#template_hotspot_about{
	z-index:1;
}


#template_remote a #template_hotspot_about {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_about {
  background:url(images/about_over.jpg) no-repeat;
  width:261px;
  height:74px;
}
#template_remote .template_about a #template_hotspot_about {
  top: 210px;
  left: 666px;
}

#template_remote .template_about_link{
	position:relative;
	top:211px;
	left:853px;
/*	border:dotted 1px;
*/	background:url(images/about_a.jpg) no-repeat;
}

#template_remote a .template_about_link {
  position: absolute;
  display: block;
  width:73px;
  height:68px;
}

/*shop*/

#template_hotspot_shop{
	z-index:1;
}


#template_remote a #template_hotspot_shop {
  position: absolute;
}

/* BUG This rule on its own does not work in IE see comments above marked BUG / KLUDGE  */

#template_remote a:hover #template_hotspot_shop {
  background:url(images/shop_over.jpg) no-repeat;
  width:210px;
  height:68px;
}
#template_remote .template_shop a #template_hotspot_shop {
  top: 260px;
  left: 659px;
}

#template_remote .template_shop_link{
	position:relative;
	top:261px;
	left:795px;
/*	border:dotted 1px;
*/	background:url(images/shop_a.jpg) no-repeat;
}

#template_remote a .template_shop_link {
  position: absolute;
  display: block;
  width:73px;
  height:69px;
}


/*create the pages**************************************************************/

/*create the music page*/

#music_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/music_header.jpg) no-repeat;
	height:61px;
	
}

#media_player{
	position:absolute;
	top:0px;
	left:0px;
}

#shadow{
	position:absolute;
	top:187px;
	left:24px;
	height:202px;
	width:342px;
	background:#999;
}

#shop_link{
position:absolute;
top:400px;
left:50px;
}


/*create the lyrics page*/
#lyrics_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/girdy.jpg) no-repeat;
	height:57px;
	
}

#lyrics_content{
	position:absolute;
	top:163px;
	left:55px;
	width:250px;
/*	height:205px;
	position:absolute;
	top:400px;
	left:100px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:14px;
	font-weight:700;
*/
}

/*create the friend page*/
#friend_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/friend.jpg) no-repeat;
	height:55px;
}

#friends_content{
	width:340px;
	height:205px;
	overflow:auto;
	position:absolute;
	top:183px;
	left:40px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:700;
}

#friends_form {
	position:absolute;
	top:50px;
	left:0px;
}

label {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	display:block;
	color:#06F;
	margin-top:5px;
	font-size:1.1em;
	font-weight:bold;
}

label .warning{
	color:#FF0000;
}

.warning{
	color:#FF0000;
	font-weight:normal;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#warning{
	width:195px;
}

.submit{
	color:#06F;
	background:#FFFFFF;
	cursor: hand;
	cursor: pointer;
	width:110px;
	text-align:center;
}

#submitt{
	position:relative;
	top:10px;
	left:0px;
	width:100px;
}

.thankyou{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#0066CC;
	text-align:center;
	width:195px;
	}
input:focus, textarea:focus {
	background: #ffc;
}

.contact_form form input{
	width:310px;
	background: #C9FFFA;
}

/*create the links page*/
#links_header{
	position:absolute;
	top:12px;
	left:20px;
	background:url(images/thanks.jpg) no-repeat;
	height:56px;
	
}

#links_content{
	width:340px;
	height:205px;
	overflow:auto;
	position:absolute;
	top:200px;
	left:40px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:700;
}

#pop_up{
	width:300x;
	position:absolute;
	top:300px;
	left:40px;

}

#top_row{
	margin-left:70px;
}

#bottom_row{
	margin-right:60px;
}

/*create the contact page*/
#contact_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/contact.jpg) no-repeat;
	height:53px;
}

.contact_form {
	position:absolute;
	top:175px;
	left:40px;
}

label {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	display:block;
	color:#06F;
	margin-top:5px;
	font-size:1.1em;
	font-weight:bold;
	width:280px;
}

label .warning{
	color:#FF0000;
}

.warning{
	color:#FF0000;
	font-weight:normal;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#warning{
	width:195px;
}

.contact_form .submit{
	color:#06F;
	background:#FFFFFF;
	cursor: hand;
	cursor: pointer;
	width:110px;
	text-align:center;
}

#submitt{
	position:relative;
	top:10px;
	left:0px;
	width:100px;
}

.thankyou{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#0066CC;
	text-align:center;
	width:195px;
	}
input:focus, textarea:focus {
	background: #ffc;
}

.contact_form form input{
	width:310px;
	background: #C9FFFA;
}

form textarea{
	background: #C9FFFA;
		width:310px;

}


/*create the about page*/
#about_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/about_header.jpg) no-repeat;
	height:61px;
	
}

#about_content{
	width:340px;
	height:205px;
	overflow:auto;
	position:absolute;
	top:200px;
	left:40px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:700;
}

/*create the shop page*/
#shop_header{
	position:absolute;
	top:12px;
	left:50px;
	background:url(images/shop_header.jpg) no-repeat;
	height:61px;
	
}

#shop_content{
	position:absolute;
	top:190px;
	left:50px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1.0em;
	font-weight:bold;
}

/*create the thankyou page*/

#thankyou_header{
	position:absolute;
	top:10px;
	left:50px;
	height:61px;
	
}

#thankyou_content{
	position:absolute;
	top:200px;
	left:10px;
	height:61px;
}