/*
Website Wonder style sheet for CSS2-capable browsers
Copyright 2010 Website Wonder, http://websitewonder.in/
Coded by Priyank Sharma, http://priyanksharma.com/
*/

/* ============
  Global reset
=============== */
blockquote,body,button,code,dd,div,dl,dt,form,fieldset,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,textarea,td,th,ul{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,optgroup,strong,th,var{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:after,q:before{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}button,input,select,optgroup,option,textarea{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

/* ==================
  Interface / Layout
===================== */
body {
  background:url(../images/bg.png) repeat-x top;
}

/* ==========
  Typography
============= */
body {
  color:#555555;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}

h1 {
  font-size:30px;
}
h2 {
  font-size:24px;
}
h3 {
  font-size:18px;
}
h4 {
  font-size:14px;
}

p {
  line-height:16px;
}
strong {
  color:#199204;
  font-weight:bold;
}

a:link,
a:visited {
  color:#199204;
  font-weight:bold;
  text-decoration:none;
}
a:active,
a:hover,
a:focus {
  color:#1fb505;
  text-decoration:underline;
}

/* =======
  Spacers
========== */
.spacer-void, .spacer, .spacer-double, .spacer-triple {
  clear:both;
  display:block;
}

.spacer-void {
  height:1px;
  margin-top:-1px;
}
.spacer {
  height:10px;
}
.spacer-double {
  height:20px;
}
.spacer-triple {
  height:30px;
}

/* =========
  Interface
============ */
div#interface {
  margin:0 auto;
  width:900px;
}
div#header {
  height:130px;
  width:900px;
}

/* ====
  Home
======= */
div#home {
  background:url(../images/panel-home.png) no-repeat;
  height:460px;
  width:900px;
}
div#headline {
  margin:0 auto;
  padding-top:105px;
  width:760px;
}
div#home div#steps {
  padding-top:85px;
  width:900px;
}
div#home div#step1 {
  float:left;
  padding-left:100px;
  width:200px;
}
div#home div#step2 {
  float:left;
  padding-left:55px;
  width:200px;
}
div#home div#step3 {
  float:left;
  padding-left:60px;
  width:200px;
}
div#home div#orderbutton {
  margin:0 auto;
  padding-top:25px;
  text-align:right;
  width:845px;
}

button#button-order,
button#button-order:active {
  background:url(../images/button-ordernow.png) 0 0;
  border:none;
  cursor:pointer;
  height:74px;
  width:272px;
}
button#button-order:hover,
button#button-order:focus {
  background:url(../images/button-ordernow.png) 0 -74px;
  border:none;
  height:74px;
  width:272px;
}

/* =======
  Pricing
========== */
div#pricing {
  background:url(../images/panel-pricing.png) no-repeat;
  height:584px;
  width:900px;
}
div#pricing div#plans {
  padding-top:150px;
  width:900px;
}
div#pricing div#plans p {
  color:#fff;
  font-size:18px;
  font-weight:bold;
  line-height:20px;
  margin-bottom:24px;
}
div#pricing div#plan1 {
  float:left;
  padding-left:50px;
  width:250px;
}
div#pricing div#plan2 {
  float:left;
  padding-left:30px;
  text-align:center;
  width:80px;
}
div#pricing div#plan3 {
  float:left;
  padding-left:55px;
  text-align:center;
  width:85px;
}
div#pricing div#plan4 {
  float:left;
  padding-left:55px;
  text-align:center;
  width:85px;
}
div#pricing div#plan5 {
  float:left;
  padding-left:50px;
  text-align:center;
  width:85px;
}

button.button-order-small,
button.button-order-small:active {
  background:url(../images/button-order.png) 0 0;
  border:none;
  cursor:pointer;
  height:60px;
  margin-left:-27px;
  width:140px;
}
button.button-order-small:hover,
button.button-order-small:focus {
  background:url(../images/button-order.png) 0 -60px;
  border:none;
  height:60px;
  width:140px;
}

