@charset "UTF-8";
/* CSS Document */

body {
	background-color: #000;
	}

p {
	font-family: "Bank Gothic Light";
	font-size: 14px;
	color: #F2F2F2;
	}

p2 {
	font-family: Impact;
	font-size: 14px;
	color: #F2F2F2;
	}

a:visited {
	color: none;
	}

#wrapper {
	width: 1000px;
	height: 600px;
	background-color: black;
	/* background-image: url(../Images/jongdesignsBG.jpg); */
	margin-left: auto;
	margin-right: auto;
	}
	
#navigation {
	position: absolute;
	width: 783px;
	height: 63.5px;
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-top: 0px;
	margin-top: 425px;
	margin-left: 145px;
	z-index: 11;
	}

/* this is for the navigation menu buttons rollover effect */
#nav:hover {
	background-position: 0 -35px;
	}
#animation:hover {
	background-position: 0 -35px;
	}
#threed:hover {
	background-position: 0 -35px;
	}
#twod:hover {
	background-position: 0 -35px;
	}
#web:hover {
	background-position: 0 -35px;
	}
#print:hover {
	background-position: 0 -35px;
	}
#illustration:hover {
	background-position: 0 -35px;
	}
	
/* end navigation button rollover section */	

/* this is for styling the divs inside the navigation section */
#nav {
	position: absolute;
	width: 166px;
	height: 35px;
	background-image:url(../Images/clicknav.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 10;
	cursor: pointer;
	}

#animation {
	position: relative;
	left: 166px;
	width: 136px;
	height: 35px;
	background-image: url(../Images/animation.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 9;
	cursor: pointer;
	}

#threed {
	position: relative;
	bottom: 35px;
	left: 302px;
	width: 61px;
	height: 35px;
	background-image: url(../Images/3d.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 8;
	cursor: pointer;
	}
	
#twod {
	position: relative;
	left: 364px;
	bottom: 70px;
	width: 53px;
	height: 35px;
	background-image: url(../Images/2d.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 7;
	cursor: pointer;
	}	

#web {
	position: relative;
	left: 417px;
	bottom: 105px;
	width: 80px;
	height: 35px;
	background-image: url(../Images/web.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 6;
	cursor: pointer;
	}	

#print {
	position: relative;
	left: 496px;
	bottom: 140px;
	width: 75px;
	height: 35px;
	background-image: url(../Images/print.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 5;
	cursor: pointer;
	}	
	
#illustration {
	position: relative;
	left: 571px;
	bottom: 175px;
	width: 117px;
	height: 35px;
	background-image: url(../Images/illustration.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 5;
	cursor: pointer;
	}	
/* end navigation divs styling section */

#content {
	width: 1000px;
	height: 555px;
	padding-top: 1px;
	}

#contentbox {
	position: relative;
	bottom: 535px;
	width: 945px;
	height: 513px;
	/*background-color: #2F3273; */
	margin-top: 80px;
	margin: auto;
	z-index: 10;
	padding-left: 14px;
	padding-top: 3px;
	padding-right: 14px;
	}

/* styling for the gallery box div in the threed section */
#gallerybox {
	width: auto;
	height: auto;
	position: relative;
	left: 175px;
	top: 40px;
	z-index: 15;
	}
/* end styling for the gallery box div section */

/* styling for the animation box div in the animation section */
#animationbox {
	width: auto;
	height: auto;
	position: relative;
	top: 150px;
	left: 60px;
	z-index: 16;
	}
/* end styling for the animation box div section */

label, input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #F2F2F2;
	}

input, textarea {
	background-color: #454899;
	}