/*Page Setup*/

body {
      background: #003333 !important;
      color: black;
			text-align: center;
			position: relative;
					z-index: 0;
					width: 1010px;
					margin: auto;
					text-align: center;
			}
							
#masthead {
          width: 990px;
					height: 110px;
					background: url("../graphics/storyheader.jpg") no-repeat bottom;
					text-align: center;
					margin: 20px auto 0 auto !important;
					position: relative;
					z-index: 1;
          }		
					

 						 
#container3 {

						background: #330000;
						text-align: center;
					  z-index: 0;
						width: 850px;
						margin: auto;
						border-left: solid 20px #663300;
						border-right: solid 20px #663300;
						padding: 0;
						position: relative;
						}
						
#container4 {
            width: 850px !important;
						margin: 0 auto;
						text-align: center;
					  z-index: 0;
						position: relative;
						background: #330000 url("../graphics/shelf.jpg") no-repeat bottom;
							}				
						
						
						
.shelf {
        height: 230px;
				border-bottom: solid 12px #663300;
				border-left: solid 1px black;
				border-right: solid 1px black;
				position: relative;
				z-index: 0;
				padding: 0;
				background: url("../graphics/shelf.jpg") no-repeat bottom;
				/*padding-bottom: 10px;*/
				}
			
/*Books*/	
.bookOutline {
              border: solid 1px gray;
							}
					
#dddspine,
#goldspine,
#venusspine,
#tallspine,
#barryspine,
#boardspine {
        position: relative;
				z-index: 4;
				bottom: -7px;
				padding-bottom: 0;
				}
				
#dddBox {
position: absolute;
left: 180px;
}

#barryBox {
position: absolute;
left: 400px;
}

#venusBox {
position: absolute;
left: 445px;
}

#tallBox {
position: absolute;
left: 100px;
}
#goldBox {
position: absolute;
left: 230px;
bottom: 4px;
}

#boardBox {
position: absolute;
left: 550px;
bottom: 4px;
}
#hedgehogBox {
position: absolute;
left: 600px;
bottom: 0;
}

#dayBox {
position: absolute;
left: 490px;
bottom: 0;
}

#youBox {
position: absolute;
left: 500px;
bottom: 0;
}



#frog,
#mug,
#fats,
#sheep,
#poot,
#bing,
#butterfly,
#brick,
#yeti,
#maisy,
#bongo,
#clanger {
display: none;
}

				
.spineLink {
text-decoration: none;
margin-right: 10px;
display: relative;
}
				
.bookText {
            font: bold 12px arial, sans-serif;
            color: white;
            margin: auto;
            text-align: center;
						background: black;
						margin: 0;
            }					
.bookText a:link, .bookText a:visited {color: white;}


				

/*Death Doom*/
#dddcover,
#dddback,
#dddframe
        {
        position: absolute;
				z-index: 3;
				left: 220px;
				top: 80px;
				display: none;
        }

  #dddBackFrame {
                 height: 300px;
                 width: 208px;
                 background: url("../graphics/dddback.jpg") no-repeat right;
                 }

  #ddd {
        height: 300px;
        width: 208px;
        background: #336600 url(../graphics/dddheader.jpg) no-repeat top;
        }

  .dddLink {
            color: white !important;
            font: bold 12px arial, sans-serif;
            }
		
  #dddlinks1 {
              width: 100px;
              float: left;
              clear: left;
							text-align: right;
							margin-right: 4px;
							margin-top: 4px
              }

  #dddlinks2 {
              width: 100px;
              float: left;
							text-align: left;
							margin-left: 4px;
							margin-top: 4px
              }	

/*Goldilocks*/
  #goldcover,
	#goldback,
	#goldframe 
        {
        position: absolute;
				z-index: 3;
				left: 220px;
				top: 280px;
				display: none;
        }
				
	#goldBackFrame {
                 height: 300px;
                 width: 208px;
                 background: black;
                 }				

	#goldilocks {
               height: 300px;
               width: 208px;
               background: gray;
               }

	.goldLink:link,
	.goldLink:visited {
            font: bold 12px arial, sans-serif;
						color: black;
						}
												 

  .goldLink:link:hover, .goldLink:visited:hover {color: white;}

  #goldlinks1 {
               width: 100px;
               float: left;
               clear: left;
							 text-align: right;
							 margin-right: 4px;
							 }
  
	#goldlinks2 {
               width: 100px;
               float: left;
							 text-align: left;
							 margin-left: 4px;
							 }						 
							 
