#LayerBody {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	top:0;
	width:920px;
	height:720px;
	z-index:1;
}
#LayerNav {
	position:absolute;
	left:10px;
	top:123px;
	width:170px;
	height:358px;
	z-index:3;
	background-image: url(images/images/Navigation.png);
}
#LayerMP3 {
	position:absolute;
	left:-70px;
	top:-20px;
	width:690px;
	height:330px;
	z-index:8;
}
#Layer1 {
	position:absolute;
	left:0px;
	top:120px;
	width:920px;
	height:367px;
	background-image: url(images/contentWindow1.png);
	z-index:2;
}
#Layer100 {
	position:absolute;
	left:0px;
	top:120px;
	width:920px;
	height:600px;
	background-image: url(images/contentWindow2.png);
	z-index:2;
}
#Layer101 {
	position:absolute;
	left:0px;
	top:120px;
	width:920px;
	height:920px;
	background-image: url(images/contentWindow3.png);
	z-index:2;
}
#Layer102 {
	position:absolute;
	left:0px;
	top:120px;
	width:920px;
	height:1050px;
	background-image: url(images/contentWindow4.png);
	z-index:2;
}
#Layer105 {
	position:absolute;
	left:0px;
	top:120px;
	width:920px;
	height:1700px;
	background-image: url(images/contentWindow5.png);
	z-index:2;
}
#Layer1000 {
	position:absolute;
	left:0px;
	top:0px;
	width:920px;
	height:367px;
	z-index:2;
}
#Layer2 {
	position:absolute;
	left:0px;
	top:0px;
	width:920px;
	height:100px;
	z-index:4;
}
#Layer3 {
	position:absolute;
	left:784px;
	top:200px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer300 {
	position:absolute;
	left:708px;
	top:416px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer301 {
	position:absolute;
	left:784px;
	top:432px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer302 {
	position:absolute;
	left:784px;
	top:750px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer3000 {
	position:absolute;
	left:184px;
	top:435px;
	width:700px;
	height:110px;
	z-index:5;
}
#Layer400 {
	position:absolute;
	left:184px;
	top:435px;
	width:700px;
	height:110px;
	z-index:5;
}
#Layer4 {
	position:absolute;
	left:185px;
	top:10px;
	width:700px;
	height:200px;
	text-align: left;
	z-index:6;
}
#Layer401 {
	position:absolute;
	left:0px;
	top:-20px;
	width:700px;
	height:200px;
	text-align: left;
	z-index:6;
}
#Layer4000 {
	position:absolute;
	left:185px;
	top:-1000px;
	width:700px;
	height:200px;
	text-align: left;
	z-index:6;
}
#Layer5 {
	position:absolute;
	left:185px;
	top:210px;
	width:600px;
	height:130px;
	text-align: left;
	z-index:7;
}
#Layer501 {
	position:absolute;
	left:500px;
	top:300px;
	width:200px;
	height:30px;
	text-align: left;
	z-index:7;
}
#Layer502 {
	position:absolute;
	left:185px;
	top:250px;
	width:600px;
	height:100px;
	text-align:center;
	z-index:7;
}
#Layer6 {
	position:absolute;
	left:0px;
	top:380px;
	width:920px;
	height:20px;
	z-index:8;
}
#Layer600 {
	position:absolute;
	left:0px;
	top:613px;
	width:920px;
	height:20px;
	z-index:8;
}
#Layer601 {
	position:absolute;
	left:0px;
	top:1063px;
	width:920px;
	height:20px;
	z-index:8;
}
#Layer602 {
	position:absolute;
	left:0px;
	top:1713px;
	width:920px;
	height:20px;
	z-index:8;
}
#Layer603 {
	position:absolute;
	left:0px;
	top:910px;
	width:920px;
	height:20px;
	z-index:8;
}
#Layer7 {
	position:absolute;
	left:2%;
	top:15px;
	width:95%;
	height:50px;
	z-index:4;
}
#Layer8 {
	position:absolute;
	left:2%;
	top:0px;
	width:95%;
	height:15px;
	z-index:3;
}
#Layer9 {
	position:absolute;
	left:2%;
	top:511px;
	width:96%;
	height:5px;
	z-index:9;	
}
#Layer10 {
	position:absolute;
	left:80%;
	top:74px;
	width:17%;
	height:426px;
	z-index:10;
}
#Layer11 {
	position:absolute;
	left:4px;
	top:109px;
	width:95%;
	height:96px;
	z-index:11;
	background-color: #FFCC66;
}
#Layer12 {
	position:absolute;
	left:4px;
	top:213px;
	width:95%;
	height:97px;
	z-index:12;
	background-color: #99FF99;
}
#Layer13 {
	position:absolute;
	left:4px;
	top:318px;
	width:95%;
	height:87px;
	z-index:13;
	background-color: #00CCFF;
}
#Layer14 {
	position:absolute;
	left:4px;
	top:518px;
	width:95%;
	height:48px;
	z-index:14;
	background-color: #CC99CC;
}
#Layer15 {
	position:absolute;
	left:4px;
	top:575px;
	width:95%;
	height:72px;
	z-index:15;
	background-color: #CCFF66;
}
#Layer16 {
	position:absolute;
	left:4%;
	top:636px;
	width:90%;
	height:10px;
	z-index:16;
}
#Layer17 {
	position:absolute;
	left:25%;
	top:471px;
	width:10px;
	height:10px;
	z-index:17;
}
#Layer18 {
	position:absolute;
	left:30px;
	top:97px;
	width:5px;
	height:39px;
	z-index:18;
}
#Layer19 {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:1600px;
	z-index:1;
}
#Layer20 {
	position:absolute;
	left:12px;
	top:208px;
	width:78%;
	height:1238px;
	z-index:6;
}
#Layer21 {
	position:absolute;
	left:29px;
	top:228px;
	width:74%;
	height:1200px;
	z-index:7;
}
#Layer22 {
	position:absolute;
	left:2%;
	top:1511px;
	width:96%;
	height:5px;
	z-index:9;	
}
#Layer23 {
	position:absolute;
	left:4%;
	top:1536px;
	width:90%;
	height:10px;
	z-index:16;
}
#Layer24 {
	position:absolute;
	left:39px;
	top:228px;
	width:71%;
	height:200px;
	z-index:8;
}
#Layer25 {
	position:absolute;
	left:6%;
	top:780px;
	width:157px;
	height:74px;
	z-index:25;
	background-color: #FFCC66;
}
#Layer26 {
	position:absolute;
	left:30.5%;
	top:780px;
	width:157px;
	height:84px;
	z-index:26;
	background-color: #99FF99;
}
#Layer27 {
	position:absolute;
	left:55%;
	top:780px;
	width:157px;
	height:94px;
	z-index:27;
	background-color: #00CCFF;
}
#Layer28 {
	position:absolute;
	left:4px;
	top:6px;
	width:95%;
	height:96px;
	z-index:28;
	background-color: #FFCCFF;
}
#Layer29 {
	position:absolute;
	left:6%;
	top:600px;
	width:157px;
	height:70px;
	z-index:25;
	background-color: #FFCCFF;
}
#Layer30 {
	position:absolute;
	left:30.5%;
	top:600px;
	width:157px;
	height:70px;
	z-index:26;
	background-color: #FFCCFF;
}
#Layer31 {
	position:absolute;
	left:55%;
	top:600px;
	width:157px;
	height:70px;
	z-index:27;
	background-color: #FFCCFF;
}
#Layer32 {
	position:absolute;
	left:6%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:25;
	background-color: #FFCCFF;
}
#Layer33 {
	position:absolute;
	left:30.5%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:26;
	background-color: #FFCCFF;
}
#Layer34 {
	position:absolute;
	left:55%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:27;
	background-color: #FFCCFF;
}
#Layer35 {
	position:absolute;
	left:6%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:25;
	background-color: #FFCC66;
}
#Layer36 {
	position:absolute;
	left:30.5%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:26;
	background-color: #FFCC66;
}
#Layer37 {
	position:absolute;
	left:55%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:27;
	background-color: #FFCC66;
}
#Layer38 {
	position:absolute;
	left:6%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:25;
	background-color: #99FF99;
}
#Layer39 {
	position:absolute;
	left:30.5%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:26;
	background-color: #99FF99;
}
#Layer40 {
	position:absolute;
	left:55%;
	top:1100px;
	width:157px;
	height:70px;
	z-index:27;
	background-color: #99FF99;
}
#Layer41 {
	position:absolute;
	left:4px;
	top:413px;
	width:95%;
	height:97px;
	z-index:12;
	background-color: #CCCCCC;
}
#Layer42 {
	position:absolute;
	left:18%;
	top:600px;
	width:157px;
	height:70px;
	z-index:25;
	background-color: #CCCCCC;
}
#Layer43 {
	position:absolute;
	left:45.5%;
	top:600px;
	width:157px;
	height:70px;
	z-index:26;
	background-color: #CCCCCC;
	border:solid;
	border-color:#FFFFFF;
	border-width:thin;
}
#Layer99 {
	position:absolute;
	left:0px;
	top:400px;
	width:100%;
	height:100px;
	z-index:5;
}
#Layer103 {
	position:absolute;
	left:708px;
	top:200px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer104 {
	position:absolute;
	left:710px;
	top:880px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer106 {
	position:absolute;
	left:710px;
	top:1530px;
	width:100px;
	height:131px;
	z-index:5;
}
#Layer107 {
	position:absolute;
	left:750px;
	top:1530px;
	width:100px;
	height:131px;
	z-index:5;
}
.style1 {font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #000000;}
.style2 {font-family: Arial Narrow, Arial, Helvetica, sans-serif; font-size: 25px; color: #000000;}
.style3 {color: #FFFFFF}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small;}
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #000000;}
body {
	text-align: center;
	background-color: #34449C;
	margin: 0 0 20px 0;
	background-image: url(images/blueDrum.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
  }
.body1 a:link {
   color: #000000; 
   text-decoration: none; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: x-small;
}
.body1 a:visited {
   color: #000000; 
   text-decoration: none; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: x-small;
}
.body1 a:hover {
   color: #666; 
   text-decoration: underline; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: x-small;
}
.body1 a:active { 
   color: #000000; 
   text-decoration: underline; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: x-small;
}
.body2 a:link {
   color: #000000; 
   text-decoration: none; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: xx-small;
}
.body2 a:visited {
   color: #000000; 
   text-decoration: none; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: xx-small;
}
.body2 a:hover {
   color: #000000; 
   text-decoration: underline; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: xx-small;
}
.body2 a:active { 
   color: #000000; 
   text-decoration: underline; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: xx-small;
}
.body3 a:link {
   color: #000000; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 15px;
}
.body3 a:visited {
   color: #000000; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 15px;
}
.body3 a:hover {
   color: #666666; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 15px;
}
.body3 a:active { 
   color: #666666; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 15px;
}
.body4 a:link {
   color:#000000; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 35px;
}
.body4 a:visited {
   color: #000000; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 35px;
}
.body4 a:hover {
   color:#5757AC; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 35px;
}
.body4 a:active { 
   color: #000000; 
   text-decoration: underline; 
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;
   font-size: 35px;
}
.field {
	font-family: tahoma, verdana, arial, helvetica;
	font-size: 11px;
	color: #626278;
	width: 135px;
}
.button {
	font-family: tahoma, verdana, arial, helvetica;
	font-size: 11px;
	padding: 2px 0 2px 0;
	width: 141px;
}
.form_table {
	width: 270px;
}
.form_td_left {
	width: 185px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small;
}
.form_td_right {
	width: 85px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small;
}

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	left:-2px;
	overflow:hidden;	 	
	width: 645px;	
	height:96px;	
	
	
	/* custom decorations */
	padding:2px 0;	
	border:1px outset #ccc;
	background-color:#efefef;				
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:2px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:110px;
	padding:2px 0px;
	font-size:30px;
	font-family: 'bitstream vera sans';
	border:1px outset #ccc;
	background-color: #ddd;
	margin-right: 20px;	
	-moz-border-radius:5px;
}

/* active item */
div.scrollable div.items div.active {
	border:1px inset #ccc;		
	background-color:#fff;
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(http://www.sydneydrumtutor.com.au/video/images/left.png) no-repeat;
	float:left;
	margin:43px 3px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(http://www.sydneydrumtutor.com.au/video/images/right.png);
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:328px;
	width:180px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(http://www.sydneydrumtutor.com.au/video/images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
}