body {
	background: url(http://theironbible.com/Random/Layout/backgroundtile.png);
	}
	
#everything {
	width: 1014px;
	margin-top: -8px;
	}
                                                                                           
#banner {
	background: url(http://theironbible.com/Random/Layout/BannerU.png) no-repeat;
	width: 923px;
	height: 124px;
	padding: 209px 50px 0px 0px;
	}

#topNav {
	text-align: right;
	}

#topNav img {           
	display: inline-block;
	padding: 0px 16px 0px;
	border: none;
	}
  
#topNav img:hover { 
  opacity: 0.8;
}

#navBar {    
	float: left;
	width: 183px;
	min-height: 567px;
	margin: -2px 0px 0px 42px;
	}

#barSmall {    
	position: relative;
	bottom: 30px;
	left: -10px;
	}

#navMain { 
	background: url(http://theironbible.com/Random/Layout/NavigationTile.png) repeat-y;
	width: 123px;
	
	padding: 3px 30px 0px 30px;
	}

#navMain a {
    
	display: block;
	text-align: left;
	font: 10pt Comic Sans MS, Arial, Verdana;
	width: 118px;
	height: 22px;
	padding: 5px 0px 0px 9px;
	color: #00eaff;
	text-shadow: 0px 0px 8px #0062ff, 0px 0px 13px #0062ff, 0px 0px 20px #0026d1;
	text-decoration: none;
	margin-bottom: 2px;
	}
  
  
  
  
#navMain2 {   
	background: url(http://theironbible.com/Random/Layout/NavigationTile.png) repeat-y;
	width: 123px;
	
	padding: 3px 30px 0px 30px;
	}  

#navMain2 a {   
	display: block;
	text-align: left;
	font: 10pt Comic Sans MS, Arial, Verdana;
	width: 118px;
	height: 22px;
	padding: 5px 0px 0px 9px;
	color: 666666;
	text-decoration: none;
	margin-bottom: 2px;
	}  
  
  
  
  

#navMain a:hover {
	background: url(http://theironbible.com/Random/Layout/NavigationRollover.png) no-repeat center;
	}

#contentBars {
	float: right;
	width: 789px;
	height: 142px;
	margin-top: -25px;
	}

#barTop {
	position: inherit;
	top: 0px;
	left: 0px;
	}

#barBottom {
	position: inherit;
	bottom: 0px;
	left: 0px;
	margin-bottom: 20px;
	}

#contentMain {
	background: url(http://theironbible.com/Random/Layout/ContentBody.png) repeat-y;
	width: 718px;
	margin: -37px 0px -25px;
	padding: 1px 30px 15px;
	text-align: left;
	font: 10pt Comic Sans MS, Arial, Verdana;  
	color: #555;
	}

#contentMain img {
	border: 1px solid #b8b8b8;
	margin: 0px 9px;
	}
  
  
#lore img {
	border: 1px solid #b8b8b8;
	}
  
  
  
img.transparent {
  opacity: 0.4;
}
img.transparent:hover {
  opacity: 1; // no point in going higher than 1 here
}



img.transparent2 {
  opacity: 0.2;
}
img.transparent2:hover {
  opacity: 1; // no point in going higher than 1 here
}


img.transparent3 {
  opacity: 0.7;
}
img.transparent3:hover {
  opacity: 1; // no point in going higher than 1 here
}

img.transparent4 {
  opacity: 1;
}
img.transparent4:hover {
  opacity: 0.9; // no point in going higher than 1 here
}
  
  
  
  
img.vari {
  opacity: 1;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  background-color: #fff;
}
img.vari:hover {
  opacity: 0.9; // no point in going higher than 1 here
}  

  



img.transparent3 {
  opacity: 0.7;
}
img.transparent3:hover {
  opacity: 1; // no point in going higher than 1 here
}


img.colors {
  background-color: #ccc;
  border: none!important;
  border-radius: 10px;
  max-width: 205px;
  padding: 5px;
  }
  
img.colors:hover {
  opacity: 0.9; // no point in going higher than 1 here
}  
  
  

/* Rounded thumbs used for anime weapon lists   */
img.rad {
  border-radius: 15px;
}

img.rad:hover {
  opacity: 0.9;

}        


  

.gallery {
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px;
    line-height: 400%;
    display: in-block;
    }
    
.gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    }
    
.gallery img:hover {
  opacity: 0.7;
}



.galleryg { 
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px;

    display: in-block;
    margin-top:-14px;
    }
    
.galleryg img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    }
    
.galleryg img:hover {
  opacity: 0.7;
}



    
.page img {
  background-color: #aaa;
  padding: 5px;
  border-radius: 5px;  
}    

