@charset "utf-8";
/* ------------------------------------------ CSS Document 
Developed for project 	-->			Messageboard.nl
Developed by 			-->			IT Outsourcing Asia
Last update				-->			20 August 2010
----------------------------------------------------------*/

*, body, div, p, ul, ol, li, form, h1, h2, h3, h4, h5, h6, span, em{ margin:0; padding:0;}
body{ background:#fff; color:#323232; font: normal 62.5% /1.6em Arial, Helvetica, sans-serif;}

a{ outline:0; text-decoration:none; color:#005292;}
a:hover{outline:none; text-decoration:underline;}
a img{border:none;}
li{list-style:none;}
input, select, button, ul.search-domain li, div.search-country{color:#464646;}
select{ font-size:11px;}

/* Headings */
h1{ font-size:24px; font-family:arial black; font-weight:normal; line-height:1em;}
h2{ font-size:18px;}
h3{ font-size:14px;}
h4{ font-size:12px;}

/* Fixers */
.clear{ clear:both; height:1px; line-height:1px; font-size:1px;}
.spacer{ clear:both; height:10px; width:10px; font-size:1px;}
.hr-gap10{ clear:both; height:10px; font-size:1px;}
.margin-5-15{ margin:5px 15px;}
.pad-50{ padding:5px 0;}

/* Layouting */
.wraps-site{ width:920px; margin:0 auto;}
.wraps-header{ background-position:left 50px; background-color:#fff; height:300px; color:#fff; font-size:1.4em;}
.wraps-content{ clear:both; padding:10px; font-size:1.1em; z-index:1000;}
.wraps-footer{ clear:both; padding:0 10px; width:900px; margin:30px auto 0 auto;}

/* Positioning */
.wraps-header, .wraps-cvbox, li.dot, .wraps-process .arrow, .wraps-form, .fields{ position:relative;}
h1.logo, .wraps-intromsg, .wraps-search-box, ul.nav, div.search-country, h1.free-packet, h1.plus-packet, img.price-free-pkt, img.price-plus-pkt, img.price-premium-pkt, img.price-gold-pkt, p.btn-left-pkt, p.btn-right-pkt, .wraps-login,.info-mandatory, label.error{position:absolute;}
h1.logo a, h1.intro-title, h1.search-title, a.go,  a.more-info, a.order-now, a.order-free, h1.demo, h1.login, h1.support, a.demo, a.login, a.support, button.next-step, button.make-payment, button.submit, input.submit, .err_css span.img_span, .succ_css span.img_span{ text-indent:-999em;}
li.index, li.hulp, li.demo, li.contact, li.prijzen, li.index-on, li.hulp-on, li.demo-on, li.contact-on, li.prijzen-on{ text-indent:999em;}

/* Spriting */
.wraps-header, .wraps-login a.links, .wraps-login a:hover.links, p.user-info a.links, p.user-info a:hover.links{background-image:url(../images/header-bg.png); background-repeat:no-repeat;}
h1.intro-title, h1.search-title, h1.demo, h1.login, h1.support{ background-image:url(../images/heading-sprite.png); background-repeat:no-repeat;}
.wraps-search-box, div.search-country, .packet-sep, .col-1, .col-2, .col-3{background-image:url(../images/mix-sprite.png); background-repeat:no-repeat;}
a.go, a.more-info, a.order-now, a.demo, a.login, a.support, .wraps-col-3 p.login-form span, .wraps-login input.login-btn, button.next-step, button.make-payment, button.submit, input.submit, .wraps-process li.done, .wraps-process li.doing, .wraps-process li.todo, .info-mandatory, label.error, .general-info, button.btn-global span, button.btn-global span em, .err_css span.img_span, .succ_css span.img_span, .btned span, .btned span a{ background-image:url(../images/btn-sprite.png); background-repeat:no-repeat;}
button.btn-global2 span, button.btn-global2 span em { background-image:url(../images/button.png); background-repeat:no-repeat;}
li.sep, li.index, li.hulp, li.demo, li.contact, li.prijzen, li.index-on, li.hulp-on, li.demo-on, li.contact-on, li.prijzen-on{ background-image:url(../images/nav.png); background-repeat:no-repeat;}
.cv-top, h1.title, .cv-btm, .f-cv-t, .f-cv-b, .block-main .cv-top, .block-main .cv-btm, .right-col .cv-top, .right-col .cv-btm{ background-image:url(../images/cv-sprite.png); background-repeat:no-repeat;}

.wraps-header{z-index:1003;}

/* Branding */
h1.logo{left:35px; top:10px; height:105px; width:395px; display:block;}
h1.logo a{ display:block; height:105px; width:395px; background:url(../images/logo-messageboard.png) no-repeat left top;}

/* Intro message */
.wraps-intromsg{ left:45px; top:135px; width:380px; padding:10px; height:auto;}
h1.intro-title{ background-position:left top; height:20px; margin-bottom:5px;}

/* Domain Search box */
.wraps-search-box{ top:113px; right:24px; background-position:left top; width:430px; height:105px; z-index:1005;}
h1.search-title{ background-position: left -25px; height:20px; margin:15px 0 0 25px}
ul.search-domain{ margin:25px 0 0 35px; width:400px;}
ul.search-domain li{ float:left; display:inline-block;}
li.domain input{width:253px; padding:0 2px; margin-right:12px;}
li.dot{ width:50px; margin-right:20px;}
select.dot-options{float:left; margin-right:5px; margin-top:2px; border:0px; width:50px;}
img.dot-btn{ margin-top:4px;}
a.go{ background-position:left 2px; height:20px; width:20px; background-color:transparent;}
li.domain input, select.dot, a.go{ border:0; height:20px; line-height:20px; display:block; float:left;}

/* Navigation */
ul.nav{ left:35px; bottom:20px; height:38px; line-height:38px; width:625px;}
ul.nav li{ display:inline-block; float:left; height:100%;}
li.sep{ background-position: -119px top; width:2px; font-size:1px;}
ul.nav a{ color:#fff; display:block; overflow:hidden;}

li.index, li.index-on{ width:118px;}
li.hulp, li.hulp-on{ width:105px;}
li.demo, li.demo-on{ width:118px;}
li.contact, li.contact-on{ width:125px;}
li.prijzen, li.prijzen-on{ width:148px;}

li.index{ background-position: 0 top;}
li.hulp{ background-position: -121px top;}
li.demo{ background-position: -228px top;}
li.contact{ background-position: -348px top;}
li.prijzen{ background-position: -485px top;}

li.index-on{ background-position: 0 -40px;}
li.hulp-on{ background-position: -121px -40px;}
li.demo-on{ background-position: -228px -40px;}
li.contact-on{ background-position: -348px -40px;}
li.prijzen-on{ background-position: -485px -40px;}

/* Search Country */
div.search-country{ background-position:left -105px; right:24px; bottom:20px; height:29px; padding-top:9px; width:185px; z-index:1004;}
select.country-option{ width:137px; padding-left:15px; margin-right:3px; float:left;}

/* Curved box */
.wraps-cvbox{margin:30px 0;}
h1.title, .cv-top{ background-position:left top; height:34px; border-bottom:2px solid #005292;}
.cv-bg{ padding:20px 0; border:2px solid #005292; border-width:0 2px;  width:auto; height:auto; overflow:hidden;}
.cv-btm{ background-position:-900px -31px; height:4px; width:900px; font-size:1px;}
.wraps-content .pages{ margin:0;}
.wraps-cvbox .pages{ padding:10px;}

/* Index page packket types */
.packet-left{ float:left; width:560px; font-size:1.2em;}
.packet-sep{ float:left; width:20px; background-position:right top; height:150px;}
.packet-right{ float:left; width:280px; padding-left:35px; font-size:1.2em;}

h1.free-packet{ left:240px; top:4px; color:#ffa10e; display:block;}
h1.plus-packet{ left:700px; top:4px; color:#ffa10e; display:block;}

img.price-free-pkt, img.price-premium-pkt{ left:150px; top:-26px;}
img.price-plus-pkt, img.price-gold-pkt{ right:206px; top:-26px;}

ul.packet-info{ width:210px; float:left; margin:0 30px 0 20px; font-size:0.8em; font-weight:bold;}
ul.packet-info li{ height:25px; line-height:25px; position:relative;}
ul.packet-info li img, ul.packet-info li span{ position:absolute; right:0;}

a.more-info{ background-position:left -18px; display:block; float:left; height:35px; width:142px; margin-right:10px; }
a.order-now{background-position:left -58px; display:block; float:left; height:38px; width:142px; }
a.order-free{background-position:left 0px; display:block; float:left; height:75px; width:185px; margin-top: -19px; }

p.btn-left-pkt{ clear:both; bottom:-18px; left:135px; height:35px;}
p.btn-right-pkt{ clear:both; bottom:-18px; right:15px; height:35px;} 

/* Index page 3 column box */
.wraps-col-3{ clear:both; height:auto; color:#fff; overflow:auto; padding-top:15px; font-size:1.3em;}
.col-1, .col-2, .col-3{ width:275px; float:left; margin-right:35px; height:152px; background-position:-5px -152px; overflow:hidden;}
.col-last{ margin-right:0px;}
h1.demo{ background-position: left -50px; height:25px; width:165px;}
h1.login{ background-position: left -75px; height:25px; width:115px;}
h1.support{ background-position: left -100px; height:25px; width:195px;}
.wraps-col-3 h1{ text-align:center; margin:10px auto;}
.wraps-col-3 p{margin:15px 10px; text-align:center; font-size:0.9em;}
.wraps-col-3 p.login-form{ margin:15px 10px 0;}
.wraps-col-3 p.login-form label{ clear:left; float:left; text-align:right; width:90px; padding-right:10px;}
.wraps-col-3 p.login-form span{ float:left; background-position:-3px -225px; margin-bottom:5px; border:none; height:22px; line-height:22px; width:145px; padding-left:1px; background-color:transparent; overflow:hidden;}
.wraps-col-3 p.login-form span input{ border:0px; padding:0; margin:2px 0 0 2px;  /margin:2px 0 0 -10px; height:20px; float:left; width:140px;}
p.user-info a.links{ background-position:-700px -200px; padding:1px 4px; color:#A9D9E9; text-decoration:none;  border:1px solid #2F72A6; border-width:2px 1px 1px;}
p.user-info a:hover.links{ background-position: -700px -150px; color:#fff;  border:1px solid #54ABCD;  border-width:2px 1px 1px;}

a.demo, a.support{display:block; clear:both; height:35px; width:145px; margin:23px auto 0 auto;}
a.login{display:block; clear:both; height:35px; width:145px;  margin:0 auto;}
a.demo{ background-position:left -100px;}
a.login{ background-position:left -141px;}
a.support{ background-position:left -184px;}

.wraps-col-3 a{ color:#fff; text-decoration:underline;}

/* Banner Log In */
.wraps-login{ right:35px; top:73px;}
.wraps-login input.username, .wraps-login input.password{margin-right:10px; font-size:11px; background:none; color:#54abcd; border:1px solid #236099; padding:2px 5px;}
.wraps-login input.username{width:150px;}
.wraps-login input.password{width:160px;}
.wraps-login input.login-btn{ border:none; background-position:-3px -257px; color:#54abcd; width:54px; height:19px; line-height:15px; padding-bottom:3px; background-color:transparent; font-weight:bold; font-size:10px; cursor:pointer;}
.wraps-login a.links{ background-position:-700px -200px; padding:1px 4px; color:#A9D9E9; text-decoration:none; font-size:0.8em; border:1px solid #2F72A6; border-width:2px 1px 1px; line-height:20px; height:20px;}
.wraps-login a:hover.links{ background-position: -700px -150px; color:#fff;  border:1px solid #54ABCD;  border-width:2px 1px 1px;}

/* Inner Pages Columns */
.block-main{ margin-right:300px;} /* Main content */
.block-main h1.title{ display:block; width:590px;}
.block-main .cv-btm{ display:block; width:600px;}
.block-main h1.title{ background-position:-1800px 0; height:34px;}
.block-main .cv-bg{width:576px; border:2px solid #005292; border-width:0 2px; padding:10px;}
.block-main .cv-btm{ background-position:-2400px -31px; height:4px;}

.right-col{ float:right; width:290px;} /* Right column content */
.right-col .cv-top, .right-col .cv-btm{ display:block; width:290px;}
.right-col .cv-top{ background-position:-2400px top; height:6px; font-size:1px; overflow:hidden; border:none;}
.right-col .cv-bg{ border:2px solid #005292; border-width:0 2px; background:#fff; width:286px; padding:1px 0; overflow:visible;}
.right-col .cv-btm{ background-position:-2400px -6px; height:6px; font-size:1px; overflow:hidden;}

/* Inner Page Specific */
h1.title{color:#ffa10e; padding-left:10px; line-height:33px;}
.pages p, .block-main p{ margin-bottom:5px;}
.right-col h2.done, .right-col h2.doing, .right-col h2.todo{font-size:1.2em; height:23px; line-height:23px; margin:1px 8px; padding:0 5px;}
.right-col h2.done{ background:#ffa10e;}
.right-col h2.doing{ background:#005292; color:#fff;}
.right-col h2.todo{ background:#D1D1D1; color:#6C6C6C;}
p.step-detail{margin:5px 25px 10px 25px; line-height:2em;}
p.step-detail span.title{ padding-right:5px; font-weight:bold;}
p.step-detail span.desc{ padding-left:5px;}
.new_domain, .sub_domain, .ex_domain{ padding:0 0 5px 0; clear:both;}

/* Forms */
.wraps-form{ padding:10px;  }
.wraps-form li { list-style-type:circle; margin-left:40px; }
.wraps-form label{ float:left; clear:left; font-weight:bold; width:130px;}
.wraps-form .text-box, .wraps-form .text-area, .wraps-form .add-file, .wraps-form select{ margin-bottom:10px; border:1px solid #d1d1d1; width:270px;}
.wraps-form select{width:277px;}
.text-box, .text-area, .add-file, .select-box{ margin-bottom:5px; border:1px solid #d1d1d1;}
.wraps-form .add-file{ background:none; border:1px solid #d1d1d1;}
.btn{ margin:5px 0 5px 125px;}
span.mandatory, span.required{ color:#cc0000; font-weight:bold;}
button.next-step{ background-position:left -284px; height:35px; width:115px; border:0px; background-color:transparent; cursor:pointer;}
button.make-payment{ background-position:left -397px; height:35px; width:118px; border:0px; background-color:transparent; cursor:pointer;}

button.submit, input.submit{ background-position:-1px -328px; height:32px; width:66px; border:0px; background-color:transparent; cursor:pointer;}
label.bold{ font-weight:bold;}
.fields{margin-bottom:5px; clear:left; display:inline-block; height:auto;}
.file{ margin-bottom:10px; border:1px solid #d1d1d1;}

/* Button */
button::-moz-focus-inner{padding:0; border:0;}
button.btn-global{width:auto; overflow:visible; border:0px; background-color:transparent; cursor:pointer;}
button.btn-global span{ background-position:left -365px; display:block; padding-left:10px; height:30px; line-height:30px;}
button.btn-global span em{ background-position:100% -365px; display:block; padding-right:10px; height:30px; line-height:30px; font-weight:bold; font-style:normal; color:#fff; font-size:1.08em;}

/* Process Indication => Bradcrumb */
.wraps-process{margin-bottom:15px; display:inline-block;}
.wraps-process li.done, .wraps-process li.doing, .wraps-process li.todo{ float:left; height:22px; line-height:16px; text-indent:7px; font-weight:bold; font-size:1.1em;}
.wraps-process li.done{ background-position:-179px 0; color:#383838;}
.wraps-process li.doing{background-position:-179px -25px; color:#005292;}
.wraps-process li.todo{background-position:-179px -50px; color:#54abcd;}
.wraps-process .step-no{ padding-right:15px; color:#fff;}
.wraps-process .arrow{ padding:0 10px; font-size:1.5em; top:2px;}

/* Info and Messages */
.info-mandatory, label.error, .general-info{ background-position:-180px -480px; padding:3px 10px 2px 25px; border:1px solid #d1d1d1;}
.info-mandatory{ right:0; top:20px; background-color:#e8e8e8; width:100px; z-index:999;}
.general-info{ float:right; width:315px; min-height:19px; height:auto;}
.info-block{ float:none; display:block; width:auto;}
.succ_css , .err_css, #message{ padding:5px; font-weight:bold; margin-bottom:10px;}
#sub_domain_msg span.err_css, #new_domain_msg span.err_css{clear:left;} /* !! For submain domain chek error messasge only (Chrome and IEs) */
.succ_css { border:2px solid #497f08; color:#497f08; height:25px; line-height:25px; background:#f1f1f1;}
.err_css, #message{ border:2px solid #ff0000; color:#FF0000; height:25px; line-height:25px; background:#f1f1f1;}
.err_css{height: auto;}
.succ_css span.img_span, .err_css span.img_span{display:block; float:left; margin-right:10px; height:26px; width:28px; border:0px;}
.succ_css span.img_span{background-position:right -414px;}
.err_css span.img_span{background-position:right -444px;}
#sub_domain_msg, #ex_domain_msg, .error{ color:#ff0000; clear:none !important; margin-bottom:10px;}
input.error, textarea{ clear:none !important;}

label.error{right:0; top:0; clear:left; background-color:#E8E8E8; font-weight:normal; min-height:20px; z-index:999; left:410px; width:125px;}
#new_content label.error{left:345px;}
#sub_content label.error{left:375px; width:100px;}
#ex_content label.error{left:282px;}
#message{margin-top:10px;}

.row-fix{display:inline-block; position:relative; margin-bottom:2px;}
.row-fix span.err_css{ margin:2px 0; display:inline-block; white-space:nowrap;}
.row-fix label, .row-fix input, .row-fix select, .row-fix span, .row-fix strong{ display:block; float:left !important;}
.row-fix span, .row-fix strong{ padding:0 2px;}
.row-fix label.error{ clear:none !important;}

/* Footer */
.wraps-footer{ color:#6c6c6c; text-align:center; font-size:1.3em;}
.f-cv-t{ background-position:-900px top; height:4px; font-size:1px;}
.f-cv-bg{background:#d1d1d1; padding:5px;}
.f-cv-b{ background-position:-900px -4px; height:4px; font-size:1px;}

/* Tablar Presentation */
.wraps-table, .packages-subs{ margin:20px;}
.packages-subs{ width:300px;}
.subs-cart{ width:500px; margin-top:10px;}
.packages-subs table, .subs-cart table{ border:1px solid #d1d1d1; padding:0; margin:0; border-collapse:collapse; width:100%;}
.packages-subs table td, .subs-cart table td{ padding:5px 10px;}
.subs-cart table td{ border:1px solid #d1d1d1; border-width:0 0 1px 0}
.table-head{ background:#444; color:#fff; font-weight:bold;}
.new_domain, .sub_domain, .ex_domain { margin:5px 15px;}
.boxed-bdr{border:1px solid #d1d1d1; padding:10px 10px 2px 10px; /padding:10px 10px 15px 10px;}
.boxed-bdr-bg{ background:#fafafa; border:1px solid #d1d1d1; padding:10px;}

/* Error Message- Registration */
.fields font{display:block; margin-left:125px; margin-bottom:10px;}

/* Forgot Password */
#forgot-pw{margin-left:5px;}

/* FAQ */
.faq-set{border:1px solid #CCCCCC; margin-bottom:10px}
.f-question{background:#DFDFDF; font-weight:bold; padding:5px;}
.f-answer{padding:5px;}
#faqs label{width:25px;}
#frmFaq{width:438px; float:left;}
.faq-info{margin-bottom:10px; width:400px; float:left;}

/* Forum Logo */
#inputForm input.file_logo{float:left;}
.logo-label,.browse-btn{float:left;}

#err_logo{display:inline;}
.err_margin{margin-left: 5px;}

/* Menu fix for IE7 */
li.index,li.index-on{line-height: 40px; color: #a63606;}
li.hulp,li.hulp-on{line-height: 40px; color: #a63606;}
li.demo,li.demo-on{line-height: 40px; color: #a63606;}
li.contact,li.contact-on{line-height: 40px; color: #a63606;}
li.prijzen,prijzen-on{line-height: 40px; color: #a63606;}


.payment .btn-global{width:150px;}

/* Combo box */
.dot #domain_exts_container ul{height:200px; overflow:auto; overflow-x:hidden; width:52px;}

.package-details table th{background: #FFA10E; color: #fff; text-align: center}

.package-details{background: #EFEFEF;}
.no-border{border: none;}

/* Package upgrade details */
.packages-upgrade{ clear:both;}
.bdr-rt{ border-right:5px solid #fff;}

/* ========================================================== */
/* CSS Added for Admin */
#nav{margin:0 0 10px 0; width:900px; position:relative; display:block; z-index:999; height:38px; line-height:38px; text-align:center;}
#nav ul.menu{height:38px; line-height:38px; margin:0 auto; display:inline-block; width:auto;}
#nav ul.menu{/display:inline;}

#nav ul.menu a{height:38px; line-height:38px; display:block; padding:0; margin:0;}
#nav ul.menu li a span{display:inline-block; text-indent:-999em;}
#nav ul.menu li li a span{text-indent:0;}

#nav ul.menu li.link-sep{ background:url(../images/nav-admin.png) no-repeat -65px top; width:2px; height:100%;}
#nav li#link-1 li a, #nav li#link-2 li a,  #nav li#link-3 li a, #nav li#link-4 li a, #nav li#link-5 li a, #nav li#link-6 li a, #nav li#link-7 li a{ text-indent:0; background-image:none; width:auto;}
#nav li#link-1 a, #nav li#link-1 a.link-on, #nav li#link-2 a, #nav li#link-2 a.link-on, #nav li#link-3 a, #nav li#link-3 a.link-on, #nav li#link-4 a, #nav li#link-4 a.link-on, #nav li#link-5 a, #nav li#link-5 a.link-on, #nav li#link-6 a, #nav li#link-6 a.link-on, #nav li#link-7 a,  #nav li#link-7 a.link-on, #nav li#first-on a, #nav li#first-off a{ background-image: url(../images/nav-admin.png); background-repeat:no-repeat;}

/* Left CV fixer */
#nav li#first-on, #nav li#first-off{ width:6px;} 
#nav li#first-off a{ background-position:left 0;}
#nav li#first-on a{ background-position:left -38px;}

#nav li#link-1{ width:59px;} /* Site */
#nav li#link-1 a{ background-position:-6px 0;}
#nav li#link-1 a.link-on{ background-position:-6px -38px;}

#nav li#link-2{ width:178px;} /* User Management */
#nav li#link-2 a{ background-position:-67px 0;}
#nav li#link-2 a.link-on{ background-position:-67px -38px;}

#nav li#link-3{ width:181px;} /* FAQ Management */ 
#nav li#link-3 a{ background-position:-247px 0;}
#nav li#link-3 a.link-on{ background-position:-247px -38px;}

#nav li#link-4{ width:104px;} /* Statistics */
#nav li#link-4 a{ background-position:-430px 0;}
#nav li#link-4 a.link-on{ background-position:-430px -38px;}

#nav li#link-5{ width:91px;} /* Forums */
#nav li#link-5 a{ background-position:-536px 0;}
#nav li#link-5 a.link-on{ background-position:-536px -38px;}

#nav li#link-6{ width:102px;} /* Domains */
#nav li#link-6 a{ background-position:-629px 0;}
#nav li#link-6 a.link-on{ background-position:-629px -38px;}

#nav li#link-7{ width:120px;} /* My Acount */
#nav li#link-7 a{ background-position:-733px 0;}
#nav li#link-7 a.link-on{ background-position:-733px -38px;}


/* Added  For Admin Section */
table.actions{ border:1px solid #54abcd; width:150px; font-weight:bold; margin-top:10px;}
table.actions td{ padding:8px 5px;}
table.actions td.title{ background:#54abcd; text-align:center; color:#fff;}
th.v-title{ width:175px;}

/* Anchor Button */
.btned span{ background-position:left -365px; display:block; float:left; padding-left:10px; height:30px; line-height:30px;}
.btned span a{ background-position:100% -365px; display:block; float:left; padding-right:10px; height:30px; line-height:30px; font-weight:bold; font-style:normal; color:#fff; font-size:1.08em; text-decoration:none; cursor:pointer; letter-spacing:1px;}
.btned span a:hover{ text-decoration:none; cursor:pointer;}