body {
  background: #2a8bc0 url( /Kotisivukone/www/pics/pagewizard/bg.jpg ) repeat-x top left;
  margin: 0;
}
#box {
  width: 864px;
  background: transparent url( /Kotisivukone/www/pics/pagewizard/boxtop.jpg ) no-repeat top left;
  margin: 0;
}
#box-bottom {
  width: 864px;
  height: 61px;
  background: transparent url( /Kotisivukone/www/pics/pagewizard/boxbtm.gif ) no-repeat top left;
}
#box-frame {
  width: 864px;
  background: #f6f8fa url( /Kotisivukone/www/pics/pagewizard/boxbg.gif ) repeat-y top left;
  margin: 35px auto 0 auto;
}
#box-top {
  background: none;
  background-color: transparent;
  width: 864px;
  padding: 100px 0 0 0;
  height: auto;
}
#box-top div.pad { padding: 40px 0 20px 70px; }
#box-top div.step  {
  height: 47px; width: 47px;
  background: transparent url( /Kotisivukone/www/pics/pagewizard/stepbg.jpg ) no-repeat top left;
  font-size: 19px; font-weight: normal;
}
#box-top div.step div { margin: 11px 0 0  8px; }
#box-top div.header {
  color: #296fab;
  font-size: 20px;
  padding-top: 10px;
}


#box fieldset {
  position: relative;
  border: none;
  background-color: transparent;
  width: 720px;
  padding: 0; margin: 0 auto;
}
#box fieldset div.margin { margin: 0; }
#box fieldset h2 { margin: 0 0 27px 0; }
#box fieldset #back_btn { margin: 0; padding: 10px 0 20px 0; }


#box-top.logo-top {
  /*background-image: url( /Kotisivukone/www/pics/pagewizard-top.jpg );*/
}

div.clear { margin: 0; }

/* Info-kappaleet */
p.info, div.info {
  margin: 0 0 30px 0;
  padding: 20px 20px 30px 90px;
  border: 1px solid #cacbcd;
  background: #f4f6f8 url( /Kotisivukone/www/pics/about48.gif ) no-repeat 20px 20px;
  position: relative;
}

div.inline_info {
  border: 1px solid #CACBCD;
  background-color: #F4F6F8;
  margin: 0; padding: 0;
}
div.inline_info p { margin: 10px 20px; padding: 0; }
div.inline_info span {
  display: block; float: left; width: 170px;
}
a { color: #296fab; }
a:hover { color: #64b200; }
fieldset h2, div.properties fieldset legend { color: #296fab; }
input.input_active, .field .input_active { border: 1px solid #64b200; }


/**
 * Asiakastyypin valinta
 */
.customer_type a {
  text-decoration: none;
  display: block;
}
.customer_type img {
  float: left;
  margin: 5px 20px 40px 5px;
}
.customer_type span.text {
}
.customer_type a span.head {
   font-size: 26px;
}
.customer_type a span.price {
  float: right;
  text-align: right;
  color: #000;
  margin: 20px 10px 0 10px;
}
.customer_type a span.price span.euro {
  color: #080;
  font-size: 26px;
}
.type_selected {
  background-color: #fff;
  border: 1px solid #CACBCD;
  padding: 20px 0 30px 0;
}


/**
* Wizardin polku
*/
#wizard-path {
  font-size: 11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  padding: 0; margin: 0;
  position: relative;
  top: -120px; margin-left: 260px;
  width: 604px;
  text-align: left;
  color: #8BA3AF;
}
#wizard-path span a {
  margin: 0;
  text-decoration: none;
  color: #000;
}
#wizard-path span { margin: 0 9px; }
#wizard-path span.past { color: #4c4e51; }
#wizard-path span.current { font-weight: bold; color: #64b200; }
#wizard-path span.future { color: #8BA3AF; }


fieldset #back_btn {
  margin: 0 0 0 16px;
  padding: 10px 0 5px 0;
}
fieldset #back_btn a {
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}






/**
 * Pakettien valinta
 */

