html, body {
height: 100%;
min-width: 320px;
padding: 0px;
margin: 0px;
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: black}


/* links */
a:link {color: black;} /* unvisited link */
a:visited {color: darkslategray;} /* visited link */
a:hover {color: purple;} /* mouse over link */
a:active {color: firebrick;} /* selected link */

a.wht:link {color: whitesmoke;} /* unvisited link */
a.wht:visited {color: whitesmoke;} /* visited link */
a.wht:hover {color: gainsboro;} /* mouse over link */
a.wht:active {color:#thistle;} /* selected link */

a.sml:link {color: whitesmoke;} /* unvisited link */
a.sml:visited {color: whitesmoke;} /* visited link */
a.sml:hover {color: gainsboro;} /* mouse over link */
a.sml:active {color:#thistle;} /* selected link */

img { border: 0; }


/* all divs */

.container {
width: 97%;
max-width: 1400px;
margin: 0px;
margin: auto; 
padding: 0px;
}

@media only screen and (max-width: 999px)
{
    .container
    {
        width: 100%;
        padding: 0px 0;
    }
}




/* header */

.header {
width: 100%;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
background-color: white;

}


/* nav bar */

.nav {
width: 100%;
margin: 0px;
margin: auto; 
padding: 0px;
text-align: center;
background-color: black; /* For browsers that do not support gradients */
}



ul.topnav {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;}

ul.topnav li {float: left;}

ul.topnav li a { display: inline-block; line-height: 48px; vertical-align: middle; height: 48px; color:white;  text-align: center;  
padding: 10px 10px;  text-decoration: none;  
transition: 0.3s;  font-size: 14px;  font-weight: normal;  }

ul.topnav li a:hover {
background-color: black;

color: white;}


ul.topnav li.icon {display: none;}



@media screen and (max-width:1000px) 
{  ul.topnav li:not(:first-child) {display: none;}  

ul.topnav li.icon { float: right;  display: inline-block;  }}



@media screen and (max-width:1000px) 

{  ul.topnav.responsive {position: relative;}  

ul.topnav.responsive li.icon {    position: absolute;    right: 0;    top: 0;  }  

ul.topnav.responsive li {    float: none;    display: inline;  }  

ul.topnav.responsive li a {    display: block;    text-align: left;  }}


/* popup */

.box {  
  margin: 0 auto;
  background: white;
  padding: 5px;
  border: 2px solid white;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: white;
  border: 2px solid purple;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.button:hover {
  background: beige;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: white; 
  border: 4px solid purple;
  border-radius: 5px;
  width: 70%;
  font-family: Arial, Helvetica, sans-serif; 
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  font-size: 150%;
  color: purple;
  font-family: Arial, Helvetica, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: darkslategray;
}
.popup .close:hover {
  color: purple;
}   
.popup .content {
  max-height: 30%;
  overflow: auto;
}



/* popup */

/* invisible */


.inv {
width: 100%;
height: 16px;
margin: 0px;
margin: auto; 
padding: 0px;
}

@media only screen and (max-width: 999px)
{
    .inv
    {
        width: 100%;
        height: 0px;
    }
}


/* layout */

.main {
   width:100%;
   margin: 0px;
margin: auto; 
padding: 0px;
overflow: hidden;
}

.main1 {
   width:67%;
   float:left;
   
}

.main2 {
   width:1%;
   float:right;
   text-align: center;
   
}

.main3 {
   width:32%;
   float:right;
}


@media only screen and (max-width: 999px)
{
    .main1, .main3
    {
        display: block; 
        float: none; 
        width: 100%;
        padding: 0px 0;
        
    }

.main2
    {
        display: block; 
        float: none; 
        width: 100%;
        padding: 0px 0;
        height: 0px;
        
    }  
}


@media only screen and (min-width: 1150px)
{

.main1 {
   width:73%;
   float:left;
   
}

.main2 {
   width:0%;
   float:right;
   text-align: center;
   
}

.main3 {
   width:27%;
   float:right;}
}

.inner {
width: 100%;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
background-color: #ffffff;
}


.text {
width: 90%;
max-width: 800px;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
}





/* sidebar */

.col {
width: 100%;
max-width: 302px;
margin: 0px;
padding: 0px;
margin: auto;
float: right;
text-align: center;

}

@media only screen and (max-width: 999px)
{
    .col
    {
        width: 100%;
        max-width: none;
        border: 0px;
        background: white;
    }
}

.bans {
width: 100%;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
}
 

.books {
width: 100%;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
}

.books img{ margin: 5px;  border: 1px solid #ffffff;
} 

.ads {
width: 301px;
margin: 0px;
padding: 0px;
margin: auto;
text-align: center;
}


/* footer */

.footer {
width: 100%;
margin: 0px;
margin: auto; 
padding: 0px;
text-align: center;
background-color: black; 
}


/* headers */
 

h1
{font-family: Arial, Helvetica, sans-serif; 
color: black; 
text-align: center; 
font-size: 170%; 
font-weight: bold; 
padding: 2px; 
margin: 0px; 
line-height: 1.5em; 
}


h2 { font-family: Arial, Helvetica, sans-serif; color: black; text-align: center; font-size: 95%; font-weight: bold; margin: 0px; line-height: 1.7em; padding: 10px;}



p.titles {
font-family: Arial, Helvetica, sans-serif; 
font-weight: normal; 
font-size: 100%; 
padding: 2px; 
text-align: center; 
margin: 0px; 
color: #ffffff;
line-height: 3em;
background-color: darkgoldenrod; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(left, firebrick, purple); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, firebrick, purple); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, firebrick, purple); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, firebrick, purple); /* Standard syntax */  }



/* paragraphs */

p.one {font-family: Arial, Helvetica, sans-serif; color: black; text-align: left; font-size: 140%; font-weight: normal; margin: 0px; line-height: 1.5em;} 
p.one em {font-style: normal; color: firebrick; font-size: 100%; font-weight: bold;}

p.two {font-family: Arial, Helvetica, sans-serif; color: black; text-align: center; font-size: 100%; font-weight: normal; } 

p.four {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size:110%;  color: black; text-align: center;}
p.four em  {font-size: 70%; font-style: normal; font-weight: normal;}

p.five {font-family: Arial, Helvetica, sans-serif; color: black; text-align: center; font-size: 140%; font-weight: normal; margin: 0px; line-height: 1.5em;} 
p.one em {font-style: normal; color: firebrick; font-size: 100%; font-weight: bold;}

p.nine {font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; padding: 0px; font-size: 100%; margin: 0px; line-height: 1.7em; color: #000000;}
p.nine em {font-style: normal;  color: purple;}


p.ftr {font-family: Helvetica, Arial, sans-serif; font-weight: normal; text-align: center; padding: 10px; font-size: 85%; margin: 0px; 
color: whitesmoke; line-height: 1.5em;}