/* CSS FOR hardyboys.seriesbooks.net */

BODY {
	font-family:'Conv_times','Times New Roman','Serif'; 
	font-size:1.1em;
	text-align:justify;
	color: darkbrown;
	background:#000000 url('./Images/bg.png') repeat-y fixed center center;
	margin-top:0;
	padding:0;
	margin-left:auto;
	margin-right:auto;
}

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

@font-face {
	font-family: 'Conv_harlowsi';
	src: url('fonts/harlowsi.eot');
	src: local('?'), url('fonts/harlowsi.eot?#iefix') format('embedded-opentype'), url('fonts/harlowsi.woff') format('woff'), url('fonts/harlowsi.ttf') format('truetype'), url('fonts/harlowsi.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'Conv_times';
	src: url('fonts/times.eot');
	src: local('?'),url('fonts/times.eot?#iefix') format('embedded-opentype'),, url('fonts/times.woff') format('woff'), url('fonts/times.ttf') format('truetype'), url('fonts/times.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'Schoolbook';
	src: url('fonts/texgyreschola-regular.eot');
	src: local('?'),url('fonts/ttexgyreschola-regular.eot?#iefix') format('embedded-opentype'), url('fonts/texgyreschola-regular.woff') format('woff'), url('fonts/texgyreschola-regular.ttf') format('truetype'), url('fonts/texgyreschola-regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

#grad {
	height: 5px;
	background: -msie-radial-gradient(teal, black); /* IE */
	background: -webkit-radial-gradient(teal, black); /* Safari */
	background: -o-radial-gradient(teal, black); /* For Opera 11.1 to 12.0 */
	background: -moz-radial-gradient(teal, black); /* For Firefox 3.6 to 15 */
	background: radial-gradient(teal, black); /* Standard syntax (must be last) */
}


@keyframes fadeAndScale {
    from {
        opacity: 0;
        transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

A:Link {
	color:blue; 
	text-decoration:none;
	}
A:Visited {
	color:blue;
	text-decortation:none;
	}
A:Hover {
	color:navy;  
	text-decoration:underline;
	}
A:Active {
	color:red;
	text-decoration:underline;
	}

img {
	margin:5px;
}

H1 {
	text-align:center; 
	font-family:'Conv_harlowsi'; 
	color:rgb(131,66,66);
	font-style: normal; 
	font-weight: bold;
	font-size: 34pt;
	line-height:35pt;
	margin:0;
	padding:3px;
	text-shadow: 1px 1px 1px teal;
    animation-duration: 1.75s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(.71,.55,.62,1);
	}

H2 {
	text-align:center; 
	font-style: italic; 
	font-weight: bold; 
	font-size: 23pt;
	line-height:25pt; 
	letter-spacing:.05em; 
	margin:0px; 
	padding:0px;
	}

H3 {
	text-align:center; 
	font-style: italic; 
	font-weight: bold; 
	font-size: 16pt; 
	line-height:18pt; 
	letter-spacing:.05em; 
	margin:0px; 
	padding:0px; 
	}

H4 {
	text-align:center; 
	font-style: italic; 
	font-weight: bold; 
	font-size: 14pt;
	line-height:16pt; 
	letter-spacing:.05em; 
	margin:0px; 
	padding:0pc;
	}

th {
	text-align:center; 
	font-weight: bold;
	}

.b0 {
	text-align:left;
	font-weight:bold;
	}

.b1 {
	text-align:left;
	font:normal;
	}

.b2 {
	text-align:justify; 
	font:normal;
	}

.b3 {
	text-align:center; 
	font-weight:bold;
		}

.center {
	text-align:center;
	}

.indent {
	text-align:justify;
	font:normal;
	text-indent:1.3em;
	margin:2px; 
	padding:1px;
	}

.outer {
	border:3px solid rgb(146,70,8); 
	padding-top:0px; 
	padding-bottom:10px; 
	padding-left:1em; 
	padding-right:1em; 
	border-radius:15px; 
	width:1100px; 
	background-color:#FFEBCD;  
	box-shadow: 12px 12px 35px 10px rgb(176,100,38) inset; 
	margin-left:auto;
	margin-right:auto;
	}

.inner {
	border:1px solid rgb(196,120,58); 
	border-radius:15px; 
	padding:1px; 
	background-color:#C9998B;
	box-shadow: 4px 5px 3px rgb(146,70,8); 
	margin:2px; 
	margin-left:auto; 
	margin-right:auto;
	}

.pb {
	border:3px double rgb(196,120,58); 
	border-radius:15px; 
	padding:5px; 
	width:900px; 
	background-color:lightyellow; 
	box-shadow: 2px 2px 2px rgb(146,70,8); 
	margin-left:auto; 
	margin-right:auto;
	}

#table1 {
	border-radius:25px;
	}
	
#menu1 {
	text-align:center; 
	font-family:'Conv_harlowsi'; 
	color:rgb(131,66,66); 
	font-style: normal; 
	font-weight: bold; 	
	font-size: 34pt; 
	line-height:.9; 
	margin:0; 
	padding:0; 
	text-shadow: 1px 1px 1px teal;
    animation-duration: 1.75s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(.71,.55,.62,1.67);
	}

#menu2 {
	text-align:right; 
	font-family:'Conv_harlowsi'; 
	color:rgb(131,66,66); 
	font-style: normal; 
	font-weight: bold; 
	font-size: 21pt; 
	line-height:.8;
	margin:0;
	padding-bottom:0px; 
	padding-top:1px; 
	text-shadow: 1px 1px 1px teal;
    animation-duration: 1.5s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(.71,.55,.62,3);
	}


/* css menu code below */

#cssmenu {
  position: relative;
  height: 40px;
  width: 900px;
  border-radius: 0px;
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  height: 44px;
  width: 100%;
  z-index: 500;
}
#cssmenu > ul > li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: Conv_times;
  color:blue;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 20px;
  color: blue;
   -webkit-transition: color 0.75s ease-out;
  -moz-transition: color 0.75s ease-out;
  -ms-transition: color 0.75s ease-out;
  -o-transition: color 0.75s ease-out;
  transition: color 0.75s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: red;
text-decoration:underline;
}
#cssmenu li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .75s ease, top .75s ease;
  -moz-transition: opacity .75s ease, top .75s ease;
  -ms-transition: opacity .75s ease, top .75s ease;
  -o-transition: opacity .75s ease, top .75s ease;
  transition: opacity .75s ease, top .75s ease;
  z-index: 1000;
}
#cssmenu ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}
#cssmenu ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#cssmenu ul ul li a {
   width: 100px; 
  padding: 10px 20px;
  font-size: 16px;
  color: blue;
  background: #FFEBCD;
	border-radius:0px;
}
#cssmenu ul ul li:hover > a {
	background: -msie-radial-gradient(teal,#ffebcf); /* IE */
	background: -webkit-radial-gradient(teal,#ffebcd); /* Safari */
	background: -o-radial-gradient(teal,#febcd); /* For Opera 11.1 to 12.0 */
	background: -moz-radial-gradient(teal,#ffebcd); /* For Firefox 3.6 to 15 */
	background: radial-gradient(teal,#ffebcd); /* Standard syntax (must be last) */
	color:red;
	text-decoration:underline;
	border-radius: 0px;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
  border-bottom: 0;
}
.submenuArrow {
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #fff;
  position: absolute;
  top: -12px;
}
#cssmenu ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
  border-left-color: #fff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: auto;
  }
  #cssmenu ul {
    width: auto;
  }
  #cssmenu .submenuArrow,
  #cssmenu #indicatorContainer {
    display: none;
  }
  #cssmenu > ul {
    height: auto;
    display: block;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu li,
  #cssmenu > ul > li {
    display: none;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu ul > li:hover > ul,
  #cssmenu ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
  }
  #cssmenu ul .has-sub::after {
    display: none;
  }
  #cssmenu ul li a {
    padding: 12px 20px;
  }
  #cssmenu ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssmenu ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssmenu ul ul ul a {
    padding: 8px 50px;
  }
  #cssmenu ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssmenu ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssmenu ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssmenu > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #cssmenu #menu-button > a {
    padding: 14px 20px;
  }
  #cssmenu ul.open li,
  #cssmenu > ul.open > li {
    display: block;
  }
  #cssmenu > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    border-bottom: 2px solid #7a8189;
    right: 20px;
    top: 15px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    right: 20px;
    top: 25px;
  }
  #cssmenu ul.open #menu-button::after,
  #cssmenu ul.open #menu-button::before {
    border-color: #fff;
  }
}