body {
	font-family: "arial","lucida bright","gills sans","Arial", sans-serif;
	font-size:small;
	margin:0px;
	color:#FFFFFF;
	background: url(../images/joshwithballs_cornered_trans.png) bottom right no-repeat #000000;
	background-attachment:fixed;
}

#topquote {
	color:#FF6600;
	font-size: small;
	font-family:"Papyrus";
	/*font-style:italic;*/
	margin-right:0px;
	text-align:right;
	position:absolute;
}
#header{
	width:100%;
	height:102px;
	position:fixed;
	left:0px;
	top:0px;
	background-color:#000000;
	z-index:2;
	margin:0px;
	padding:0px;
}
#line{
	position: absolute;
	top:55px;
	left:0px;
	height:4px; /* ie can't figure out that it's 4px, so I turn no-repeat on...*/
	width:150%;
	background: url(../images/whiteline.png) no-repeat;
	margin:0px;
	padding:0px;
	z-index:4;
}
html>body #line {
	z-index:0;
}
#logo{
	position: absolute;
	width:460px;
	height:102px;
	left:10%;
	top:0px;
	size:1%;
	background: url(../images/deep-magic_logo.png) no-repeat;
	text-indent:-9999px;
	z-index:2;
	margin:0;
	padding:0;
}
html>body #logo {
	background: url(../images/deep-magic_logo_trans.png) no-repeat;
}
#nav{
	text-indent:-9999px;
	size:1%; 
	z-index:3;
	/*margin-left:200px;*/
	top:30px;
	right:0px;
	height:24px;
	width:521px;
	/*padding-left: 500px;*/
	position:absolute;
	margin:0px;
	padding:0px;
	list-style-type:none;
	list-style-image:none;
	/*overflow:hidden; /* this is b/c IE is stupid */
}
#nav ul {

}
#nav li a {
	position:absolute;
	height:24px;
	top:0;
}

#nav_themagic a {
	width:69px;
	left: 0;
	background: url(../images/themagic.gif) no-repeat left top;
}
#nav_themagician a {
	width:92px;
	left:69px;
	background: url(../images/themagician.gif) no-repeat left top;
}
#nav_appearances a {
	width:89px;
	left:161px;
	background: url(../images/appearances.gif) no-repeat left top;
}
#nav_video a {
	width:48px;
	left:250px;
	background: url(../images/video.gif) no-repeat left top;
}
#nav_testimonials a {
	width:89px;
	left:298px;
	background: url(../images/testimonials.gif) no-repeat left top;
}
#nav_press a {
	width:48px;
	left:387px;
	background: url(../images/press.gif) no-repeat left top;
}
#nav_contact a {
	width:86px;
	left:435px;
	background: url(../images/contact.gif) no-repeat left top;
}
#nav a:hover{	background-position: 0px -24px;}

#themagic #nav_themagic a{	background-position: 0px -48px;}
#themagician #nav_themagician a{	background-position: 0px -48px;}
#appearances #nav_appearances a{	background-position: 0px -48px;}
#video #nav_video a{	background-position: 0px -48px;}
#testimonials #nav_testimonials a{	background-position: 0px -48px;}
#press #nav_press a{	background-position: 0px -48px;}
#contact #nav_contact a{	background-position: 0px -48px;}
/*==== NAV 2 ====*/
#nav2{
	z-index:3;
	/*margin-left:200px;*/
	top:40px;
	right:0px;
	height:20px;
	width:521px;
	/*padding-left: 500px;*/
	position:absolute;
	margin:0px;
	padding:0px;
	list-style-type:none;
	list-style-image:none;
	/*overflow:hidden; /* this is b/c IE is stupid */

}
#nav2 ul {	display:inline;}
#nav2 li.last {	
	border-right:none;
}
#nav2 li {	
	display:inline;	
	padding-right:6px; /* this is the spacing to the right or left of the text before the seperator bar */
	padding-left:3px;
	font-size:14px;  /* this controls the size of the font */
	font-family: "arial","lucida bright","gills sans","Arial", sans-serif; /* this controls the fonts that will be displayed, in order.  So if the first listed isn't available, it goes to the next... */
	border-right:1px white solid; /* this is the seperator bar */
}
#nav2 li.last {	
	border-right:none;
}
#nav2 li a {
	/*position:absolute;*/
	top:0;
	color:#C60; /* This is the base color of the menu, all links except the one you're on */
	text-decoration:none;
	display:inline;
}

#nav2_themagic a {}
#nav2_themagician a {}
#nav2_appearances a {}
#nav2_video a {}
#nav2_testimonials a {}
#nav2_press a {}
#nav2_contact a {}
#nav2 a:hover{
	color: #06F;	/* This is the color it turns when you hover your mouse over it but don't click */
	text-decoration:none; /* This turns off underlining on hover */
}

/* This section says, when the nav button matches the page you're on, change the color to what's listed here - this is the page you're on locator. */
#themagic #nav2_themagic a{	color:white;}
#themagician #nav2_themagician a{	color:white;}
#appearances #nav2_appearances a{	color:white;}
#video #nav2_video a{	color:white;}
#testimonials #nav2_testimonials a{	color:white;}
#press #nav2_press a{	color:white;}
#contact #nav2_contact a{	color:white;}

/* ============ */

#content{
	position: absolute;
	max-width:600px;
	left:20%;
	width:60%;
	top: 140px;
	/*background-color:#000000;
	opacity:.9;*/
	z-index:1;
}
#content a:link{
	color:#6666ff;
	font-weight:bold;
	text-decoration:none;
}
#content a:visited{
	color: #0099FF;
	font-weight:bold;
	text-decoration:none;
}

#content p {
	line-height:1.2em;
}
.noborder{
	border:none;
	border-width:0px;
}
#content img{
	border-width: 1px;
	border-color: #FFFFFF;
	border-style: dotted;
	padding:3px;
	margin:7px;
}
#movie{
	text-align:center;
	z-index:3;
}

#contacttext {
	position:relative;
	bottom:0px;
	width:100%;
	margin-top:70px;
	text-align:center;
	vertical-align:bottom;
	color: #FFFFCC;
	font-size:medium;
	font-family:"Papyrus","garamond";
	z-index:4;
	clear:both;
}
#contacttext a, #contacttext a:link, #contacttext a:visited {
	text-decoration: none;
	color: #990000;
}
.orange{
	color:orange;
}
.strongorange{
	color:orange;
	font-weight:bold;
}
.strong{
	font-weight:bold;
}
.purple{color:#333399;}
.strongpurple{color:#333399;font-weight:bold;}