/* Otsikot */
.package_type {
   font-size: 26px;
  margin: 10px 0 30px 0;
  color: #296fab;
}
.package_type span {
  display: block;
  border-bottom: 1px solid #296fab;
  margin: 0 0 0 55px;
  padding-top: 5px;
}
.disabled span {
  border-bottom: 1px solid #888;
}
.package_type img {
  float: left;
  vertical-align: middle;
  margin: 0 5px 0 0;
}

/* Listat */
table.pack {
  width: 100%;
  border: none;
}
.pack td {
  vertical-align: top;
  width: 33%;
  padding: 0 0 20px 0;
}
.twocol td {
  padding: 0 30px 20px 0;
}
.pack td a {
  text-decoration: none;
}
.pack td b {
  display: block;
}
.pack td b img {
  vertical-align: -16%;
  margin-right: 4px;
}
.disabled, .disabled a {
  color: #999;
  padding: 0;
  text-decoration: none;
}
.pack div {
  margin: 0; padding: 0;
}
.pack div.package_selected {
  background-color: #fff;
  border: 1px solid #CACBCD;
  padding: 5px;
  margin: 0 10px 0 0;
}





/**
* Ominaisuuksien valinta
*/
.function {
  border: 1px solid #005A88;
  width: 460px;
  color: #005A88;
}
.function_selected {
  background-color: #FCF9D1;
}
.function img {
  vertical-align: middle;
}
.function .hidden img {
  margin-right: 4px;
  vertical-align: -20%;
}
.function .hidden {
  margin: 0; padding: 0;
  font-weight: bold;
  cursor: pointer;
}
.function .hidden p {
  padding: 3px 0 3px 5px;
  margin: 0;
}
.function .hover {
  background-color: #fff;
  margin: 0; padding: 0;
}
.function_selected .hover {
  background-color: transparent;
}
.hidden span.price {
  float: right;
  margin: 0px 20px;
}
.hidden span.price span.euro { color: #080; }

.function .arrow {
  float: right;
  cursor: pointer;
  margin: 1px 1px 0 0;
}
.function .open .arrow {
  margin: 0;
}

.open {
  color: #005A88;
  margin: 0;
  padding: 0;
}
.open p {
  margin: 4px 4px 4px 6px;
  padding: 0;
}
.open a {
  margin: 6px 0 4px 0;
}
.open img {
  float: left;
  margin: 0 10px 5px 0;
}

.open .add_function {
  border: 1px solid #468A4F;
  background: #fff url( https://kotisivukone.fi/www/pics/check.gif ) no-repeat 2px 2px;
  text-decoration: none;
  width: 100px;
  display: block;
  float: right;
  padding: 1px 2px 1px 24px;
  text-align: left;
}
.open .remove_function {
  border: 1px solid #468A4F;
  background: #fff url( https://kotisivukone.fi/www/pics/sp2/ic_delete.gif ) no-repeat 2px 2px;
  text-decoration: none;
  display: block;
  float: right;
  width: 100px;
  padding: 1px 2px 1px 24px;
  text-align: left;
}


.open span.text {
}
.open span.head {
   font-size: 22px;
  padding: 8px 0 4px 0;
  display: block;
}
.open span.price {
  float: right;
  text-align: right;
  margin: 8px 10px 0 10px;
}
.open span.price span.euro {
  color: #080;
   font-size: 22px;
}
.buy {
  padding: 10px 0;
}

/* Ominaisuus-table */
table.functions {
  width: 100%;
  margin-top: 0;
  border: none;
  border-collapse: collapse;
}
table.functions td {
  vertical-align: top;
}
table.functions td.list {
  width: 400px;
}
table.functions td.toggle_buttons {
  padding-bottom: 5px;
}

table.functions td.total {
}
#function_list {
  margin: 0;
}
#receipt {
  border: 1px solid #888;
  background-color: #fff;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  margin: 0 0 0 20px;
  padding: 10px 0;
}
#receipt table { width: 100%; margin: 0 auto; }
#receipt table td { text-align: left; padding: 3px;}
#receipt table td.head {
  text-align: center;
  padding-bottom: 10px;
}
#receipt table tr td.price {
  text-align: right;
}
#receipt table td .note {
  margin: 0;
  padding: 2px 0 3px 0;
  color: #666;
}
#receipt table td.break {
  border-bottom: 1px dashed #666;
}

