/*general*/
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0px; background: #FFFFFF; }
p, td { font-size: 12px; color: #000000; text-decoration: none; }
h1 { font-size: 20px; margin-top: 0px; padding-top: 2px; margin-bottom: 20px; }
h2 { font-size: 12px; font-weight: bold; }

.msg_box { padding: 10px; margin: 10px 0px 10px 0px; font-weight: bold; display: none; background: #FFC; }
.block { display: block; }
.msg_info { border: 1px solid #06F; color: #06C; }
.msg_error { border: 1px solid #F00; color: #F00; }

/* Links */
a { color: #0066cc; text-decoration: underline; font-size: 12px; }
a:hover { color: #003366; text-decoration: none; }
a.btn { display: block; width: 100%; height: 100%; text-indent: -5000px; }

/*  Design  */
div.overflow { width: 100%; overflow: hidden; }
.area { margin: 0px auto; width: 860px; }

#top-line { height: 100px; background: url(back-top.gif) repeat-x; }
	#top-line .area { height: 100%; }
	#logo-menu-line { height: 100px; background:url(back-top-middle.gif) no-repeat; }
		#logo { background: url(zog-logo.jpg) no-repeat; width: 140px; height: 96px; position: absolute; margin-left: 20px; margin-top: 4px; }
			#logo a { display: block; width: 140px; height: 96px; }
			#logo h1 { text-indent: -5000px; }
		#phone { width: 300px; height: 30px; position: absolute; margin-left: 180px; margin-top: 10px; color: #FFF; font-weight: bold; font-size: 14px; }
		#btn-login { background: url(btn-client-login.gif) no-repeat; width: 123px; height: 30px; position: absolute; margin-left: 720px; }
		#menu { width: 700px; height: 20px; position: absolute; margin-left: 180px; margin-top: 70px; }
			#menu ul { list-style: none; margin: 0; padding: 0; }
				#menu ul li { display: block; float: left; }
					#menu ul li a, #menu ul li a:visited { color: #FFFFFF; font-size: 11px; text-decoration: none; padding: 3px; font-weight: bold; }
						#menu ul li a:hover { color: #FFFFFF; }
							#menu ul li a span.bg-l, #menu ul li a:visited span.bg-l { background-image:none; float:left; padding:3px 0px 0px 8px; height:20px; cursor: pointer; }	
							#menu ul li a span.bg-r, #menu ul li a:visited span.bg-r { background-image:none; float:left; width:8px; height:20px; cursor: pointer; }	
							#menu ul li a:hover span.bg-l { background: url(menu-top-l.gif) no-repeat top left; color:#fff; cursor: pointer; }
							#menu ul li a:hover span.bg-r { background: url(menu-top-r.gif) no-repeat top left; cursor: pointer; }
							
							#menu ul li a.sel span.bg-l { background: url(menu-top-l.gif) no-repeat top left; color:#fff; cursor: pointer; }
							#menu ul li a.sel span.bg-r { background: url(menu-top-r.gif) no-repeat top left; cursor: pointer; }				
#middle-line-cover { height: 150px; background: #0e0b08; }
	#middle-back-cover { height: 150px; background: url(back-middle.gif) no-repeat; color: #FFFFFF; }
		div.cover-banner1 { float: left; width: 500px; margin-top: 20px; }
			div.cover-banner1 h2 { font-size: 40px; margin: 0; margin-left: 40px; margin-top: 30px; }
		div.cover-banner2 { float: left; width: 300px; margin-left: 40px; margin-top: 30px; }
			div.cover-banner2 ul { list-style: none; margin: 0; padding: 0; }
				div.cover-banner2 ul li { background: url(icon-check.gif) no-repeat; padding: 5px; padding-left: 40px; font-size: 16px; margin-bottom: 5px; font-weight: bold; }
#middle-line { height: 196px; background: #0e0b08; }
	#middle-line .area { height: 100%; }
	#middle-back { height: 196px; background: url(back-middle.gif) no-repeat; color: #FFFFFF; }
		div.register { float: left; width: 400px; margin-left: 20px; margin-top: 30px; }
			div.register h2 { font-size: 24px; margin: 0px; margin-bottom: 20px; }
			div.btn-trial { float: left; background: url(btn-free-trial.gif) no-repeat; width: 131px; height: 31px; }
			div.btn-buynow { float: left; background: url(btn-buy-now.gif) no-repeat; width: 131px; height: 31px; margin-left: 20px; }
			div.register ul { list-style: none; margin: 0; padding: 0; }
				div.register ul li { background: url(icon-check.gif) no-repeat; padding: 5px; padding-left: 40px; font-size: 14px; margin-bottom: 5px; }
		#l1030 { background: url(lbl1030.gif) no-repeat; width: 121px; height: 49px; margin-top: 20px; margin-left: 10px; }
#middle-inside-line { height: 80px; background: #0e0b08; }
	#middle-inside-line .area { height: 100%; }
	#middle-inside-back { height: 80px; background: url(back-middle.gif) no-repeat; color: #FFFFFF; }
	#middle-inside-line div.btn-trial, #middle-inside-line div.btn-buynow { margin-top: 25px; }
	div.btn-learn { float: left; width: 131px; margin-left: 25px; margin-top: 35px; }
	#middle-inside-line a, #middle-inside-line a:visited  { color: #fdff9a; text-decoration: none; }
	#middle-inside-line a:hover { color: #FFCC00; }
#body-line { background: url(back-content.gif) repeat-x; padding-top: 20px; }
	#content { float: left; width: 600px; margin-left: 20px; }
		#content h1 { font-size: 14px; font-weight: bold; }
	#hot-links { float: right; width: 230px; }
		#services { background: url(right-box1-back.gif) repeat-y; width: 100%; }
			#services-top { background: url(right-box1-top.gif) no-repeat; width: 100%; height: 7px; }
			#services-body { padding: 5px 0px 5px 0px; }
				#services-body h2 { font-size: 14px; margin: 0; padding-left: 17px; margin-bottom: 10px; }
				#services-body ul { margin: 0; padding: 0; list-style-type: none; }
					#services-body ul li {  }
						#services-body ul li a, #services-body ul li a:visited { background: url(right-box1-line.gif) no-repeat left bottom; padding: 7px; padding-left: 20px; color: #666666; display: block; text-decoration: none; }
						#services-body ul li a:hover { color: #000000; background: url(right-box1-line.gif) no-repeat left bottom #faf2b2; }
			#services-bottom { background: url(right-box1-bottom.gif) no-repeat; width: 100%; height: 5px; }
		#career { background: url(right-box2-back.gif) repeat-y; width: 100%; margin-top: 15px; }
			#career-top { background: url(right-box2-top.gif) no-repeat; width: 100%; height: 6px; }
			#career-body { padding: 5px 0px 5px 0px; }
				#career-body h2 { font-size: 14px; margin: 0; padding-left: 17px; margin-bottom: 10px; }
				#career-body p { padding: 5px 20px 0px 20px; color: #666666; }
				#career-body ul { margin: 0; padding: 0; list-style-type: none; }
					#career-body ul li {  }
						#career-body ul li a, #career-body ul li a:visited { background: url(right-box2-line.gif) no-repeat left bottom; padding: 7px; padding-left: 20px; color: #666666; display: block; text-decoration: none; }
						#career-body ul li a:hover { color: #000000; background: url(right-box2-line.gif) no-repeat left bottom #dfdfdf; }
			#career-bottom { background: url(right-box2-bottom.gif) no-repeat; width: 100%; height: 6px; }
		#newsletter { background: url(right-box2-back.gif) repeat-y; width: 100%; margin-top: 15px; }
			#newsletter-top { background: url(right-box2-top.gif) no-repeat; width: 100%; height: 6px; }
			#newsletter-body { padding: 5px 0px 5px 0px; }
				#newsletter-body h2 { font-size: 14px; margin: 0; padding-left: 17px; margin-bottom: 10px; }
				#newsletter-body p { padding: 5px 20px 0px 20px; color: #666666; }
				#newsletter-body div.row { margin-top: 5px; margin-left: 20px; }
				#newsletter-body div.left { width: 80px; float: left; }
				#newsletter-body div.right { width: 120px; float: left; }
				#newsletter-body input { width: 100px; }
			#newsletter-bottom { background: url(right-box2-bottom.gif) no-repeat; width: 100%; height: 6px; }
#footer-line { margin-top: 20px; margin-bottom: 20px; border-top: 14px solid #e3e3e3; padding-top: 20px; }
	#footer-logo { float: left; width: 42px; background: url(zog-logo-small.gif) no-repeat; width: 42px; height: 25px; }
	#footer-copyright { float: left; width: 400px; margin-left: 10px; padding-top: 10px; }
	#footer-dev { float: right; width: 200px; text-align: right; padding-top: 10px; }
	
div.delimiter { float: left; width: 290px; padding-right: 10px; }
.grey { color: #999999; }
/*  Design end  */

/* Form */
form { padding: 0px; margin: 0px; }
select { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
input { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
.notify { font-size: 12px; color: #FF0000; font-weight: bold; }
.notify:hover { font-size: 12px; color: #FF0000; text-decoration: none; }
.submit { font-size: 11px; font-weight: bold; }
textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }

img {border-style:none;}