body {
   font-family:"HelveticaNeue-ultraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
   font-weight: 100;
background: -webkit-gradient(radial, center center, 0, center center, 300.5, from(#fff), to(#F9FCF5));
}
 A:link {
  text-decoration: none;
  color: #111;
  }
 A:visited {
  text-decoration: none;
  color: #333;
  }
 A:hover {
  text-decoration: none;
  color: #666;
  }
a:hover, a:active, a:focus {
  text-decoration: none;
  color: #666;
}
a {
   outline: 0;
}
a img {
border: none; 
}
p {
   font-family:"HelveticaNeue-ultraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
   font-weight: 100;
   font-color: #000;
}
 #outer_container{
background:transparent;
margin:0px 0px;
width:100%;
height:100%;
 }

 #inner_container{
margin:auto auto;
width:1000px;
height:1000px;
   border: 1px solid #F9FCF5;
 }
	#top_bg {
	position: fixed;
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
    background:transparent;
    margin:-10px;
    z-index: 90;
    width: 100%;
    height: 20px;
	border-bottom: 5px solid transparent;
		}
#left_mask {
	   position: fixed;
       z-index: 99;
bottom:0;
left:0;
height:100%;
width:23%;
  background-color: transparent;
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}
#rings_container{
	 position: fixed;
     z-index: 49;
	background-image: url(../images/rings_bg.png);
	background-repeat: no-repeat;
	width:300px;
	height:1000px;
    overflow:hidden;
 }
	#logo {
		position: fixed;
       margin: 0px 0px;
       padding: 0px;
	   width: 200px;
	   height: 1000px;
       z-index:100;
       overflow:hidden;
   border: 0px solid #111;
  background-color: transparent;
		}

.box_nav{
	   position: relative;
       z-index: 100;
height:600px;
width:650px;
  background-color: transparent;

                }

/*.box_nav:hover {
height:600px;
width:650px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(#111));
background: -moz-linear-gradient(#000, #111);
background: linear-gradient(#000, #111);
-pie-background: linear-gradient(#000, #111);
	filter:alpha(opacity=45);
	-moz-opacity: 0.45;
	opacity: 0.45;

                }*/

	#menu {
	  position: fixed;
      z-index:200;
      margin: 250px 10px 10px 30px;
	  padding: .2em;
}
 .menu  { 
  font-weight: 100;
  text-decoration: none;
  font-size: 1.2em;
}
 .menu li{ 
  text-decoration: none;
list-style: none;
text-indent:-20px;
word-spacing:10px;
}
.menu li:before { content: "• " }

 .menu li:hover{ 
  text-decoration: none;
list-style: none;
    -webkit-transition: all 0.4s linear; 
    -moz-transition: all 0.4s linear; 
    -o-transition: all 0.4s linear; 

  }
li.on_page {
list-style: none;
text-indent:-20px;
word-spacing:10px;
font-color: #000;
}
li.on_page:before { content: "|  " }


#right{ 
	   position: relative;
       z-index: 50;
       overflow:hidden;
  margin: 150px 240px;
   width: 900px;
   height:800px;
  }
.box  {
    background-repeat: no-repeat;
    float:left; 
    overflow:hidden;
    margin:0px;
    padding:0px;
    text-align: center;
    width:80px;
    height:200px;
border: 1px solid #666;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #999 0px 5px 20px;
-moz-box-shadow: #999 0px 5px 20px;
box-shadow: #999 0px 5px 20px;
background: #eee;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ddd));
background: -moz-linear-gradient(#fff, #ddd);
background: linear-gradient(#fff, #ddd);
-pie-background: linear-gradient(#fff, #ddd);
behavior: url(/PIE.htc);
  }

  #note_1{
  left:2;

  }

  #note_2 {
left:25;

  }
  #note_3 {
left:130;

  }
  #note_4 {
left:155;

  }
  #note_5 {
left:180;

  }
  #note_6 {
left:205;

  }
  #note_7 {
left:230;

  }
  #note_8 {
left:230;

  }
#controls {
margin: 5px 5px 5px 170px;
width:40px;
border:0px solid #111;
}
.next {
position:absolute;
text-align:right; 
}
.notes {
	position: absolute;
	z-index: 300;
	top:100;
	left:100;
	width: 500px;
	height:400px;
	background-color:#ddd;
    font-size: 1.5em;
    font-weight: 700;
    color: #111;
	filter:alpha(opacity85);
	-moz-opacity: 0.85;
	opacity: 0.85;
border: 2px solid #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 6px 30px;
-moz-box-shadow: #666 0px 6px 30px;
box-shadow: #666 0px 6px 30px;

}
.notes_bg {
	position: absolute;
	z-index:99;
	top:1;
	left:1;
	width: 650px;
	height:649px;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
background: #333333;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#333333));
background: -moz-linear-gradient(#fff, #333333);
background: linear-gradient(#fff, #333333);
-pie-background: linear-gradient(#fff, #333333);

}