/* ----------- general --- */

body {
color: #FFFFFF ;
color: #535352 ;		
}



/* ----------- typography --- */

.break-word {
word-wrap: break-word;
}

p {
position: relative ;
text-align: justify ; 
vertical-align: top ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
word-spacing:1px ;
line-height: 130% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 15px ;
padding-left: 5% ;
padding-right: 5%;
word-wrap: normal ;
}

.largelinks {
font-size: 14px ;
font-weight: bold;
}


.italic {
position: relative ;
font-style:italic ;
font-family: "Times New Roman", Didot, "Chaparral Pro", "Bell MT", "Lucida Bright" ;
font-size: 15px ;
text-align: left ; 
display: inline-block;
padding-left: 2% ;
padding-right: 2%; 
} 

h1 {
position: relative ;
text-align: left ; 
vertical-align: top ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
word-spacing:1px ;
line-height: 190% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 17px ;
top: 10px ;
padding-left: 5% ;
padding-right: 5%;
word-wrap: normal ;
color: #977f66 ;
}

h2 {
position: relative ;
text-align: left ; 
vertical-align: top ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
word-spacing:1px ;
line-height: 190% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 16px ;
top: 19px ;
padding-left: 5% ;
padding-right: 5%;
word-wrap: normal ;
color: #977f66 ;
}


h3 {
position: relative ;
text-align: left ; 
vertical-align: top ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
word-spacing:1px ;
line-height: 190% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 15px ;
top: 15px ;
padding-left: 5% ;
padding-right: 5%;
word-wrap: normal ;
color: #575757;
}


li {
position: relative ;
text-align: left ; 
vertical-align: top ;
list-style-type: none ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
word-spacing:1px ;
line-height: 130% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 13px ;
word-wrap: normal ;
}



#homebutton{
}

/* ----------- images --- */

img {
border: none ;
max-width: 90%;
height: auto;
padding-left: 5%;
padding-right: 20%;

}

#whitegoth1 {
position: absolute ;
top: 2640px;
left: -400px ;
z-index: 8 ;
}

#rivetheadgoth1 {
position: absolute ;
top: 4160px;
left: -400px ;
z-index: 8 ;
}

#victoriangoth1 {
position: absolute ;
top: 1100px;
left: -430px ;
z-index: 8 ;
}


#steamgoth1 {
position: absolute ;
top: 6000px;
left: -400px ;
z-index: 8 ;
}

#gothabilly1 {
position: absolute ;
top: 7000px;
left: -370px ;
z-index: 8 ;
}


#deathrocker1 {
position: absolute ;
top: 7860px;
left: -370px ;
z-index: 8 ;
}


#gothicterm {
position: absolute ;
top: 4860px;
width: 500px ;
left: 800px ;
z-index: 8 ;
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:80;
	width:90%;
	height:100%;
padding-left:5%;

}


/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;} 
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}


/* ----------- Goth Website May 2010 --- */


#banner {
position: relative ;
top: 10px ;
left: 0px;
width: 100% ;
margin: 0 auto ;
z-index: 12 ;
}




#SocialMedia{
position: absolute ;
top: 6120px ;
left: 390px ;
width: 700px ;
z-index: 25 ;
}




#container{
position: relative ;
width: 100% ;
max-width: 800px ;
min-left: 0px;
height:23000px ;
top: -50px ;
margin: 0 auto ;
background: white ;
z-index: 1 ;
}

#containerscontainer{
position: absolute ;
width: 100% ;
max-width: 800px ;
min-left: 0px;
height:21000px ;
top: -50px ;
margin: 0 auto ;
background: white ;
z-index: 1 ;
}

#MusicContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 33000px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}

#FashionContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 13280px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}

#ContactContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 1960px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}



#Store{
width: 1395px ;
height: 1950px ;
position: absolute ;
top: 215px ;
left: 240px ;
background:none ;
padding: 60px ;
z-index: 5 ;
}


#LitContainer{
width: 795px ;
top: 300px ;
left: 220px ;;
height: 7980px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}

#DecorContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 7300px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}


#ArtContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 7810px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}


#FilmContainer{
width: 795px ;
top: 300px ;
left: 220px ;
height: 16200px ;
position: absolute ;
background: white ;
padding: 60px ;
z-index: 4 ;
}


 


self.navigationController.navigationBar.translucent = NO;


