#outerWrapper 

{ margin: 5px auto 5px auto; 
width: 1500px; height: 1100px; 
border: 0px solid gold; 
padding: 10px; 
background-image: vertical-align: top;
background-repeat:no-repeat;
background-position: 05% 10%;
overflow-x: hidden;
overflow-y: hidden;
 } 





body {
  font-family: arial, serif;
  font-size: 12px;
  text-align: left;
text-decoration: none;
background-size: 1500px 1100px;
background-image: url("http://www.50smusicvideos.com/images/screen1.gif");
background-color: black;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: hidden;

}


a:link { 
	color: white;
text-decoration: none;
font-size: 12px;
	}
a:visited { 
	color: white;
text-decoration: none;
	}

a:active { 
	color: white;
text-decoration: none;
	}



a.pagelink:link	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }

a.pagelink:visited	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }

a.pagelink:active	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }

a.pagelink:hover	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }


a.pagelink2:link { color: white; font-family: 'Boogaloo', cursive; font-size: 26px;   text-shadow: 0px 0px 0px #aaa; font-weight: bold; text-decoration: none; }

a.pagelink2:visited	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }

a.pagelink2:active	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }

a.pagelink2:hover	{ color: white; font-family: 'Rocket', cursive; font-size: 26px; font-weight: bold; text-decoration: none; }


/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(/images/three_1black.gif);}
.preload2 {background: url(/images/three_1ablack.gif);}



#nav {padding:0; margin:0; list-style:none; height:48px; width: 1390px; background:black url(/images/three_0black.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(/images/three_0black.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(/images/three_0black.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(/images/three_0ablack.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#DF63FF; background: url(/images/three_1black.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(/images/three_1black.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(/images/three_1ablack.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; top:0px; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:0px; background: black; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#DF63FF; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:black url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:black; color:#DF63FF; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:black url(arrow_over.gif) 80px 6px no-repeat; color:#DF63FF;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: black; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:black url(arrow_over.gif) 80px 6px no-repeat; color:#DF63FF; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:black url(arrow.gif) 80px 6px no-repeat; color:#DF63FF; border-color:#bbd37e;} 





#p-select {
    height: 200px;
	width: 150px;
	background-color: black;
    float: left;
    overflow: scroll;
    
}




#splash {
  position: absolute;
  display: none;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
}




.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 765px;
height: 617px; /* Set height to be able to contain height of largest content shown*/
border: 0px solid #687C98;
margin-left: -5px;
margin-right: auto;
overflow: hidden;
}
/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapper div itself plus any left and right CSS border and padding
	Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
padding: 10px;
visibility: hidden;
width: 332px;
}
/*
 Total glidecontent width: 332px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 500px; height: 125px;
margin-top: 6px;
text-align: left; /*How to align pagination links: "left", "center", or "right"
background: black; /*always declare an explicit background color for fade effect to properly render in IE*/
}
/*
 Total contenttoggler width: 490px+5px+5px=500px
	Or total width of wrapper div (counting wrapper border/padding)
*/

.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 0px solid red;
color: white;
padding: 5px 3px;
margin-right: 3px;
font-weight: bold;
text-decoration: none;

}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: black;
color: red;
}

.glidecontenttoggler a:hover{
background: black;
color: white;
}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
background: #1A48A4;
color: white;
}

.glidecontenttoggler  player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // the video is end, do something here.

 video.load();
        video.play();    }
});