/*Venus*/		
  #venuscover,
	#venusback,
	#venusframe 
        {
        position: absolute;
				z-index: 3;
				left: 460px;
				top: 80px;
				display: none;
        } 
				
	#venusBackFrame {
                 height: 300px;
                 width: 208px;
                 background: black url(../graphics/venusback.jpg) no-repeat top;
                 }		
								 
	#venus {
          background-color: black;
          color: white;
					 height: 300px;
           width: 208px;
					 border: solid 1px gray;
					}					 
				
	.venusLink:link {
	          color: white;
            font: italic 14px 'Times New Roman', serif;
						}
	

	
	
/*Tall Story*/
   #tallcover,
   #tallback,
   #tallframe
        {
        position: absolute;
				z-index: 3;
				left: 120px;
				top: 280px;
				display: none;
        }
				
				
		#tallBackFrame {
                 height: 300px;
                 width: 208px;
                 background: url(../graphics/tallback.jpg) no-repeat top;
                 }	
				
					
/*Barry*/
   #barrycover,
   #barryback,
   #barryframe
        {
        position: absolute;
				z-index: 3;
				left: 355px;
				top: 80px;
				display: none;
        }			
					
	#barryBackFrame {
                 height: 300px;
                 width: 208px;
                 background: url(../graphics/barryback.jpg) no-repeat top;
                 }	
								 
/*Board*/
   #boardcover,
   #boardback,
   #boardframe
        {
        position: absolute;
				z-index: 3;
				left: 560px;
				top: 280px;
				display: none;
        }			
					
	#boardBackFrame {
                 height: 300px;
                 width: 208px;
                 background: red;
                 }		
								 
								 
								 
				/*Hedgehog*/
   #hedgehogcover,
   #hedgehogback,
   #hedgehogframe
        {
        position: absolute;
				z-index: 3;
				left: 560px;
				top: 280px;
				display: none;
        }			
					
	#hedgehogBackFrame {
                 height: 300px;
                 width: 208px;
                 background: url(../graphics/hedgehogback.jpg) no-repeat top;		
					       }					 
		
		
		
						/*Day Before Tomorrow*/
   #daycover,
   #dayback,
   #dayframe
        {
        position: absolute;
				z-index: 3;
				left: 560px;
				top: 80px;
				display: none;
        }			
					
	#dayBackFrame {
                 height: 300px;
                 width: 208px;
                 background: navy;
								 }
								 
								/*You Again*/
   #youcover,
   #youback,
   #youframe
        {
        position: absolute;
				z-index: 3;
				left: 560px;
				top: 210px;
				display: none;
        }			
					
	#youBackFrame {
                 height: 300px;
                 width: 208px;
                 background: #a8a197;
								 }						 
								 
								 
/*Text*/
			
					 
h1 {font: 35px "Times New Roman", serif; 
	 color: #330000; 
	 text-align: center;
	 margin: 0 !important;
	 padding: 8px 0 0 0 !important;
	}
		
#url {font: 35px "Times New Roman", serif; 
	 color: #330000; 
	 text-align: center;
	 margin-top: 0;
	 	}
				
h3 {font: italic 18px Times New Roman, serif; 
	 color: #663399; 
	 text-align: center;
    }				
		
h4 {font: bold 12px verdana, sans-serif; 
	 text-align: left;
	 padding: 0 18px;
	 margin-bottom: 0;
    }			

p {
   font: small verdana, sans-serif; 
	 color: black; 
	 text-align: justify;
	 padding: 0 18px;
	 margin-top: 0;
	 }
	 
	 
#copyright {
           font: 10px verdana, sans-serif; 
	         color: silver; 
	         text-align: center;
					 margin: auto;
					 }


/*---------------------------------------------------------------*/
/*Graphics*/
#articleLogo {
              position: absolute;
					    z-index: 1;
							left: 0;
							}

#articleUrl {
             clear: both;
						 width: 870px;
					   height: 110px;
					   background: url("../graphics/storyheader.jpg") no-repeat bottom;
					   text-align: center;
					   margin: 0 auto;
						 position: relative;
					   z-index: 0;
						 border-left: solid 5px #330000;
						 border-right: solid 5px #330000;
						 }

#animatedBackground {display: none;}
#promoPanel, #promo2, #latestBlogs {display: none;}



#mobileLinks {
					  z-index: 0;
						position: relative;
						background: white;
						width: 80%;
						margin: 60px auto;
						display: none;
}

#mobileLinks a:link, #mobileLinks a:visited {color: black; font: bold 22px arial, sans-serif;}
#mobileLinks a:link:hover, #mobileLinks a:visited:hover {color:red;} 
#mobileLinks p {width: 80%; margin: 0 auto; padding: 0;}


@media only screen and (max-width: 960px) {
#mobileLinks {display: block;}
#container4{display: none;}
#frog,
#mug,
#fats,
#sheep,
#poot,
#bing,
#butterfly,
#brick,
#yeti,
#maisy,
#bongo,
#clanger {
visibility: hidden;
}
#container3 {border: 0; background: white;}

}