.nav li:last-child {
    border-right: none;
}


.nav ul {
position: fixed;
  overflow: hidden;
top: 0;
border: 1px solid #555;
 width: 100%;
  list-style: none;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
background:opaque;
}

.nav li {
display: inline;
  font-family: helvetica, verdana, "lucida sans", arial, sathu ;
  font-size: 1.2em;
  line-height: 20px;
  height: 20px;
border-bottom: 1px solid #555;
border-right: 1px solid #bbb;

}
 
.nav a {
padding: 14px;
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: red ;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #fff;
  }
  */
}

.nopadding {
padding: 0px !important;
    padding-right:0px !important;    
}


.side-by-side li {
  display: inline;
}


#TopSocialContainer{
position: relative;
margin: 0 auto ;
left: 0%;
top: 35px;
background: none ;
  list-style-type:none;
    -webkit-user-select:none;
    -moz-user-select:none;
z-index: 19 ;
}


#LinksContainer{
position: relative;
left: -20px;
top: 10px;
display: inline-block;
width: 100% ;
min-width: 20px;
text-align: center ; 
background: none ;
z-index: 1 ;
}

#LinksContainerBlog{
width: 40px ;
height: 60px ;
position: absolute ;
text-align: center ; 
top: 520px ;
left: 145px ;
font-size: 25px ;
background: none ;
z-index: 1 ;
}



#BLinksContainer{
position: relative ;
width: 100% ;
left: -35px ;
text-align: center ; 
background: none ;
z-index: 1 ;
}

#CBLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: 110px ;
left: -520px ;
background: none ;
z-index: 1 ;
}

#SBLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: -100px ;
left: -520px ;
background: none ;
z-index: 1 ;
}

#MBLinksContainer{
width: 1810px ;
height: 490px ;
position: relative ;
text-align: center ; 
top: 29000px ;
left: -260px ;
background: none ;
z-index: 1 ;
}

#FBLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: 840px ;
left: -520px ;
background: none ;
z-index: 1 ;
}

#FaBLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: 990px ;
left: -520px ;
background: none ;
z-index: 1 ;
}

#LBLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: 8220px ;
left: -250px ;
background: none ;
z-index: 1 ;
}

#HBLinksContainer{
width: 1810px ;
height: -190px ;
position: relative ;
text-align: center ; 
top: 290px ;
left: -520px ;
background: none ;
z-index: 1 ;
}


#ABLinksContainer{
width: 1810px ;
height: 190px ;
position: relative ;
text-align: center ; 
top: 470px ;
left: -520px ;
background: none ;
z-index: 1 ;
}

/* ----------- images for website --- */

#Butterfly{
position: absolute ;
toq; -20px ;
left: 509px ;
z-index: 6 ;
float: right; 

}


#Masks{
position: relative ;
margin: 0 auto ;
top: -9px ;
width: 60%;
left: 8% ;
z-index: 15 ;
}

#Gramophone{
position: relative ;
margin: 0 auto ;
top: -9px ;
width: 60%;
left: 8% ;
z-index: 15 ;
}

#gothmothersmusic{
position: absolute ;
margin: 0 auto ;
top: 659px ;
height: auto;
width: 500px;
left: 790px ;
z-index: 15 ;
}

#gothfashionicons{
position: absolute ;
margin: 0 auto ;
top: 1209px ;
height: auto;
width: 500px;
left: 790px ;
z-index: 15 ;
}


#gothfathersmusic{
position: absolute ;
margin: 0 auto ;
top: 659px ;
height: auto;
width: 500px;
left: 790px ;
z-index: 15 ;
}

#Book{
position: relative ;
top: 20px ;
margin: 0 auto ;
width: 60%;
left: 16% ;
z-index: 5 ;
}

#chandelier{
position: relative ;
margin: 0 auto ;
top: 20px ;
width: 60%;
left: 8% ;
z-index: 15 ;
}

#scroll{
top: 600px ;
left: 40px ;
position: absolute ;
text-align: center ; 
background: none ;
z-index: 12 ;
}

#GothicHeadImage{
position: relative ;
margin: 0 auto ;
max-width: 250px ;
z-index: 5 ;
}

#GothicCharacteristics{
position: relative ;
margin: 0 auto ;
max-width: 500px ;
z-index: 5 ;
}

