/* Main Container which includes mian background image (ex: Mike and May in Bkgrnd) */
#blackpage {
background-color:#000000;
margin-left:auto;
margin-right:auto;
width:1000px;
height:auto;
}



/* START Various Containers: */

#container {
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#container a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#container a:hover {
	color: #FF0000;
	text-decoration: none;
	}



#MMcontainer {
background-image:url(images/MARI%20BACKGROUND%202024.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#MMcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#MMcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}



#MLcontainer {
background-image: url(images/OPACITY%2015%20MARI%20LOGO%201000.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#MLcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#MLcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}



#SBcontainer {
background-image:url(images/SCHEDULE%20BACKGROUND.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#SBcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#SBcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}

<!-- START TEST SCHEDULE -->


#calendar {
    font:11px Papyrus, Verdana, Geneva, Arial, sans-serif;
	color:#000000;
	text-align:center;
	font-weight:bold;

	}
#calendarText {
    font:11px Papyrus, Verdana, Geneva, Arial, sans-serif;
	color:#000000;
	text-align:center;
	font-weight:bold;

}

	 	/* Global Styles */	/* These refer to the spry menu list */		
td {
	font:11px Papyrus, Verdana, Geneva, Arial, sans-serif;
	color:#000000;
	text-align:center;
	font-weight:bold;
	}
tr  {
    font:11px Papyrus, Verdana, Geneva, Arial, sans-serif;
	color:#000000;
	text-align:center;
	font-weight:bold;

}
 
/* ID Styles -------- I'm not sure if I used this so I won't remove it. (I think SPRY uses them so they stay) */


<!-- END TEST SCHEDULE -->
	
	
#HMcontainer {
background-image: url(images/OPACITY%2015%20HARIMAU%201000.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#HMcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#HMcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}

	

#CGcontainer {
background-image: url(images/CHI%20GONG%20BKRND.jpg);
background-repeat:no-repeat;
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#CGcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#CGcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}	
	


#WDcontainer {
background-image:url(images/BAPAK%20BKGRD.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#WDcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#WDcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}

	

#OAcontainer {
background-image: url(images/OIDO%20BGRND.jpg);
background-repeat:no-repeat; 
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#OAcontainer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#OAcontainer a:hover {
	color: #FF0000;
	text-decoration: none;
	}


	
/* END Various Containers: */
	
	
	
	/* The Banner Across the top */
       
#header {
	text-align:center;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}


	/* This is the Side bar containing my downward spry menu like in KSR site */

#sidebar {
     margin-right:10px;
     width: 160px;
     float: left;
}
    /* This is just a space Block div that floats on the right side */

a img { border: none; }

	/* This is code that removes the blue or purple border on image links added as default by dreamweaver */

#rightgroup {
	width: 375px;
	text-align:left;
	float:right;
}
#rightgroup a {
	color: #B3B3B3;
	text-decoration: none;
	}	
#rightgroup a:hover {
	color: #FF0000;
	text-decoration: none;
	}
#rightgroup a:visited {
    text-decoration:none;
}

	/* This is a block of space which floats to the left side of the page */

#leftgroup {
    width: 375px;
	text-align:left;
	float:left;
}
#leftgroup a {
	color: #B3B3B3;
	text-decoration: none;
	}	
#leftgroup a:hover {
	color: #FF0000;
	text-decoration: none;
	}
	

#navigation td {

	border-bottom: 1px solid #000000;
	}

#navigation a {
	font:13px Papyrus, Verdana, Geneva, Arial, sans-serif;
	color: #B3B3B3;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 8px 22px;
	font-weight:bold;
	}
	
#navigation a:hover {
	color:#FF0000;
	font-weight:bold;

	}
#navigation a:visited {
color:#B3B3B3;
}

	/* This I used as the main page text content I only defined it to have 785px out of 1000px for the min width of my content page. It has a 10px margin */
	
#mainpage {
     margin-left: 10px;
     float: left;
	 width: 785px;
	 height:auto;
}
#mainpage a:link {
	color: #B3B3B3;
	text-decoration: none;
	}	
#mainpage a:hover {
	color: #FF0000;
	text-decoration: none;
	}

	/* I use this for the Main part of a text body to spread across the whole content area. I gave it a 25px margin at the left (the right margin doesn't need to be defined. You can use floats to ad pictures inline to this area. */


	
#textarea {

	text-align:center;
	width:950px;
	float:left;
	margin-left:25px;	
	}
#textarea a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#textarea a:hover {
	color: #FF0000;
	text-decoration: none;
	}	
	
	/* This is just another area block with 1000px width dimension  */	
	
