/* =======================================================
	
	Mail and Host Website
	Kuwait Canadian Consulting Group
	Developed by Didats Triadi
	
======================================================= */


/* ------ HTML Tags ------ */
body {
	font:13px arial,verdana,sans-serif;
	margin:0px;
	padding:0px;
	text-align:center;
	background:#FFF url("../images/bg_body.jpg") repeat-x 0px 130px;
	color:#535353;
}

h1,h2,h3,h4,h5,h6 {
	margin:0px;
	padding:0px;
}
div,p,td,span {
	font:13px arial,verdana,sans-serif;
	line-height:18px;
}
hr {
	height:1px;
	background:#CCC;
	border:0px;
	
}

/* ------ Class Definition ------ */
.clear {
	clear:both;
}




/* ------ Layout ------ */
#container {
	width:810px;
	margin:0px auto;
	padding:0px;
	text-align:left;
	position:relative;
}

#header {
	position:relative;
	height:172px;
}
h1#title {
	background:transparent url("../images/bg_logo.jpg") no-repeat top left;
	width:243px;
	height:99px;
	text-indent:-9000px;
	display:block;
	position:absolute;
	top:30px;
	left:0px;
}
h1#title a {
	display:block;
	width:243px;
	height:99px;
}

.img-header {
	position:absolute;
	top:22px;
	right:0px;
}
.kccg {
	background:transparent url("../images/bg_kccg.gif") no-repeat top left;
	width:83px;
	height:70px;
	position:absolute;
	top:26px;
	right:150px;
	text-decoration:none;
	display:block;
}

/* Navigation */
#nav {
	position:absolute;
	height:30px;
	width:550px;
	bottom:5px;
	left:0px;
}
#nav ul {
	margin:0px;
	padding:0px;
}
#nav ul li {
	list-style:none;
	display:block;
	font:12px/30px arial,verdana,sans-serif;
	float:left;
}
#nav li a {
	display:block;
	float:left;
	text-indent:-9000px;
}

#nav li.home a {
	background:transparent url("../images/bg_home.jpg") no-repeat top left;
	width:68px;
}

#nav li.about a {
	background:transparent url("../images/bg_about.jpg") no-repeat top left;
	width:85px;
}

#nav li.faq a {
	background:transparent url("../images/bg_faq.jpg") no-repeat top left;
	width:68px;
}
#nav li.contact a {
	background:transparent url("../images/bg_contact.jpg") no-repeat top left;
	width:110px;
}

#nav li.home a.selected,
#nav li.home a:hover {
	background:transparent url("../images/bg_home_active.jpg") no-repeat top left;
}
#nav li.about a.selected,
#nav li.about a:hover {
	background:transparent url("../images/bg_about_active.jpg") no-repeat top left;
}
#nav li.faq a.selected,
#nav li.faq a:hover {
	background:transparent url("../images/bg_faq_active.jpg") no-repeat top left;
}
#nav li.contact a.selected,
#nav li.contact a:hover {
	background:transparent url("../images/bg_contact_active.jpg") no-repeat top left;
}


/* Top Content */

#topcontent {
	height:190px;
	position:relative;
	padding-top:20px;
	width:580px;
}

#topcontent h2 {
	text-indent:-9000px;
	background:transparent url("../images/bg_wizard.gif") no-repeat top left;
	width:252px;
	height:25px;
	position:relative;
	top:-10px;
}

#topcontent p {
	font:14px arial,verdana,sans-serif;
	line-height:20px;
	color:#E8D4D4
}

#topcontent a.calculate {
	width:159px;
	height:41px;
	background:transparent url("../images/bg_calculate_button.jpg") no-repeat top left;
	display:block;
	margin-top:0px;
	text-indent:-9000px;
}

/* ------ Content area ------ */
#content {
	position:relative;
	padding-top:10px;
	padding-bottom:10px;
}

