/* silva.css */

/* Universal style rule */
*{
/* Block all browser default margins and padding */
margin:0;
padding:0;
}
/* border:dashed .0625em #f00; */



body {
margin: 0 auto;
background:#fff;
overflow:hidden;
}

#canvas {
	width:  45em;
	margin:  1em auto;
      overflow: hidden;
	padding: 1%;
	background: #fff;    
}

/* generic css for all elements */
img {
	display: block; /* needed to avoid alignment with baseline of text */
}

.line {
	float: left;
	width: 100%;
	display: block;
	position: relative; /* prevents shifting when changing viewport in IE;thanks to Alan Gresley */
}

.item {
	position: relative;
	float: left;
	overflow:hidden;
	left: 100%;
}

.sap-content {
	overflow: hidden;
}

/* item specific css */
#line1 {
	background-color: transparent;
      
}

#line2 {
	background-color: #fff;
      
}
#line3 {
	background-color: transparent;
      }

#line4 {
background-color: transparent;

}

#line5 {
background-color: transparent;

}

#item1 {
	margin-left: -100%;
	width: 100%;

	background-color: transparent;
}

#item2 {
	margin-left: -25em;
	margin-top: 1em;
      width:100%;
	background-color: transparent;
      
}

p.title {
      font-family: helvetica, arial, sans-serif;
      font-size: 3em;
      color: #000;
      font-weight: 600;
      text-align: left;
      
       
}

#item2a {
	margin-top: 2em;
      margin-left: -97%;
	width: 16%;
	background-color: #fff;
      padding:.5em;
}

#item2a p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #000;
font-weight: 700;
text-align: center;
padding:.25em;
}

#item2a h1 {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
color: #000;
font-weight: 300;
text-align: left;
padding:.25em;
}

#item2b {
	margin-top: .75em;
      margin-left: -71.7%;
	width: 15%;
	background-color: #fff;
      padding:.5em;
}

#item2b p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #000;
font-weight: 700;
text-align: center;
padding:.25em;
}

#item2b h1 {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
color: #000;
font-weight: 300;
text-align: left;
padding:.25em;
}

#item2c {
	margin-top: 1em;
      margin-left: -48.2%;
	width: 15%;
	background-color: #fff;
      padding:.5em;
}

#item2c p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #000;
font-weight: 700;
text-align: center;
padding:.25em;
}

#item2c h1 {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
color: #000;
font-weight: 300;
text-align: left;
padding:.25em;
}

#item2d {
	margin-top: 1.25em;
      margin-left: -24.2%;
	width: 15%;
	background-color: #fff;
      
}

#item2d p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #000;
font-weight: 700;
text-align: center;
padding:.25em;
}

#item2d h1 {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
color: #000;
font-weight: 300;
text-align: left;
padding:.25em;
}


#item2e{
	margin-left: -100%;
      margin-top: 2em;
	width: 30%;
	background-color: transparent;
      padding:.5em;
}

#item2e p {
font-family: helvetica, arial, sans-serif;
font-size: .75em;
color: #000;
font-style:italic;
font-weight: 300;
text-align: left;
padding:.25em;
}
#item2e h3 {
font-family: helvetica, arial, sans-serif;
font-size: 1em;
color: #000;
font-weight: 300;
text-align: left
padding:.25em;
line-height:.75em;
}

#item3a{
	margin-left: -100%;
      margin-top: -20em;
	width: 40%;
      color:#000;
	background-color: transparent;
      padding:.5em;
}

#item3a p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #fff;
font-weight: 300;
text-align: left;
padding:.25em;
}
#item3a h3 {
font-family: helvetica, arial, sans-serif;
font-size: 1em;
color: #000;
font-weight: 300;
text-align: left
padding:.25em;
line-height:.75em;
}

a.item:hover {color:#000;}
a.circle1:hover {color:#fff;}

#dreamhunters {
	margin-left: -100%;
      margin-top: -1.1em;
	width: 48%;
	background-color: transparent;
      padding: 1em;
      padding-top:2em;
}

#dreamhunters p {
      font-family: helvetica, arial, sans-serif;
      font-size: 1.5em;
      color: #000;
      font-weight: 300;
      
      line-height:1.75em;
}

#dreamhunters h1 {
	font-family: helvetica, arial, sans-serif;
      font-size: 2em;
      color: #000;
      font-weight: 300;
      
}

#dhbanner {
	margin-left: -98.5%;
      margin-top: 8em;
	width: 58.5%;
	background-color: transparent;
      z-index:1;
}

#knightsbanner {
	margin-left: -98.5%;
      margin-top: 24em;
	width: 58.5%;
	background-color: transparent;
      z-index:1;
}

#herotown {
margin-left:-45%;
margin-top:47.5em;
width: 45%;
background-color: transparent;
}

#herotown p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #000;
font-weight: 300;

line-height:1.75em;
}

#herotown h1 {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
color: #000;
font-weight: 300;

}

#herotownbanner {
	margin-left: -22%;
      margin-top:35em;
	width: 22%;
	background-color: transparent;
      
}

#circle1 {
	margin-left: -97.9%;
      margin-top: .5em;
	width: 20%;
      color:#fff;
      position:relative;
      text-decoration:none;
}