#VisitmyBlog{
position: absolute ;
top: 5790px ;
left: 740px ;
z-index: 5 ;
}



#ZombieShoes{
position: relative ;
top: 30px ;
margin: 0 auto ;
width: 60%;
left: 3% ;
z-index: 5 ;
}


#PerfumeBottle {
position: relative ;
top: -15px ;
margin: 0 auto ;
width: 60%;
left: 11% ;
z-index: 5 ;
}


#Batcave {
position: relative ;
top: -29px ;
margin: 0 auto ;
width: 60%;
left: 7% ;
z-index: 5 ;
}

#HorseLamp{
position: absolute ;
top: 260px ;
left: 1130px ;
z-index: 6 ;
}

#CrowChair{
position: absolute ;
top: 730px ;
left: 1160px ;
z-index: 6 ;
}

#DressingTable{
position: absolute ;
top: 1200px ;
left: 1160px ;
z-index: 6 ;
}

#SlumberWellBed{
position: absolute ;
top: 1620px ;
left: 1160px ;
z-index: 6 ;
}

#BlackBeautyChair{
position: absolute ;
top: 1890px ;
left: 1200px ;
z-index: 6 ;
}

#CDs{
position: absolute ;
top: 1120px ;
left: 1160px ;
z-index: 8 ;
}


#DVDs{
position: absolute ;
top: 250px ;
left: 950px ;
z-index: 8 ;
}


#Contact{
position: absolute ;
top: -90px ;
left: 310px ;
z-index: 8 ;
}


#StoreLogo{
position: absolute ;
top: 0px ;
left: 300px ;
z-index: 8 ;
}

#Envelope{
position: relative ;
top: 20px ;
margin: 0 auto ;
width: 60%;
left: 4% ;
z-index: 5 ;
}

#Email{
position: relative ;
top: 40px ;
left: 36% ;
z-index: 8 ;
}

 
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right: 0;
    float: left;
    margin-bottom: 25px;
}

.hide:hover, .show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}

.list p{
    height:auto;
    margin:0;
}
.question {
    float: left;
    height: auto;
    width: 90%;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 25px;
    font-style: normal;
font-weight: bold;
}

#faqs{
position: absolute ;
width: 800px ;
height: 1090px ;
position: relative ;
text-align: left ;
top: 60px ;
left: 8px ;
z-index: 8 ;
}


#GothicFashion{
position: relative ;
top: 30px ;
margin: 0 auto ;
width: 60%;
left: 3% ;
z-index: 5 ;
}

#GothicDecor{
position: relative ;
top: 30px ;
margin: 0 auto ;
width: 60%;
left: 3% ;
z-index: 5 ;
}



#GothicFilm{
position: absolute ;
top: -40px ;
left: 200px ;
z-index: 8 ;
}

#GothicArtText{
position: relative ;
top: 20px ;
margin: 0 auto ;
width: 60%;
left: 5% ;
z-index: 5 ;
}

#GothicArt{
position: relative ;
top: 20px ;
margin: 0 auto ;
width: 60%;
left: 16% ;
z-index: 5 ;
}


#GothicLiterature{
position: relative ;
top: 10px ;
margin: 0 auto ;
width: 60%;
left: 3% ;
z-index: 5 ;
}


#GothicPerfumeText{
position: relative ;
top: -9px ;
margin: 0 auto ;
width: 60%;
left: -1% ;
z-index: 5 ;
}

#BatcaveText{
position: relative ;
top: -9px ;
margin: 0 auto ;
width: 90%;
left: -1% ;
z-index: 5 ;
}

#BatCostume{
position: absolute ;
top: 320px ;
left: 760px ;
width: 100%;
z-index: 8 ;
}


#Backwards {
position: absolute ;
top: 320px ;
left: 1090px ;
z-index: 8 ;
}

#mourning1{
position: absolute ;
top: 730px ;
left: 290px ;
z-index: 8 ;
}



/* ----------- links --- */

a:link{ 
color: #8f8f8f ;

}
a:visited{ 
color: #8f8f8f ;

}
a:hover{ 
color: #c32b2b;
background-color: none;
text-decoration: none;
	
}


a:active{ 
color: #8f8f8f ;
}

body div#content p a.link img {
	border: none;
	text-decoration: none;
}






a {text-decoration:none}


ul{list-style-type: none ;}
il{list-style-type: none ;}