/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img,abbr, acronym{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}strong{font-weight:bold;}em{font-style:italic;}

html { background: url(images/fancy-wallpaper.jpg) fixed; }

body { font-family: Cambria, Georgia, serif; font-size: 14px; line-height: 20px; }
ul { list-style-position: inside; }
li { margin: 18px 0; }

#wrapper { width: 960px; height: 640px; margin: 60px auto 40px; background: #1d1b1e url(images/picture-frame.png) no-repeat; position: relative; 
			-moz-box-shadow: 8px 8px 10px rgba(18,14,20,0.6); -webkit-box-shadow: 8px 8px 10px rgba(18,14,20,0.6); box-shadow: 8px 8px 10px rgba(18,14,20,0.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; z-index: 2; }

#nav { position: absolute; top: 50px; right: 80px; width: 430px; height: 25px; list-style: none; }
#nav li { float: left; margin: 0; }
#nav li a { display: block; background: url(images/nav-matrix.png) no-repeat; height: 25px; outline: none; width: 30px; text-indent: -9999px; position: relative; }

#nav-herself:link, #nav-herself:visited { width: 70px; top: -3px; }
#nav-herself:hover, #nav-herself:focus { background-position: 0 -25px; }
#nav-herself:active { background-position: 0 -50px; }

#nav-gigs:link, #nav-gigs:visited { background-position: -70px 0; width: 50px; }
#nav-gigs:hover, #nav-gigs:focus { background-position: -70px -25px; }
#nav-gigs:active { background-position: -70px -50px; }

#nav-albums:link, #nav-albums:visited { background-position: -120px 0; width: 60px; top: -2px;  }
#nav-albums:hover, #nav-albums:focus { background-position: -120px -25px; }
#nav-albums:active { background-position: -120px -50px; }

#nav-photos:link, #nav-photos:visited { background-position: -180px 0; width: 70px; }
#nav-photos:hover, #nav-photos:focus { background-position: -180px -25px; }
#nav-photos:active { background-position: -180px -50px; }

#nav-news:link, #nav-news:visited { background-position: -250px 0; width: 50px; top: 2px;  }
#nav-news:hover, #nav-news:focus { background-position: -250px -25px; }
#nav-news:active { background-position: -250px -50px; }

#nav-contact:link, #nav-contact:visited { background-position: -300px 0; width: 70px; }
#nav-contact:hover, #nav-contact:focus { background-position: -300px -25px; }
#nav-contact:active { background-position: -300px -50px; }

#nav-links:link, #nav-links:visited { background-position: -370px 0; width: 60px; top: -3px;  }
#nav-links:hover, #nav-links:focus { background-position: -370px -25px; }
#nav-links:active { background-position: -370px -50px; }

#header { height: 100px; }

#main { height: 440px; margin: 0 80px; position: relative; -moz-box-shadow: inset 3px 3px 5px rgba(18,14,20,0.6); background-repeat: no-repeat; background-color: #120e14; }
.content-wrap { overflow: auto; height: 440px; width: 800px; position: relative; }

#welcome #main { background-image: url(images/homepage.jpg); }
#herself #main { background-image: url(images/herself.jpg); }
#gigs #main { background-image: url(images/some-background.jpg); }
#albums #main { background-image: url(images/cardboard.jpg); }
#photos #main { background-image: url(images/cardboard.jpg); }
#news #main { background-image: url(images/news.jpg); }
#contact #main { background-image: url(images/background-contact.jpg); }
#links #main { background-image: url(images/links-background.jpg); }

#content { color: #020202; position: absolute; background: #d3a879 url(images/cardboard-bg.jpg) repeat-y center; padding: 15px; -moz-box-shadow: 0 0 8px rgba(0,0,0,0.75); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.75); box-shadow: 0 0 8px rgba(0,0,0,0.75); }

