/* 
--------------------------------------------------
	CONVERTTOXHTML CSS DOCUMENT
	Author: Armono Wibowo
	Last Update: Jan, 2009
-------------------------------------------------- 
*/

/* --------------------------------
	01. GLOBAL BROWSER RESET
-------------------------------- */

@import "reset.css";

/* --------------------------------
	02. COMMON STYLE
-------------------------------- */

body {
	background: #555;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 62.5%;	/* ems rules */
	color: #333;
}

a {
	text-decoration: none;
	color: #b6001c;
}
a:hover {
	text-decoration: underline;
}

p {
	margin: 10px 0 0;
	font-size: 1.2em;
	line-height: 18px;
}


/* --------------------------------
	03. STRUCTURE
-------------------------------- */


#wrapper {
	margin: 0 auto; padding-bottom: 30px;
	width: 820px;
	overflow: hidden;
}
	#wrapper img.splash {
		position: relative;
		top: 0; left: 385px;
		margin-bottom: -333px;
	}

#container {
	margin: 60px 0 20px 0;
	background: #000102 url("../images/bg_bottom.gif") bottom no-repeat;
}
	.container-inner {
		padding-bottom: 10px;
		background: url("../images/bg_top.gif") top no-repeat;
	}



/* 	HEADER
-------------------------------- */
#header {
	
}
	h1 {
		margin-left: 40px;
		font-size: 3.0em; font-weight: normal;
		letter-spacing: -0.02em;
		line-height: 90px;
	}
	h1 a {
		color: #eceded;
	}
		

/* 	CONTENT
-------------------------------- */
#content {
	margin: 0 10px;
	background: #fff;
	overflow: hidden;
	height: 1%;
}

#content .services {
	background: url("../images/bg_prologue.jpg") no-repeat;
	padding: 23px 30px 0 30px;
	height: 157px;
	overflow: hidden;
}
	.services h2 {
		background: url("../images/whatwedo.png") no-repeat;
		width: 140px; height: 20px;
		display: block;
		text-indent: -9000px;
	}
	.services p {
		font-size: 1.3em;
		color: #021c37;
		width: 330px;
	}


/* Nav
-------------------------------- */
.nav {
	margin: 0;
	height: 51px;
	position: relative;
	background: url("../images/navigation.jpg") no-repeat;
	overflow: hidden;
}
.nav ul {
	list-style: none;
	margin: 0; padding: 0;
}

	.nav li span {
    	display: none;
    }
	.nav li, .nav li a {
		height: 51px;
		display: block;
    }
	.nav li {
		float: left;
		list-style: none;
		display: inline;
    }

    .nav_home {width: 103px;}
    .nav_examples {width: 178px;}
    .nav_faq {width: 82px;}
    .nav_contact {width: 148px;}
	.nav_empty {width: 150px;}
	.nav_order {width: 139px;}
	
	.nav_home a:hover, body#home .nav_home {background: url("../images/navigation.jpg") 0px -51px no-repeat;}
    .nav_examples a:hover, body#examples .nav_examples {background: url("../images/navigation.jpg") -103px -51px no-repeat;}
    .nav_faq a:hover, body#faq .nav_faq {background: url("../images/navigation.jpg") -281px -51px no-repeat;}
    .nav_contact a:hover, body#contact .nav_contact {background: url("../images/navigation.jpg") -363px -51px no-repeat;}
	.nav_order a:hover, body#order .nav_order {background: url("../images/navigation.jpg") -661px -51px no-repeat;}