.page img:hover {
  opacity: 0.7;
}


.ss {
  background-color: #ababab;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  width: 726px;
  margin-left: -9px;
  margin-top: -5px;
  margin-bottom: -12px;
}

.ss img {
  border-radius: 10px;
  border: none;
  }
  
.ss img:hover {
  opacity: 0.9;
}

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.faded {
    color: #888888;
    font-style: italic;
}
.fader {
    color: #bbbbbb;
    font-style: italic;
}


@font-face {
    font-family: 'PhoTai';
    src: url('/ZoidBooks/ZoidsGenerations/PhoTai.ttf');  
    
    font-family: 'NightmarePills';
    src: url('/ZoidBooks/ZoidsGenerations/NightmarePills.ttf');  
}


a.note {
  color: #a0a0a0;
  text-decoration: none;
}




h1 {
	background: url(http://theironbible.com/Random/Layout/Header1.png) no-repeat top left;
	width: 700px;
	height: 33px;
	margin-left: -9px;
	padding: 4px 0px 0px 40px;
	font: 15pt Comic Sans MS, Arial, Verdana;
	color: #fff; 
	}

h2 {
	height: 7px;
	width: 730px;
	margin: 0px 0px 0px -7px;
	background: url(http://theironbible.com/Random/Layout/Header2.png) no-repeat top left;
	}
  
h3 {
	background: url(http://theironbible.com/Random/Layout/Header3.png) no-repeat top left;
	width: 750px;
	height: 38px;
	margin-left: -22px;
  margin-top: 10px;
  margin-bottom: -20px;
	padding: 6px 0px 0px 40px;
  font-style: italic;
  font-family: Cambria, Georgia, serif;
    src:url(http://theironbible.com/georgia.ttf) format("Truetype");  
	font-size: 15pt; color: #70dcff;
  font-weight: lighter;
  text-align: auto;
  text-shadow: 0 0 5px #002fb5, 0 0 5px #002fb5, 0 0 5px #002fb5, 0 0 5px #002fb5;
  
  } 
  
h4 {
	background: url(http://theironbible.com/Random/Layout/Header4.png) no-repeat top left;
	width: 500px;
	height: 1px;
	margin-left: 15px;
	padding: 4px 0px 0px 20px;
	font: 1pt Comic Sans MS, Arial, Verdana;
	color: #fff;
	}  
  
h5 {
  background-image: url(http://theironbible.com/Random/Layout/Header5.png);
  background-position: left center;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 55px;
  font-weight: normal;
  font-family: Cambria, Georgia, serif;
  src: url("http://theironbible.com/georgia.ttf");
  font-style: italic;
  font-size: 15pt; color: #67ffd4;
  text-align: auto;
  text-shadow: 0 0 5px #005eff, 0 0 5px #005eff, 0 0 5px #005eff, 0 0 5px #005eff;
  margin: 8px -22px -15px   ;
}

h6 {
	background: url(http://theironbible.com/Random/Layout/Header6.png) no-repeat top left;
  background-position: left center;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 55px;
  font-weight: normal;
  font-family: Cambria, Georgia, serif;
  src: url("http://theironbible.com/georgia.ttf");
  font-style: italic;
  font-size: 15pt; color: #67ffd4;
  text-align: auto;
  text-shadow: 0 0 5px #005eff, 0 0 5px #005eff, 0 0 5px #005eff, 0 0 5px #005eff;
  margin: 8px -22px -15px   ;
	}  
  





.grad {
  background-image: linear-gradient(rgba(0,0,0,0.7), gray);
  width: 737px;
  margin-left: -9px;
  margin-top: 13px;
  padding: 0px 0px 10px 0px;    
    
}

.date {
    background-color: gray;
    border-radius: 10px;
    height: 20px;
    padding: 0px 0px 10px 0px;
}



.fade {
   opacity: 1;
   transition: opacity .10s ease-in-out;
   -moz-transition: opacity .10s ease-in-out;
   -webkit-transition: opacity .10s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }





img.navi{
    cursor: pointer;
    /*padding: 10px;*/
   /* border:1px solid #fff;*/
}

img.navi:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 145, 255, 1);
-moz-box-shadow:    0px 0px 10px 0px rgba(0, 145, 255, 1);
box-shadow:         0px 0px 10px 0px rgba(0, 145, 255, 1);
}
img.navi:last-of-type:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 145, 255, 1);
-moz-box-shadow:    0px 0px 10px 0px rgba(0, 145, 255, 1);
box-shadow:         0px 0px 10px 0px rgba(0, 145, 255, 1);
}










    /* Images*/

img.new {
  box-shadow: 0px 0px 10px #38c612;
}

.graphic {
  border: none !important;
  margin-left: -9px !important;
  margin-top: 14px !important;
  border-bottom: 1px;
  box-shadow: 0 0 10px 0px rgba(0,0,0,0.75);
  clip-path: inset(0px 0px -10px 0px);         /*0px 1px 3px #777777;  */
  max-width: 736px;
}

.snug {
    margin-top: -7px;
}

.graphic2 {
  border: none !important;
  margin-left: -9px !important;
  margin-top: 12px !important;
  border-bottom: 1px;
  box-shadow: 0 0 10px 0px rgba(0,0,0,0.75);
  clip-path: inset(0px 0px -10px 0px);         /*0px 1px 3px #777777;  */
  max-width: 736px;
}

.graphic3 {
  border: none !important;
  margin-left: -9px !important;
  margin-top: 12px !important;
  border-bottom: 1px;
  box-shadow: 0 0 10px 0px rgba(0,0,0,0.75);
  clip-path: inset(0px 0px -10px 0px);         /*0px 1px 3px #777777;  */
}

.index {
  border: none !important;
  border-radius: 15px;
  text-align: center;
}



  
    /* Buttons*/  
  
.linkButton {
 border-radius: 5px; #000000; border: 2px solid #aaaaaa;
 background-color: #ffffff;
 color: #555555;
 font-weight: bold;
 font-size: 9pt;
 padding:8px 
  }     

.linkButton:hover {
 background-color: #929292;
 color: #ffffff;
  }         

.linkDic, .Button {
 border-radius: 3px; #000000; border: 1px solid #aaaaaa;
 background-color: #ffffff;
 color: #7a7a7a;
 font-weight: bold;
 font-family: Verdana;
 font-size: 7pt;
 padding:5px; 
 display: inline-block;
  }
  
.linkDic:hover {
 background-color: #a4a4a4;
 color: #ffffff;
  }   

    /* Tag*/

.linkTag {
 border-radius: 3px; #000000; border: 1px solid #aaaaaa;
 background-color: #e3e3e3;
 color: #7a7a7a;
 font-weight: bold;
 font-family: Verdana;
 font-size: 7pt;
 padding:5px
 
}
.linkTag:hover {
 background-color: #a4a4a4;
 color: #e3e3e3;
}   
  
    /* Links Wild*/
    
.linkWild {
 border-radius: 5px; #000000; border: 1px solid #57ceff;
 background-color: #123864;
 color: #57ceff;
 font-weight: bold;
 font-family: Verdana;
 font-size: 10pt;
 padding:10px
  }
  
.linkWild:hover {
 background-color: #1b5393;
 color: #ffffff;
  }
  
  /* Links */
  
a {
  color: #444444; 
  }
  

a:hover {
    color: #000000;
}  


a2 {
  color: 777777; 
  text-decoration: none;
  }
  
  
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
    
  /* Stats Table */

.stattable th, .stattable td {
  border: 1px;
  border-style: solid;

  padding: 5px;    
  text-align: center;
}
  
.stattable {
  box-shadow: 1px 1px 3px 1px #6a6a6a;
  border-radius: 5px;
  border-collapse: collapse;
  background-color: #c4c4c4;
}

.stattable th {
  background-image: url("/Random/Layout/th.png");
  border-color: #444444;  
  color: #d6f4ff;
  font-size: 12pt;
  font-family: Arial;

  /*letter-spacing: 1px;*/
}
  
.stattable td {
  background-color: #e9e9e9;     
  border-color: #878787;
}





  
    /* Official Fan Book Info Tables and Sets*/

.infotable {
  border: 0px;
  margin: 5px;
  padding: 5px;
  padding-top: 15px;
  border-radius: 10px;
  background-color: #c9c9c9;
  width: 330px;
  color: #666666;
  font-size: 7.8pt;
  font-weight: bold; 
  text-align: center;
  valign: top;
  
}  

.infotable img{
    border-radius: 5px;
}
  
.logtable {
  border: 0px;
  margin: 5px;
  background-color: #f7f7f7;
  width: 85%;
  margin-left: 50px;
}
  
.logtable td {
  border: 2px;
  border-style: solid;
  border-color: #a9a9a9;
  padding: 5px;  
}


    /*Lightbox Settings*/
    
#lb {
  position: fixed;
  z-index: 1000%;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  display: none;
}

#lb.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lb img {
  max-width: 95vw;
  max-height: 95vh;
  padding: 2px;
  background-color: #111;    

}  

#nolb img {
  

}  


  /* Concept Art Table */