#welcome #content { right: 50px; top: 50px; width: 330px; }
#herself #content { right: 30px; top: 40px; width: 310px; }
#gigs #content { left: 50px; top: 50px; width: 330px; }
#albums #content { right: 50px; top: 50px; width: 300px; }
#photos #content { left: 50px; top: 50px; width: 300px; }
#news #content { right: 30px; top: 60px; width: 300px; }
#contact #content { right: 50px; top: 50px; width: 300px; }
#links #content { right: 50px; top: 50px; width: 300px; }

#page-title { background: url(images/headers.png) no-repeat; height: 50px; text-indent: -9999px; margin-bottom: -8px; }

#welcome #page-title { background-position: center 0; }
#herself #page-title { background-position: center -50px; }
#gigs #page-title { background-position: center -100px; }
#albums #page-title { background-position: center -150px; margin-top: 16px; }
#photos #page-title { background-position: center -200px; margin-top: 16px;}
#news #page-title { background-position: center -250px; }
#contact #page-title { background-position: center -300px; }
#links #page-title { background-position: center -350px; }
#albums .umbrella #page-title { background-position: center -400px; margin-bottom: 16px; }
#albums .yes #page-title { background-position: center -450px; margin-bottom: 16px; }
#links .reviews #page-title { background-position: center -500px; }

p { margin: 16px 0; }
a { color: #981008; }
h3 { font-weight: bold; color: #981008;}

#footer {height: 80px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666; }
.launch-player { display: block; background: url(images/launch-player.png) no-repeat; height: 34px; width: 233px; float: right; margin-right: 40px; margin-top: 20px; text-indent: -9999px; }
.copyright { clear: both;}

h1 { position: absolute; top: 20px; left: 80px; }
h1 a:link, h1 a:visited { display: block; width: 220px; height: 75px; background: url(images/lynn-o-brien.png) no-repeat; text-indent: -9999px; outline: none; }
h1 a:hover, h1 a:focus { background-position: 0 -75px; }
h1 a:active { background-position: 0 -150px; }

div[class="corner"] { background: url(images/corners.png) no-repeat; width: 180px; height: 180px; position: fixed; z-index: 1; } /* attribute selctor used to automatically hide from IE6 */
#top-left { top: 0; left: 0; }
#top-right { top: 0; right: 0; background-position: -180px 0; }
#bottom-left { bottom: 0; left: 0; background-position: 0 -180px; }
#bottom-right { bottom: 0; right: 0; background-position: -180px -180px; }

.polaroid { width: 205px; height: 255px; background: #FFF; -moz-box-shadow: 4px 4px 6px 3px rgba(0,0,0,0.35); -webkit-box-shadow: 4px 4px 3px rgba(0,0,0,0.35); box-shadow: 4px 4px 3px rgba(0,0,0,0.35); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; position: absolute; }

.sindha { left: 15px; top:25px; -moz-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg); }
.karen-promo { left: 210px; top: 125px; -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
.karen-live { left: 410px; top: 70px; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg); transform: rotate(4deg); }
.friends-live { right: 30px; bottom: 35px; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }

.polaroid:hover { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); z-index: 5; }

.hidden { display: none; }

.itunes-link { background: url(images/available-on-itunes.png) no-repeat; width: 240px; height: 50px; text-indent: -9999px; display: block; position: absolute; left: 75px; bottom: 35px; }
.itunes-link-player { background: url(images/cardboard-bg.jpg) repeat-y center; padding: 15px; -moz-box-shadow: 0 0 8px rgba(0,0,0,0.75); -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.75); box-shadow: 0 0 8px rgba(0,0,0,0.75); width: 330px; }
#player { margin: 0 16px;}

#albums-wrap { width: 620px; margin: 20px auto; }
#albums-wrap img { border: 5px solid #FFF; -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.2); box-shadow: 5px 5px 5px rgba(0,0,0,0.2); margin: 5px 0 -15px; }
.album-umbrella {float: left; width: 280px; }
.album-yes { float: right; width: 280px; }

.lyrics { text-align: center; }