/* Main Content
-------------------------------- */
.maincont {
	overflow: hidden;
	height: 1%;
	background: #efefef url("../images/bg_cont.gif") no-repeat;
	/*border-bottom: 1px solid #dedede;*/
}
	.maincont .feature {
		float: left;
		margin: 30px 0 25px 20px; padding: 20px;
		width: 198px; height: 239px;
		background: #fff;
		border: 1px solid #ccc;
	}
	.maincont .featuretwo {
		float: left;
		margin: 30px 0 25px 20px; padding: 20px 0;
		width: 238px; height: 239px;
		background: #fff;
		border: 1px solid #ccc;
	}
	.maincont .featurethree {
		float: left;
		margin: 30px 0 25px 20px; padding: 0;
		width: 240px; height: 280px;
		background: #fff url("../images/bg_promo.gif") repeat-y;
		border-bottom: 1px solid #ccc;
	}

		.feature ul {
			margin: 9px 0 0; padding: 0;
			list-style: none;
		}
		.feature ul li {
			display: block;
			width: auto;
			margin: 0; padding-left: 20px;
			font-size: 1.2em;
			line-height: 18px;
			text-indent: 0;
			background: url("../images/bullet.gif") 0 2px no-repeat;
		}
		.featuretwo ul {
			margin: 0; padding: 0;
			list-style: none;
			background: url("../images/bg_steps.jpg") left repeat-y;
		}
		.featuretwo ul li {
			display: block;
			width: auto;
			margin: 0; padding: 12px 18px 0 100px;
			font-size: 1.4em; font-weight: bold;
			line-height: 18px;
			height: 56px;
			text-indent: 0;
			border-top: 1px solid #dedede;
		}
		.featuretwo ul li.stepone {
			background: url("../images/step1.jpg") top left no-repeat;
		}
		.featuretwo ul li.steptwo {
			background: url("../images/step2.jpg") top left no-repeat;
		}
		.featuretwo ul li.stepthree {
			background: url("../images/step3.jpg") top left no-repeat;
		}
		
		
		.feature h3, .featuretwo h3, .featurethree h3 {
			display: block;
			text-indent: -9000px;
		}
		h3.quality {
			background: url("../images/icon_quality.gif") no-repeat;
			width: 193px; height: 43px;
		}
		h3.howitworks {
			background: url("../images/icon_howitworks.gif") no-repeat;
			width: 151px; height: 43px;
			margin: 0 0 9px 20px;
		}
		h3.promo {
			background: url("../images/promo.jpg") no-repeat;
			width: 240px; height: 110px;
		}
		
		.featurethree p a {
			margin-left: 70px;
			display: block;
			text-indent: -9000px;
			background: url("../images/button_order.gif") no-repeat;
			width: 100px; height: 30px;
		}
		
	/* TABLE */
	.tabholder {
		width: 200px; height: 110px;
		margin: 0 20px 5px 20px;
		font-size: 1.3em;
		background: url("../images/bg_tableprice.gif") no-repeat;
	}
	.tabcont {
		
	}
	.tabtxt {
		padding: 11px 0;
		text-align: center;
	}
		.col1 {
			width: 70px;
			font-weight: bold;
		}
		.col2 {
			width: 65px;
			text-decoration: line-through;
		}
		.col3 {
			width: 65px;
			font-weight: bold;
			color: #2f79b6;
		}
		.col4 {
			width: 65px;
			font-weight: bold;
		}
		
	.maincont .main, .maincont .aside, .maincont .merge {
		float: left;
		margin: 30px 0 25px 20px; padding: 20px;
		width: 458px;
		background: #fff;
		border: 1px solid #ccc;
	}
	.maincont .aside {
		width: 198px;
	}
	.maincont #sidebar {
		margin-left: 540px; padding: 20px;
		width: 198px;
		background: #fff;
		border: 1px solid #ccc;
		position: absolute;
		top: 422px; left: auto;
	}
	.maincont .merge {
		float: none;
		margin: 30px 20px 25px 20px;
		width: 718px;
	}
		.merge .alertbox {
			padding: 20px;
			background: #edf4f9;
		}
		.alertbox h3 {
			margin: 0; padding-bottom: 15px;
			font-size: 1.6em;
			color: #006aa7;
			border-bottom: 1px solid #d6e0e8;
		}
		.alertbox p {
			margin: 10px 0;
			font-size: 1.4em;/* font-weight: bold;*/
			color: #24455e;
			line-height: 20px;
		}
		
	.main h3, .aside h3, #sidebar h3 {
		font-size: 2.0em; font-weight: normal;
		letter-spacing: -0.02em;
	}
	.main h4 {
		margin: 15px 0 0; padding-top: 15px;
		font-size: 1.6em;
		color: #006aa7;
		border-top: 1px solid #e5e5e5;
	}
	.main p, .aside p {
		margin: 0;
		color: #555;
	}
	.main img {
		padding: 15px 0 0;
	}
	body#contact p, body#order p, .aside p {
		margin: 10px 0 0;
	}
	.main p.question {
		margin: 15px 0 0;
		font-weight: bold;
		color: #333;
	}
	
	.main ul {
		margin: 6px 0 0; padding: 0;
		list-style: none;
	}
	.main ul li {
		display: block;
		width: auto;
		margin: 0; padding-left: 16px;
		font-size: 1.2em;
		line-height: 18px;
		text-indent: 0;
		color: #555;
		background: url("../images/bullet2.gif") 0 3px no-repeat;
	}
	
	.main .shortcut {
		margin-top: -20px;
		float: right;
	}
		.shortcut p a {
			display: block;
			padding: 2px 5px;
			color: #4a7e9a;
			background: #edf4f9;
			border: 1px solid #d6e0e8;
		}
		.shortcut p a:hover {
			color: #fff;
			background: #2f79b6;
			border: 1px solid #24455e;
			text-decoration: none;
		}
		
	#sidebar p.paypal {
		margin-top: -10px; padding: 10px 0 0 140px;
		background: url("../images/paypal.gif") no-repeat right;
		width: 56px; height: 17px;
		display: block;
		text-indent: -9000px;
	}
	#sidebar p.payment {
		font-size: 1.1em;
		/*font-style: italic;*/
		color: #888;
		line-height: 14px;
	}
		
		
