/* CSS Reset of Eric Meyer
 * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */ 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* end of Eric's CSS Reset */

/* basic tags ------------------------------------------------------- */
body {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 11px;
	background: #FEF7DA;
}

table {
	width: 100%;
}

table, form {
	margin-top: 20px;
	margin-bottom: 20px;
}

h2,h3,h4 {
	font-weight: bold;
}

h4 {
	font-size: 12px; 
}
h3 {
	font-size: 16px;
	margin-top: 16px;
	margin-bottom: 16px;
}
h2 {
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

h3 a {
	text-decoration: none;
}

p {
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.6em;
}

a, a:visited {
	color: #0A6AA3;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

a span,
a h4 {
	display: none;
}
/* END basic tags --------------------------------------------------- */

/* main layout ------------------------------------------------------ */
#container {
	margin: 0 auto;
	width: 962px;
	background: #FFFFFF;
}
	#header,#main,#footer {
		background: url(images/imgs.jpg) no-repeat;
	}
	#sidebar,#greeting {
		background: url(images/bgs.jpg) no-repeat;
	}
	
	#header {
		z-index: 8;
		position: relative;
		height: 529px;
		background-position: 0 0;
	}
		#topnav {
			position: absolute;
			top: 473px;
			left: 30px;
		}
	#main {
		background-color: #FFFFFF;
		background-position: 0 -872px;
	}
		#sidebar,#content {
			float: left;
			margin-left: 25px;
		}
		#sidebar {
			position: relative;
			margin-top: 15px;
			width: 230px;
			background-color: #0A6AA4;
			background-position: 0 -319px;
			background-repeat: repeat-x;
		}
		#content {
			margin-top: 80px;
			width: 600px;
		}
			.training-list {
				padding-bottom: 20px;
			}
		#greeting {
			padding: 20px 10px;
			background-position: 0 0;
			background-repeat: repeat-x;
		}
			#greeting img {
				float: right;
			}
	#footer {
		margin-top: 30px;
		position: relative;
		height: 343px;
		background-position: 0 -531px;
	}
		#copyright {
			position: absolute;
			left: 180px;
			top: 305px;
		}
/* END main layout -------------------------------------------------- */

/* header ----------------------------------------------------------- */
#header h2,
#header h3,
#header h4 {
	display: none;
}

/* english navigation */
#english-menu {
	position: absolute;
	top: 20px;
	left: 825px;
}
	#english-menu .trigger {
		display: block;
		width: 120px;
		height: 40px;
	}

/* top navigation */
#topnav li {
	float: left;
	position: relative;
}
	#topnav li a.f {
		display: block;
		margin-right: 2px;
		width: 80px;
		height: 44px;
	}
#english-menu ul,
#topnav li ul {
	display: none;
	z-index: 8;
	position: absolute;
	border: 1px solid #FF9900;
}
	#topnav li ul li {
		float: none;
	}
	#english-menu li a,
	#topnav li ul a {
		display: block;
		padding: 4px;
		width: 140px;
		border-bottom: 1px solid #FF9900;
		background: #FFCC00;
		text-decoration: none;
	}
		#topnav li ul li ul {
			z-index: 9;
			top: 0px;
			left: 148px;
		}
	#english-menu li a:hover,
	#topnav li ul a:hover {
		background: #FFFFFF;
	}
/* END header ------------------------------------------------------- */

/* sidebar ---------------------------------------------------------- */
#slideshow-presentation, #nac-dalam-berita, #random-photo,
#marching-band, #our-products, #links, #nac-community {
	right: 10px;
	position: relative;
	display: block;
	background: url(images/sidebar.gif) no-repeat;
}
	#slideshow-presentation {
		width: 230px;
		height: 122px;
		background-position: 0 0;
	}
	#nac-dalam-berita {
		margin-bottom: 10px;
		width: 230px;
		height: 82px;
		background-position: 0 -122px;
	}
	#random-photo {
		margin-bottom: 30px;
		width: 230px;
		height: 200px;
		background-position: 0 -478px;
	}
		#photo-wrapper {
			top: 30px;
			left: 40px;
		}
	#marching-band {
		margin-bottom: 20px;
		width: 230px;
		height: 118px;
		background-position: 0 -286px;
	}
	#our-products {
		margin-bottom: 30px;
		width: 230px;
		height: 82px;
		background-position: 0 -204px;
	}
	#linkroll {
		margin-bottom: 20px;
	}
		#links {
			width: 230px;
			height: 74px;
			background-position: 0 -404px;
			text-indent: -9999px;
		}
		#linkroll ul {
			margin-left: 10px;
		}
		#linkroll a {
			display: block;
			padding: 1em 0 1em 30px;
			background: url(images/smilies.gif) no-repeat center left;
			color: #FFFFFF;
			text-decoration: none;
		}
	#community img {
		position: relative;
		left: 60px;
	}
	#nac-community {
		width: 230px;
		height: 135px;
		background-position: 0 -685px;
	}
/* END sidebar ------------------------------------------------------ */

/* gallery ---------------------------------------------------------- */
.gallery-thumbs {
	margin-bottom: 20px;
	float: left;
	width: 200px;
	height: 180px;
	text-align: center;
}
	.gallery-thumbs img {
		padding: 4px;
		background: #EEEEEE;
		border: 1px solid #CCCCCC;
	}
	.gallery-thumbs a:hover {
		text-decoration: none;
	}
/* END gallery ------------------------------------------------------ */

/* <table> ---------------------------------------------------------- */
	table tr:hover td {
		background: #E3FBFA;
	}
	table th {
		background: #C1DCE9;
	}
	table td {
		background: #F0F0F0;
		border-top: 1px solid #FFFFFF;
		border-bottom: 1px solid #DDDDDD;
	}
	table th,
	table td {
		padding: 10px;
	}
/* </table> --------------------------------------------------------- */

/* <form> ----------------------------------------------------------- */
		form p label {
			display: block;
			float: left;
			width: 120px;
		}
/* </form ----------------------------------------------------------- */

/* miscellaneous properties ----------------------------------------- */
.clear {
	clear: both;
}
.padding {
	padding: 10px;
}
/* END miscellaneous properties ------------------------------------- */