#cicle1 p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #fff;
font-weight: 300;
text-align: left;
}

#circle1 a img {border:none;}
#circle1 a link {text-decoration: none; color:#fff;}
#circle1 a visited {text-decoration: none; color:#fff;}
#circle1 a hover {text-decoration: none; color:#fff;}
#circle1 a active {text-decoration: none; color:#fff;}

#circle1 a span {display: none;}
#circle1 a:hover span {
font-family: helvetica, arial, sans-serif;
color:#000;
display: block;
position:fixed;
width:65%;
margin-top: 2%;
margin-left: 2%;
text-decoration:none;
background:#fff;
z-index:999;
}

#circle2 {
	margin-left: -73.5%;
      margin-top: .5em;
	width: 20%;
      color:#fff;
      position:relative;
      text-decoration:none;
}

#cicle2 p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #fff;
font-weight: 300;
text-align: left;
}

#circle2 a img {border:none;}
#circle2 a link {text-decoration: none; color:#fff;}
#circle2 a visited {text-decoration: none; color:#fff;}
#circle2 a hover {text-decoration: none; color:#fff;}
#circle2 a active {text-decoration: none; color:#fff;}

#circle2 a span {display: none;}
#circle2 a:hover span {
font-family: helvetica, arial, sans-serif;
color:#000;
display: block;
position:fixed;
width:65%;
margin-top: 2%;
margin-left: -15%;
text-decoration:none;
background:#fff;
z-index:999;
}
   
#circle3 {
	margin-left: -50%;
      margin-top: .5em;
	width: 20%;
      color:#fff;
      position:relative;
      text-decoration:none;
}

#cicle3 p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #fff;
font-weight: 300;
text-align: left;
}

#circle3 a img {border:none;}
#circle3 a link {text-decoration: none; color:#fff;}
#circle3 a visited {text-decoration: none; color:#fff;}
#circle3 a hover {text-decoration: none; color:#fff;}
#circle3 a active {text-decoration: none; color:#fff;}

#circle3 a span {display: none;}
#circle3 a:hover span {
font-family: helvetica, arial, sans-serif;
color:#000;
display: block;
position:fixed;
width:65%;
margin-top: 2%;
margin-left: -32%;
text-decoration:none;
background:#fff;
z-index:999;
}
   
#circle4 {
	margin-left: -27%;
      margin-top: .5em;
	width: 20%;
      color:#fff;
      position:relative;
      text-decoration:none;
}

#cicle4 p {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
color: #fff;
font-weight: 300;
text-align: left;
}

#circle4 a img {border:none;}
#circle4 a link {text-decoration: none; color:#fff;}
#circle4 a visited {text-decoration: none; color:#fff;}
#circle4 a hover {text-decoration: none; color:#fff;}
#circle4 a active {text-decoration: none; color:#fff;}

#circle4 a span {display: none;}
#circle4 a:hover span {
font-family: helvetica, arial, sans-serif;
color:#000;
display: block;
position:fixed;
width:65%;
margin-top: 2%;
margin-left: -48%;
text-decoration:none;
background:#fff;
z-index:999;
}

#item4c p {
      font-family: georgia, palatino, aerif;
      font-size:2em;
      font-style:italic;
      
      color: #000;
      font-weight: 300;
      text-align: left;
}


#item6a {
	margin-left: -42%;
      margin-top:18.5em;
	width: 40%;
      z-index:99;
      padding:.5em;
	background-color: transparent;
}

#item6a p {
      font-family: georgia, palatino, aerif;
      font-style: italic;
      font-size: 1.6em;
      color: #fff;
      font-weight: 300;
      text-align: left;
}

#navbar {
	margin-left: -18.3%;
      margin-top:1.5em;
	width: 15%;
	
	background-color: transparent;
}

/* Remove bullets from ul in the navbar */
#navbar ul{
  list-style-type:none;
}

/* Make the navbar list horizontal */
#navbar li{
  float:left;
}

/* Applies to navbar links, unvisited and visited - use % for fonts in navbar to avoid problems with size changes */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family:georgia, palatino, aerif;;
  font-size:1.5em;
  color:#000;
  display:block;
  height:1.5em;
  width:7em;
  text-align:center;
  line-height:1.7em;
  
}

/* Navbar hover, active, and current page links */
#navbar a:hover{
background:#575dfb;
color:#fff;
}
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
  background:#020790 url(images/navhover.jpg) repeat-x center;
  color:#fff;
}

/* END NAVBAR STYLING */


#item4 {
	margin-left: -40%;
	width: 15%;

	background-color: #ACA42E;
}

#item5 {
	margin-left: -20%;
	width: 15%;

	background-color: #9F3B57;
}

#item6 {
	margin-left: -42%;
      margin-top: 18em;
	width: 40%;
      z-index:99;
       
	background-color: transparent;
}

#authorpic {
	margin-left: -42%;
	width: 40%;
      z-index:2;
      
	background-color: #ACA42E;
}

#item8 {
	margin-left: -40%;
	width: 35%;

	background-color: #9F3B57;
}

.rollover a {
display:block;
width: 100%
font: bold 3em sans-serif;;
color:#fff;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -70px;
color: #000;
}
.rollover a:active {
background-position: 0 -70px;
color:#000;
}