/* Side Content
-------------------------------- */
.sidecont {
	overflow: hidden;
	height: 1%;
	background: url("../images/bg_cont_bottom.gif") bottom no-repeat;
}
	.sidecont .benefits {
		float: left;
		margin: 25px 0 30px 20px;
		width: 240px;
		background: #efefef url("../images/bg_benefits_bottom.gif") bottom no-repeat;
	}
	.benefits .benefits-inner {
		padding: 20px;
		background: url("../images/bg_benefits_top.gif") top no-repeat;
	}
		.benefits h3 {
			background: url("../images/whychooseus.gif") no-repeat;
			width: 126px; height: 18px;
			display: block;
			text-indent: -9000px;
		}
		.benefits ul {
			margin: 9px 0 0; padding: 0;
			list-style: none;
		}
		.benefits ul li {
			display: block;
			width: auto;
			font-size: 1.2em; font-weight: bold;
			line-height: 24px;
			text-indent: 0;
		}
		
	.sidecont .testimonial {
		float: left;
		margin: 10px 0 30px 20px;
		width: 500px;
	}
		.testimonial .comment {
			margin: 15px 0 0;
			overflow: hidden;
			height: 1%;
		}
			.comment .avatar {
				float: left;
				padding: 6px 0 0 14px;
				width: 56px;
			}
			.comment .bubble {
				float: right;
				background: url("../images/bg_bubble_bottom.gif") bottom no-repeat;
				width: 430px;
			}
				.bubble .bubble-inner {
					padding: 15px 20px 15px 30px;
					background: url("../images/bg_bubble_top.gif") top no-repeat;
				}
					.bubble-inner h4 {
						font-size: 1.2em; font-weight: normal;
						color: #24455e;
					}
					.bubble-inner p {
						margin: 4px 0 0;
						color: #4a7e9a;
					}
					
.othercont {
	background: #efefef url("../images/bg_cont_bottom2.gif") bottom no-repeat;
	padding-bottom: 6px;
	color: #efefef;
}
		

/* 	FOOTER
-------------------------------- */
#footer {
	margin: 0; padding: 0 30px;
	color: #b8b8b8;
	overflow: hidden;
}
#footer .copyright {
	float: left;
	width: 320px;
}
#footer .poweredby {
	float: right;
	width: 300px;
}
	#footer p {
		margin: 0 !important;
	}
	#footer .poweredby p {
		text-align: right;
	}
	

/* 	FORM CONTROLLER
-------------------------------- */	
form {
	margin: 0;
}


/* Inquiry Form
-------------------------------- */
form div.inquiry {
	margin: 15px 0 0; padding: 10px 0;
	background: #edf4f9;
	overflow: hidden;
	height: 1%;
}
body#order form div.inquiry {
	margin: 15px 0 0; padding-top: 0;
}
form div.inquiry h4 {
	margin: 0; padding: 10px 15px;
	font-size: 1.6em;
	color: #fff;
	background: #2f79b6;
	border: none;
}
form div.inquiry p {
	margin: 0; padding-left: 120px;
	font-size: 1.2em; font-style: italic;
}
form div.inquiry p.option {
	margin: 0; padding-left: 15px;
	font-size: 1.4em; font-style: normal; font-weight: bold;
	color: #006aa7;
}
form div.inquiry label, form div.inquiry input, form div.inquiry textarea {
	float: left;
	margin: 0;
	font-size: 1.4em; font-family: Helvetica, Arial, Verdana, sans-serif;
}
form div.inquiry label {
	display: block;
	width: 105px;
	margin: 10px 15px 0 0; padding: 5px 0 0;
	text-align: right;
	font-size: 1.4em; font-weight: bold;
	color: #24455e;
}
form div.inquiry label.expand {
	float: none;
	width: auto;
	margin: 10px 15px -10px 120px;
	text-align: left;
}
form div.inquiry input {
	width: 190px;
}
form div.inquiry textarea {
	width: 290px;
}

form div.inquiry br {
	clear: left;
}
form div.inquiry hr {
	margin: 10px 0 0;
	border: solid #fff; border-width: 1px 0 0;
	height: 0;
}
form div.inquiry input.tfield, form div.inquiry textarea.tarea {
	margin: 10px 0 0; padding: 4px;
	background: #fff;
	border: 1px solid #d6e0e8;
	color: #5e7e9a;
}
form div.inquiry input.radio, form div.inquiry span {
	float: left;
	margin: 10px 10px 0 120px; padding: 0;
	width: auto;
}
form div.inquiry span {
	margin: 10px 0 0; padding: 0;
	font-size: 1.2em;
}
form div.inquiry input.button {
	margin: 10px 0 15px 0; padding: 3px 6px;
	background: #bd001e;
	color: #fff3ca;
	width: auto;
}
.valid { 
	border: 2px solid #6fc900 !important;
}
.invalid { 
	border: 2px solid #d70000 !important; 
}

/* Total Price
-------------------------------- */
form div.totalprice {
	margin: 15px 0 0;
	height: 36px;
	overflow: hidden;
}
form div.totalprice label, form div.totalprice input {
	float: left;
	margin: 0;
	font-size: 2.0em; font-family: Helvetica, Arial, Verdana, sans-serif;
}
form div.totalprice label {
	display: block;
	width: 86px;
	margin: 0; padding: 9px;
	font-weight: bold;
	color: #7ebe40;
	background: #edf4f9;
}
form div.totalprice input.button {
	margin: 0; padding: 10px;
	font-size: 1.6em; 
	color: #fff3ca;
	background: #bd001e;
	width: auto;
	cursor: pointer;
}