* {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} 
/* #top #right #bottom #left; */ 
body {
	background: #D0E4F5;
	overflow-y: scroll;
}

header {
	text-align: center;	
}

.navbar {
	margin-bottom: 10px; 
}


.dropdown-menu li:not(:last-child) {
    margin-bottom: -0.5em;
}

.container-fluid{flex-wrap: initial!important;}


.center{
  text-align: center;
	}
	
.text-shadow {text-shadow: 3px 2px 2px black, 0 0 35px white, 0 0 5px darkblue;	}

.fsize16{font-size: 16px;}
.fsize25{font-size: 25px;}
.fsize45{font-size: 45px;}


.text-times {font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; }
.text-arial {font-family: Arial, Helvetica, sans-serif; }

.text-gold {color: gold}

.text-hover {
  background-color: #336699;
  letter-spacing: 2px;  
  padding: 16px 32px;
}

.image {
  opacity: 1;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.wii {
  text-align: center;
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));"  
  border: 0px solid yellow;
}
.wiitext {
  background-color: #336699;
  color: yellow;
  font-family: 'Times New Roman', serif;
  font-weight:bold;
  letter-spacing: 1px;  
  padding: 10px 10px;
}
.wiimote{width:37.5px; height:150px;}
.nunchuk{width:56.25px; height:150px;}

.cover{
	width:90px;
	height: 135px;	
}

.wiicover img {
	width:90px;
	height: 135px;		
}

/* #top #right #bottom #left; */
article {
  position: relative;
  padding: 0px;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 00%);
  -ms-transform: translate(-50%, 00%);  
  height: 101%;
  vertical-align: top;
  background: #D0E4F5 url("/images/background.png");
  background-repeat: no-repeat;  
  background-position: 0% 0%; 
  background-size: 100% 100%; 
}

article:hover .image {
  opacity: 0.3;
}

article:hover .middle {
  opacity: 1;
}



.overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(1, 0, 0, 0.3);
  transition: opacity 500ms;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.zoom {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}
.zoom:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}
.disclaimer{
  text-align: center;	
  display: inline;
  color: white;
  line-height: 0;
  font-size: small;
  letter-spacing: 0.5px; 
  text-indent: 0em;
}

.book{
	width:100%;
	height:30em;
}

.book-text{
	margin-bottom: -13px;
}


.card-img-overlay {
	padding-right: 0px;
}

ul{ 
    list-style-type:none;
}

li{
    position:relative;
    margin-left: 40px;
    padding:0em 0.5em 0.6em 0.5em;
}
/* #top #right #bottom #left; */ 
ul li:before {
    content:'';
    padding:0px;
    position:absolute;
    left:-30px;
    margin-left: -45px;
    height: 65px;   
    width: 65px;    
    background-size: cover;   
    background-repeat: no-repeat;   
    background-position: center;   
}

ul li:hover::before {
	height: 95px;
	width: 95px;
	background-size: cover; 
	top:-15px;
	margin-left: -50px;
	z-index: 1000;
}

#all_nighter::before{
   background-image: url('/images/nanowrimo_badges/all_nighter.png');	
}
#art::before{
   background-image: url('/images/nanowrimo_badges/art.png');	
}
#author::before{
   background-image: url('/images/nanowrimo_badges/author.png');	
}
#connections::before{
   background-image: url('/images/nanowrimo_badges/Connections.png');	
}
#cowboy::before{
   background-image: url('/images/nanowrimo_badges/cowboy.png' );
}
#current_events::before{
   background-image: url('/images/nanowrimo_badges/current_events.png');	
}
#imposible::before{
   background-image: url('/images/nanowrimo_badges/imposible.png');	
}
#music::before{
   background-image: url('/images/nanowrimo_badges/music.png');	
}
#mythology::before{
   background-image: url('/images/nanowrimo_badges/mythology.png');	
}
#shakespeare::before{
   background-image: url('/images/nanowrimo_badges/shakespeare.png');	
}
#social_media::before{
   background-image: url('/images/nanowrimo_badges/social_media.png');	
}
#super_hero::before{
   background-image: url('/images/nanowrimo_badges/super_hero.png');	
}
#vampire::before{
   background-image: url('/images/nanowrimo_badges/vampire.png');	
}
#war::before{
   background-image: url('/images/nanowrimo_badges/war.png');	
}
#wdnnsb::before{
   background-image: url('/images/nanowrimo_badges/wdnnsb.png');	
}
#zombie::before{
   background-image: url('/images/nanowrimo_badges/zombie.png');	
}


/* resize elements for smaller screens  */
@media screen and (max-width: 888px) {
	.fsize16{font-size: 14px;	}
	.book{height:32em;}
}

@media screen and (max-width: 767.98px) {
	.fsize16{font-size: 10.5px;	}
	.fsize25{font-size: 20px;	}
	.fsize45{font-size: 25px;	}
	.wiimote{width:25px; height:100px;}
	.nunchuk{width:37.5px; height:100px;}
	.nanowrimo{width:100px; height:100px;}	
	.popup1{width:40%;}
	.popup2{width:40%;}
	.book{height:35em;}
	.dropdown-menu{margin-right: -20px;}
	ul {
		padding:0em;
	}
	li{
	    position:relative;
	    margin-left: 20px;
	/* #top #right #bottom #left; */ 
	    padding:0em 0.5em 0.6em 0.5em; 
	}
	ul li:before{
	    content:'';
	    padding:0px;
	    position:absolute;
	    left:-18px;
	    margin-left: -20px;
	    height: 37px;   
	    width: 37px;    
	    background-size: cover;   
	    background-repeat: no-repeat;   
	    background-position: center;   
	}
	
	ul li:hover::before {
		top:-15px;
		margin-left: -50px;
	}
	
}