#the-top {
	position:relative;
	margin-bottom:20px;
	padding-top:20px;
}
#the-top-int {
	position:relative;
	margin-bottom:0px;
	padding-bottom:0px;
}

#lefttop {
	width:550px;
	position:relative;
	float:left;
}

#lefttop img {
	float:left;
}
#lefttop .desc {
	float:right;
	width:480px;	
}
#lefttop h2.calculate {
	width:271px;
	height:17px;
	background:transparent url("../images/bg_calculate.gif") no-repeat top left;
	text-indent:-9000px;
	margin-bottom:10px;
}
#lefttop h2.choosing {
	width:341px;
	height:17px;
	background:transparent url("../images/bg_choosing.gif") no-repeat top left;
	text-indent:-9000px;
}

/* Right on top */
#righttop {
	width:210px;
	float:right;
	position:relative;
	text-align:right;
}
#righttop h4 {
	font:14px arial,verdana,sans-serif;
}
#righttop h4 strong {
	color:#990000;
}
.result {
	width:210px;
	height:85px;
	background:transparent url("../images/bg_result.jpg") no-repeat top right;
	text-align:center;
	font:28px arial,verdana,sans-serif;
	color:#990000;
	float:right;
	padding-top:20px;
}
.bottom {
	width:210px;
	height:85px;
	background:transparent url("../images/bg_result.jpg") no-repeat top right;
	text-align:center;
	font:28px arial,verdana,sans-serif;
	color:#990000;
	padding-top:20px;
}
.error,
.form-error {
	float:left;
	width:500px;
	font:14px arial,verdana,sans-serif;
	color:#990000;
	background:transparent url("../images/error.png") no-repeat top left;
	padding-left:20px;
}

/* Tabulasi */
#tabs {
	background:transparent url("../images/bg_tab.jpg") no-repeat top center;
	height:35px;
	margin-bottom:20px;
	position:relative;
}
#tabs ul {
	margin:0px;
	padding:0px;
	position:relative;
	left:15px;
	height:35px;
}
#tabs ul li {
	font:12px/34px arial,verdana,sans-serif;
	display:block;
	height:34px;
	line-height:34px;
	float:left;
	position:relative;
	bottom:6px;
	margin-right:5px;
}
#tabs li a {
	display:block;
	float:left;
	height:34px;
	text-indent:-9000px;
}
#tabs li.hosted a{
	background:transparent url("../images/bg_hosted_off.gif") no-repeat top left;
	width:145px;
}
#tabs li.hosted a.selected{
	background:transparent url("../images/bg_hosted.gif") no-repeat top left;
	width:145px;
}
#tabs li.hosted a:hover{
	background:transparent url("../images/bg_hosted.gif") no-repeat top left;
	width:145px;
}


#tabs li.dedicated a {
	background:transparent url("../images/bg_dedicated.gif") no-repeat top left;
	width:167px;
}
#tabs li.dedicated a.selected {
	background:transparent url("../images/bg_dedicated_on.gif") no-repeat top left;
	width:167px;
}
#tabs li.dedicated a:hover {
	background:transparent url("../images/bg_dedicated_on.gif") no-repeat top left;
	width:167px;
}

/* Mainbody */
#mainbody {
	position:relative;
	left:15px;
	width:775px;
	top:10px;
	padding-bottom:50px;
}
#mainbody .row img {
	cursor:pointer;
}
#mainbody p {
	clear:both;
}
p label {
	width:230px;
	float:left;
}
p strong {
	float:left;
	width:100px;
}

/* Question */
/*
.question {
	position:relative;
	margin-bottom:30px;
	border-bottom:1px solid #efefef;
	padding-bottom:25px;
	clear:both;
	height:auto !important;
	height:230px;
	min-height:230px;
}
*/
.wrapquestion {
	height:auto !important;
	height:270px;
	min-height:270px;
}
.question {
	position:relative;
	width:365px;
	margin:0px;
	padding:0px;
	float:left;
	margin-right:15px;
	padding-bottom:20px;
	
}
.question p {
	margin:0px;
	padding:0px;
}