#schedule {

	width: 1000px;
	height:auto;
	text-align:left;
	color: #B3B3B3;
	margin: 0px;
	padding: 0px;
	text-decoration:none;
}


#schedule a:hover {
	font-weight:bold;
	

	}
#schedule a:visited {
    color:#B3B3B3;
    text-decoration:none;
}
#schedule a:active {
text-decoration:none;
}
#schedule a:link {
text-decoration:none;
} 

	/* This defines the color of the links on the pages */

a:active {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #FF0000;
}
a:active {
	text-decoration: none;
}
#linklist {          /* I'm not sure if I used this so I won't remove it (I'll check Later) */
width: 1000px;

}



	        
#linklist a:hover {
	color: #FF0000;
	text-decoration: none;
	}
	
	/* This defines the whole website backround (what you see at the sides) */	
	
body {
	background-color:#000000;
	margin-right: auto;
	margin-left: auto;
	margin-top:0px;
	font-family: Papyrus, Verdana, Geneva, Arial, sans-serif;
	text-align:center;
	background-image:url(images/MARI%20WHOLE%20PAGE.jpg);
	background-repeat:repeat;
	clear: none;
	float: none;
	}
	
		/* These are the styles of headings and text */
	
    h2, h3 {
	color: #B3B3B3;        	/* This defines the main WHITE color of the text */
	}
	
	
	/* Main Title Size */
	h1 {
	color:#FFCC99;        	/* This is a BEIGE color text */
	text-align:center;
	font-size:36px;
	}
	h1 em {
	        color: #EO922F;
	}
	/* Large Heading Size and iherits the alignment of the div */
	h2 {
	font-size:24px;
	font-weight:bold;
	}
	h2 em {
	        color: #EO922F;
	}
	.day {          	/* This is used to underline the title <span class= "day">Text Stuff</span> */
	font-weight:bolder;
	text-decoration:underline;
	}
	/* Main Text Size */
	p {
	color: #B3B3B3;   	/* WHITE */
	font-size:18px;
	text-decoration: none;
	}
		
	p3 {
	color: #B3B3B3;   	/* WHITE */
	font-size:18px;
	text-align:right;
	text-decoration: none;
	}
		
	p4 {
	color: #B3B3B3;   	/* WHITE */
	font-size:18px;
	text-align:left;
	text-decoration: none;
	}
		
	p5 {
	color:#000000
	font-size:18px;
	text-decoration: none;
	}
		
	h1.coltitle{            	/* I'm not sure if I used this so I won't remove it (I'll check Later) */
	color:#FFCC99;
	}
	p.day {                /* This is used to underline the title but is specific to the <p> tag <p class= "day">Text Stuff</p> */
	font-weight:bolder;
	text-decoration:underline;
	color: #B3B3B3;
	font-size:24px;
	}
	p.bold {
	font-weight:bold;
	font-size:20px;
	}
	p.bolder {
	font-weight: bolder;
	font-size:18px;
	}
	.underline {
	text-decoration: underline;
	}
	
	/* by definition I don't even need this here */
	


	/* Small Heading Size which is the same as <p> but BOLD. (Probably am not using it) */
	p2 {
	color: #B3B3B3;
	font-size:18px;
	font-weight: bold; 
	
	}
	p2 em {
	        color: #EO922F;
	}		
	
	/* small text aligns RIGHT */
	
	
	h3 {
	font-size:14px;       
	font-family:"Times New Roman", Times, serif;
	text-align:right;
	}

	
	/*  small text aligns LEFT */
	
	h4 {
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	text-align:left;
	}

	
	/* <h2> but with a BEIGE color */
	
	h5 {
	color:#FFCC99;
	font-size:24px;
	font-weight:bold;
	}
	

	
	/* This is good to use as the Main text at 1000px because I have no problem with the colorization and activity of the LINKS. Use it in conjunction with <div class= "textarea"> to produce margins. as I said, the LINKS act properly without any oddities */
	
#footer {
background-color:#000000;
margin-left:auto;
margin-right:auto;
	text-align:center;
	width:1000px;
	float: left;
	}
#footer a {
    color: #B3B3B3;
	text-decoration: none;
	}	
#footer a:hover {
	color: #FF0000;
	text-decoration: none;
	}
  
  /* I use the following to Float Photos to either edge of the page so that text can wrap around the images with a little margin around the picture as well */
  
   
.photoleft {
	float: left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-right: 10px;
	margin-bottom: 5px;
	padding: 5px;
}
.photoright {
	float: right;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-left: 10px;
	margin-bottom: 5px;
	padding: 5px;
}
@font-face{
font-family: 'Papyrus';
src: url(Web Content/'PAPYRUS.TTF') format('truetype');
}