.concept {
  border: 0px;
  margin: 5px;
  padding: 5px;
  border-radius: 10px;
  background-color: #c9c9c9;
  color: #666666;
  font-size: 7.5pt;
  font-weight: bold; 
  text-align: center;
} 

/* For stat tables and catalogs */
.gray {
  padding: 10px;
  background-color: #919191;
  border-radius: 15px;

}

.gray img {
  max-width: 195px;
}
/* Gray for Books Page*/
.book {
  padding: 5px;
  background-color: #333;
  border-radius: 15px;

}

/* model list */

.infoname {
  background-color: #d1d1d1;
  padding: 10px;
  border-radius: 15px;
  text-align: center;
  }

.modlist  {
  display: grid;
  grid-template-areas:
    "content banner";    
  grid-template-columns: 1fr 1fr;
  color: #8a8a8a;
  font-family: Verdana;
  font-size: 12pt;
  font-weight: strong; 
  background-color: #222;
  border: 2px solid #ccc;
  border-radius: 20px;  
  padding: 3px;  
  margin-bottom:1px;
  }                
  
.modlist > div.content {
  display: flex;
  align-items: center;
  justify-items: end;
  text-align: right;
  margin-bottom: 2px;
  }
  
.modlist > div.content {
  display: flex;
  align-items: center;
  justify-items: start;
  text-align: right;
  margin-bottom: 2px;
  }
  