/* =====
  Order
======== */
div#order {
  background:url(../images/panel-order.png) no-repeat;
  height:540px;
  width:900px;
}
div#order div#headline {
  margin:0 auto;
  padding-top:105px;
  width:760px;
}

div#order div#details1 {
  margin-top:30px;
  padding-left:100px;
  width:600px;
}
div#order div.line1 {
  float:left;
  width:285px;
}
div#order div.line2 {
  float:left;
  width:200px;
}
div#order div#details2 {
  margin-top:14px;
  padding-left:100px;
  width:600px;
}
div#order div#details3 {
  margin:14px 0 0 100px;
  width:600px;
}
div#order div#details4 {
  margin:15px 0 0 100px;
  width:600px;
}

input.textfield {
  background:none;
  border:none;
  color:#fff;
  font-weight:bold;
  height:30px;
  margin:3px 0 0 -9px;
  padding-left:5px;
  outline:none;
  width:234px;
}
textarea {
  background:none;
  border:none;
  color:#fff;
  font-weight:bold;
  height:70px;
  margin:3px 0 0 -9px;
  max-height:70px;
  max-width:523px;
  outline:none;
  padding:8px 0 0 5px;
  width:523px;
}

input#button-submitorder,
input#button-submitorder:active {
  background:url(../images/button-submitorder.png) 0 0;
  border:none;
  cursor:pointer;
  height:56px;
  margin:10px 0 0 80px;
  width:188px;
}
input#button-submitorder:hover,
input#button-submitorder:focus {
  background:url(../images/button-submitorder.png) 0 -56px;
  border:none;
  height:56px;
  width:188px;
}

/* ======
  Submit
========= */
div#submit {
  background:url(../images/panel-submit.png) no-repeat;
  height:460px;
  width:900px;
}
div#order div#headline {
  margin:0 auto;
  padding-top:105px;
  width:760px;
}

/* =====
  About
======== */
div#about {
  background:url(../images/panel-about.png) no-repeat;
  color:#fff;
  height:584px;
  width:900px;
}
div#about strong,
div#about a {
  color:#fdfe8f;
}
div#about div#headline {
  margin:0 auto;
  padding-top:90px;
  width:800px;
}

div#about div.about-title p {
  font-size:18px;
  font-weight:bold;
  line-height:20px;
  margin-left:50px;
}
div#about div.about-data {
  margin:8px 0 0 245px;
}

/* =====
  Terms
======== */
div#terms {
  background:url(../images/panel-terms.png) no-repeat;
  height:540px;
  width:900px;
}
div#terms div#headline {
  margin:0 auto;
  padding-top:90px;
  width:800px;
}

div#terms div.terms-title p {
  font-size:18px;
  font-weight:bold;
  line-height:20px;
  margin-left:50px;
}
div#terms div.terms-data {
  margin:8px 0 0 50px;
}

/* ====
  FAQs
======= */
div#faqs {
  background:url(../images/panel-faqs.png) no-repeat;
  height:540px;
  width:900px;
}
div#faqs div#headline {
  margin:0 auto;
  padding-top:90px;
  width:800px;
}

div#faqs div.faqs-title p {
  font-size:18px;
  font-weight:bold;
  line-height:20px;
  margin-left:50px;
}
div#faqs div.faqs-data {
  margin:8px 0 0 50px;
}

/* ======
  Footer
========= */
div#footer {
  background:url(../images/footer-bg.png) repeat-x;
  height:162px;
  width:100%;
}

div#footer div#footer-main {
  background:url(../images/footer.png) repeat-x;
  margin:0 auto;
  padding-top:55px;
  width:900px;
}
div#footer-main div#links1 p,
div#footer-main div#links2 p,
div#footer-main div#links3 p {
  line-height:18px;
}
div#footer-main div#links3 a {
  color:#777777;
}
div#footer-main div#links1 {
  float:left;
  padding-left:34px;
  width:155px;
}
div#footer-main div#links2 {
  float:left;
  padding-left:33px;
  width:155px;
}
div#footer-main div#links3 {
  float:left;
  margin-top:-25px;
  padding-left:20px;
  width:250px;
}