#detail {
	padding-bottom:30px;
	width:300px;
	float:left;
}
#detail h3,
#theform h3 {
	color:#990000;
	font:16px arial,verdana,sans-serif;
	margin-bottom:10px;
}

#theform {
	width:450px;
	float:right;
	height:270px;
	padding-bottom:20px;
}
ul.thedetails {
	margin:0px;
	padding:0px;
}
ul.thedetails li {
	list-style:none;
	padding-left:20px;
	background:transparent url("../images/tick.png") no-repeat 0px 3px;
	font:14px/25px arial,verdana,sans-serif;
	height:auto !Important;
	height:25px;
	display:block;
	border-bottom:1px solid #CCC;
}

#result .result {
	width:210px;
	text-align:center;
	padding:8px 0px;
	font:20px arial,verdana,sans-serif;
	border:1px solid #CCC;
	background:#EFEFEF !important;
	height:35px;
}

.thebox {
	position:relative;
	padding-bottom:25px;
	background:#F4F4F4 url("../images/bg_question.jpg") no-repeat bottom left;
	width:365px;
}
.thebox h3 {
	text-indent:-9000px;
	position:relative;
}
.info {
	width:388px;
	float:right;
	position:relative;
}
.info h4{
	font:16px arial,verdana,sans-serif;
	color:#990000;
}
.info p {
	margin:0px;
	padding:0px;
	margin-top:3px;
}
.thebox-content {
	width:330px;
	position:relative;
	top:8px;
	left:25px;
	padding-top:15px;
}
.thebox-content p {
	margin:3px 0px;
}

.choice {
	position:relative;
	margin-top:10px;
}
.choice ul {
	margin:0px;
	padding:0px;
	position:relative;
	
}
.choice ul li {
	list-style:none;
	display:block;
	padding:3px 0px;
	clear:both;
}
li ul.sub {
	position:relative;
	left:20px;
	width:265px;
}
ul.sub li {
	width:80px;
	float:left;
	clear:none;
}
img.radio {
	cursor:pointer;
	position:relative;
	top:2px;
}
.choice li strong {
	font:bold 15px arial,verdana,sans-serif;
}
img.img {
	position:relative;
	top:5px;
}



#q1 h3 {
	background:transparent url("../images/bg_operatingsystem.gif") no-repeat top left;
}
#q2 h3 {
	background:transparent url("../images/bg_database.gif") no-repeat top left;
}
#q3 h3 {
	background:transparent url("../images/bg_dns.gif") no-repeat top left;
	width:300px;
}
#q4 h3 {
	background:transparent url("../images/bg_domain.gif") no-repeat top left;
}
#q5 h3 {
	background:transparent url("../images/bg_email.gif") no-repeat top left;
}
#q6 h3 {
	background:transparent url("../images/bg_ipaddress.gif") no-repeat top left;
}
#q7 h3 {
	background:transparent url("../images/bg_ssl.gif") no-repeat top left;
}

.submit {
	background:transparent url("../images/bg_submit.jpg") no-repeat top left;
	border:0px;
	padding:0px;
	margin:0px;
	width:141px;
	height:36px;
	cursor:pointer;
	float:right;
}
.question .submit {
	float:none !important;
}
.question .bottom {
	float:none !important;
	margin:0px auto;
}

#footer {
	background:transparent url("../images/bg_footer.jpg") repeat-x top left;
	height:150px;
	position:relative;
	text-align:center;
}
#footer-content {
	width:810px;
	margin:0px auto;
	text-align:left;
	position:relative;
	height:150px;
}
#footer p {
	position:absolute;
	top:90px;
	left:0px;
	margin:0px;
	padding:0px;
	color:#FFF;
}
#footer a {
	color:#FFF;
}