.modlist > div.content img {
  border-radius:10px;
  border:none!important;
  box-shadow: 0px 0px 5px #000;
}             

.modlist > div.content img:hover {
  opacity: 0.7; // no point in going higher than 1 here
}


/* ---------------*/

.modlist2  {
  display: grid;
  grid-template-areas:
    "content";    
  grid-template-columns: 1fr 1fr;
  column-gap:15px;
  color: #8a8a8a;
  font-family: Verdana;
  font-size: 10pt;
  font-weight: bold;

  width: 99%;
  }                
  
.modlist2 > div.content {
  text-align: center;
  margin: 5px;
  margin-bottom:10px;
  background-color: #fff;
  border-radius: 20px;  
  padding: 7px; 
  box-shadow: 0px 0px 5px #000;
  line-height: 1.5;
  height: 60px!important;
  }
  
.modlist2 > div.content img {
  border-radius:10px;
  border:none!important;
  box-shadow: 0px 0px 5px #000;
  width: 100%;
} 
    

.modlist2 > div.content:hover {
  opacity: 0.8; 
}



/* Model Individual testing  DOESN'T WORK CURRENTLY*/

.model {
  display: grid;
  grid-template-areas:
    "t1"
    "t2";
}

model > div {
  padding: 10px;
  width: 137px;
  text-align: center;
}

model > div.t1 {
  background-color: #989898;

}

model > div.t2 {
  background-color: #cccccc;
  border: none;
  float: center;
  color: #626262;
  font-size: 15pt;
}


    /* Alphabetical Scroll Menu */
    
.names {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    background-color: #eeeeee;
    width: 697px;
    padding: 10px;
    box-shadow: 1px 1px 8px 1px #cccccc;
    border-radius: 4px;
    z-index: 1000;
}   
    

.logg {
  font: 12pt;
  font-weight: bold;
  }    
    
    
    

.quote {
  background-color: #fefefe;
  border: 3px;
  border-style: solid;
  border-color: #888;
  box-shadow: 5px 5px 5px #888;
  color: #666;
  border-radius: 15px;
  left: 33%;
  width: 600px;     
  padding: 15px;
}

    //Lines between list items
.line ul{
  list-style-type: none;
}
.line li{
  position: relative;
}
.line li:not(:last-child):after{
  content:"";
  display: block;
  margin: 3em 0;
  border-bottom: 1px solid #aaa;
  width: 630px;
}
    
    
    
.anime {
  text-align: center;
  vertical-align: top;
  color: #626262;
  font-size: 7pt;
}

.pilot {
  max-width: 400px;
  float: right;
  border: none;
  border-radius: 10px;
}


  
    /* Others*/

#footer {
	padding-bottom: 20px;
	color: #333;
	text-align: center;
	}

/* Tab Background */
.tab button {
  color: #00eaff;
	text-shadow: 0px 0px 8px #0062ff, 0px 0px 13px #0062ff, 0px 0px 20px #0026d1;
	text-decoration: none;
  background-image: linear-gradient(180deg, rgba(12,12,12,1), rgba(24,44,84,1));
  width: 736px;
  margin-left: -9px;
  margin-top: 14px;
  float: left;
}
  
/* Style the buttons inside the tab */
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 18px 18px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}