div.period, div.continue { margin: 10px 0 0 20px; }
div.period select {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}




/**************************************************/

/**
* Teeman valintaan
*/
.theme_catalog {
  border: 1px solid #B1CBD9;
  background-color: #fff;
  height: 200px;
  width: 590px;
  overflow: auto;
  vertical-align: middle;
}
.theme_catalog table {
  border: none;
  border-collapse: collapse;
}
.theme_catalog img {
  float: left;
  margin: 4px 0 0 7px;
  border: 2px solid #fff;
  width: 130px;
  height: 90px;
}
#theme_preview {
  border: 1px solid #666;
  width: 360px;
  height: 250px;
  overflow: hidden;
  background: #fff url( /Kotisivukone/clients/layouts/idea/preview.jpg ) no-repeat top left;
}
#theme_preview_topbar {
  width: 330px;
  height: 66px;
  margin-top: 0;
  margin-left: 15px;
  display: block;
}

div.color {
  border: 1px solid #666;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

div.color table td { text-align: center; padding-right: 10px; }
div.color table td input { border: none; }
.color_theme {
  width: 16px;
  height: 16px;
  border: 1px solid #666;
  margin: 5px 0 0 3px;
  clear: none;
}
.red_theme { background-color: #900; }
.blue_theme { background-color: #3D7492; }
.green_theme { background-color: #080; }
.orange_theme { background-color: #e50; }
.yellow_theme { background-color: #ee0; }
.grey_theme { background-color: #777; }
.black_theme { background-color: #222; }

table.styles {
  width: 100%;
}
table.styles td {
  vertical-align: top;
}
table.styles td.style_left {
  padding-right: 20px;
}
table.styles td b {
  display: block;
  margin-bottom: 5px;
}
.top_bars {
  height: 314px;
  overflow: auto;
  border: 1px solid #B1CBD9;
  background-color: #fff;
  width: 199px;
}
.top_bars img {
  margin: 2px 0 6px 2px;
  border: 1px solid #666;
  display: block;
  cursor: pointer;
}
#top_bar_cat {
  margin-bottom: 10px;
  width: 199px;
}
#top_bar_cat select {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  width: 100%;
}
.continuebtn {
   text-align: right;
   margin: 20px;
}



#layouts {
  border: 1px solid #B1CBD9;
  background-color: #fff;
  height: 200px;
  overflow: auto;
  vertical-align: middle;
}

#layouts img {
  margin: 4px 0 0 7px;
  border: 1px solid #000;
  width: 130px;
  height: 90px;
  cursor: pointer;
  float: left;
}
#theme_preview {
  border: 1px solid #000;
  width: 360px;
  height: 250px;

}




/**
* Ominaisuuksien valintaan
*/
.hidden_resource {
  border: 1px solid #999;
}
.selected {
  background-color: #FCF9D1;
}




/**
 * Yhteenveto
 */
#summarytable {
  border: none;
  border-collapse: collapse;
  width: 100%;
}
#summarytable td {
  vertical-align: top;
}
#summarytable td.pad {
  padding-right: 30px;
}

#summary, table.summary {
  border-collapse: collapse;
  border: 1px solid #468A4F;
}
#summary td, table.summary td {
  margin: 0;
  border: 1px solid #468A4F;
  padding: 2px 20px 2px 4px;
}
#summary .header td, table.summary .header td {
   color: #296FAB;
  font-weight: bold;
  background-color: #E9EFF2;
}
#summary .small, table.summary .small {
  font-size: 11px;
  color: #777;
}
#summary td.price, table.summary td.price {
  color: #070;
  text-align: right;
  padding: 2px 10px;
}
#summary tr.even td, table.summary tr.even td {
  background-color: #F4F6F8;
}
#summary tr.total td, table.summary tr.total td {
  color: #060;
  font-weight: bold;
  background-color: #fff;
}

#summary td.price div.vat, table.summary td.price div.vat {
  color: #666;
  font-weight: normal;
  margin: -4px 2px 0 0;
}

.username_field, .password_field {
}
.field_clear {
  clear: both;
  display: none;
}