html {overflow-y: scroll; height:100%;box-sizing: border-box;}

*, *:before, *:after {
  box-sizing: inherit;
}

* :focus { outline: 0; }

body {background-color: #c5c6c8;
margin:0 0 0 0;
font-family: Lato, Arial, sans-serif;
font-size: 16px;
font-style: normal;
line-height:22px;
color: #000000;
height:100%;
	}

A:link, A:visited {color: #8d0506; text-decoration: none;}
A:hover {color: #8d0506; text-decoration: underline;}

#content{
position:relative;
margin:auto;
width:100%;
max-width:1000px;
background-color:#ffffff;
background-image:url(../images/content-back.png);
background-position: top center;
background-repeat:repeat-x;
-webkit-box-shadow: 0px 0px 6px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 6px 10px rgba(0,0,0,0.2);
box-shadow: 0px 0px 6px 10px rgba(0,0,0,0.2);
overflow: auto;
}

#header{
position:absolute;
width:100%;
max-width:1000px;
padding:0;
margin:0;
}

#topnav{
width:100%;
max-width:1000px;
text-align:center;
position:absolute;
background-color:#000000;
height:40px;
}

#toplinks{
position:relative;
margin:auto;
}

#toplinks ul {
margin: 0;
padding: 0;
display:inline-block;
}

#toplinks li {
position:relative;
list-style:none;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #ffffff;
text-decoration: none;
width:185px;
padding:10px 0;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
cursor:pointer;
text-transform:uppercase;
text-align:center;
float:left;
margin:0;
}
#toplinks li:hover {
color:#000000;
background-color:#dddddd;
	}

#toplinks li.active{
color:#000000;
background-color:#ffffff;
cursor:auto;
}
}

#toplinks li.nonlink{
color:#ffffff;
background-color:#000000;
cursor:auto;
}

#toplinks li.nonlink:hover{
color:#ffffff;
background-color:#000000;
}

#toplinks li ul {
margin-top:8px;
z-index:999;
}

#toplinks li ul li{
border:none;
width:184px;
text-transform:none;
position:relative;
float:none;
}

#toplinks ul li ul {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
margin-top:42px;
background-color:#000000;
}

#toplinks ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}


#leftcolumn{
margin-top:48px;
position:relative;
float:left;
padding:30px 30px 20px 50px;
width:76%;
background-color:#ffffff;
}

#bookcover{
position:relative;
margin-bottom:8px;
margin-left:30px;
margin-right:20px;
margin-top:20px;
float:right;
}

#rightcolumn{
margin-top:20px;
float:right;
width:24%;
background-color:#e9e9ea;
padding:30px;
font-size: 14px;
line-height:20px;
}

h1 {
font-size: 24px;
font-style: normal;
font-weight: normal;
line-height: 24px;
color: #3F5E63;
text-transform:uppercase;
	}
	
h2{
font-size: 20px;
font-style: normal;
font-weight: bold;
line-height: 20px;
color: #000000;
	}

/* for 800px or less */
@media screen and (max-width: 800px) {

#bookcover{
float:none;
margin:auto;
margin:0;
margin-bottom:20px;
clear:both;
width:100%;
text-align:center;
}


#leftcolumn{
width:70%;
}

#rightcolumn{
width:30%;
}

}

/* for 640px or less */
@media screen and (max-width: 640px) {

#leftcolumn{
float:none;
margin:auto;
margin:0;
margin-top:60px;
width:100%;
clear:both;
padding:20px;
z-index:0;
}

#rightcolumn{
float:none;
margin:auto;
margin:0;
margin-top:20px;
width:100%;
clear:both;
padding:20px;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

#header{
height:200px;
margin:0;
}

#toplinks li {
width:100%;
background-color:#000000;
}

#toplinks ul {
width:100%;
}

#toplinks ul  li ul li{
width:100%;
}

#leftcolumn{
margin-top:200px;
}

#toplinks ul li ul {
display: block;
opacity: 1;
visibility: visible;
}
}