/* Submit Page */
h1#pagetitle {
	background:transparent url("../images/next.png") no-repeat top left;
	height:80px;
}

/* Form Item */
.form-item {
	padding:10px 0px;
	border-bottom:1px solid #CCC;
	position:relative;
}
.form-item label {
	float:left;
	width:150px;
	position:relative;
	top:2px;
}

.page-entry h1 {
	font:30px arial,georgia,verdana,sans-serif;
	color:#990000;
	text-transform:uppercase;
	letter-spacing:-1px;
	margin-bottom:15px;
}
.page-entry h3 {
	font:bold 16px arial,verdana,sans-serif;
	color:#000;
}
.page-entry p {
	line-height:22px;
	font-size:14px;
}


/* Login page */
#login {
	position:absolute;
	margin:0px auto;
	width:400px;
	height:200px;
	background:#FFF;
	top:35%;
	left:5%;
	text-align:left;
}
#login-area {
	width:380px;
	position:relative;
	left:10px;
	padding:15px 0px;
}
#login h1 {
	font:28px arial,verdana,sans-serif;
	color:#990000;
}
#error {
	position:absolute;
	margin:0px auto;
	width:400px;
	height:200px;
	top:35%;
	right:5%;
	text-align:left;
	font:20px arial,verdana,sans-serif;
	color:#FFF;
}

/* Same height */
#q1,#q2 {
	height:auto !important;
	height:250px;
	min-height:250px;
}
#q3,#q4 {
	height:auto !important;
	height:180px;
	min-height:180px;
	position:relative;
	top:20px;
}
#q5,#q6 {
	height:auto !important;
	height:190px;
	min-height:190px;
}

/* Spesification blocks */
div.spec {
	float:left;
	width:380px;
	margin-right:25px;
	margin-bottom:10px;
	cursor:pointer;
	position:relative;
}
div.spec h4,
div.spec_hover h4 {
	font:bold 18px arial,verdana,sans-serif;
	color:#000;
	margin-bottom:10px;
	background:#EFEFEF;
	padding:7px 0px;
	text-align:center;
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
}
div.spec ul,
div.spec_hover ul {
	margin:0px;
	padding:0px;
}
div.spec ul li,
div.spec_hover ul li {
	list-style:none;
	margin-bottom:3px;
	border-bottom:1px solid #CCC;
	padding:4px 0px;
}
div.spec img {
	position:absolute;
	top:40%;
	right:5px;
}

#content h3 {
	line-height:25px;
	height:auto !Important;
	height:25px;
	min-height:25px;
	display:block;
	
}
#content div.answer{
	padding:8px 0px;
	line-height:20px;
	font:13px arial,verdana,sans-serif !important;
}
div.answer li {
	font:14px arial,verdana,sans-serif;
	line-height:20px;
}
div.faq h3 {
	cursor:pointer;
}



/* Interior page */
body.int {
	background:#FFF url("../images/bg_body_int.jpg") repeat-x 2px 134px !important;
}
#topcontent-int {
	height:104px;
	position:relative;
	top:-5px;
	background:transparent url("../images/bg_topcontent_int.jpg") no-repeat top left;
}
#topcontent-int h1 {
	font:24px/104px arial,verdana,sans-serif;
	text-transform:uppercase;
	height:104px;
	display:block;
	mint-height:104px;
	color:#FFF;
}
body.int #content {
	padding-top:30px;
}
body.int .kccg {
	position:absolute;
	right:0px;
}
body.int #nav {
	bottom:6px;
}


/* --- Checkbox --- */
.checkbox-img {
	cursor:pointer;
	position:relative;
	top:2px;
}
.loadnew {
	background:#999;
	color:#FFF;
	padding:3px;
	font-size:11px;
	text-decoration:none;
	position:relative;
	top:-10px;
}

.loading-info p {
	background:#FFFFCC;
	padding:5px 0px;
	font-weight:bold;
	color:#990000;
	padding-left:5px;
}