* { margin: 0; padding: 0; }
html { border: none; }

body {
	font: 0.75em/1.35 "Arial CE", Arial, sans-serif;
	color: #444; padding: 15px 0;
	background: white url(images/body-bg.gif) repeat-x 0 0;
}

/* ---[ template ]----------------------------- */

#container {
  position: relative;
  width: 900px; padding: 0 40px; padding-top: 80px; min-height: 300px;
  background: white url(images/container-bg.gif) no-repeat 0 277px;
  margin: 0 auto;
}

/* ---[ basics ]------------------------------ */

h1 {
  font-size: 180%; font-weight: normal;
  color: black; text-align: right;
}

h2.bg {
  position: relative; float: left;
  height: 52px; line-height: 52px;
  font-size: 180%; font-weight: normal; color: white; 
  padding: 0 21px 0 19px;
  background-color: #134993;
}

h2 .bg1, h2 .bg2 { position: absolute; width: 3px; height: 52px; background: white url(images/h2-bg.gif) no-repeat 0 0; }
h2 .bg1 { top: 0; left: 0;  background-position: 0 0; }
h2 .bg2 { top: 0; right: 0; background-position: -3px 0; }

a { color: #444; text-decoration: underline; cursor: pointer; } 
a:hover { text-decoration: none; }
a img { border: none; background: none; }

.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }

/* ---[ content ]----------------------------- */

.step {
  position: relative;
  width: 356px; /*min-height: 90px;*/
  padding: 5px 0 5px 9px;
  margin: 30px 0 0 70px;
  border-left: 1px solid #ccd7e0;
}

.step h2 {
  font-size: 150%; font-weight: normal; line-height: 1.1em;
  color: #02498b;
  margin-bottom: 0.4em;
}

.step p { margin-bottom: 0; }

.step span {
  display: block; position: absolute;
  width: 39px; height: 39px;
  top: 5px; left: -50px;
  background: transparent url(images/numbers.png) no-repeat 0 0;
}

.step.no1 span { background-position: 0 0; }
.step.no2 span { background-position: -39px 0; }
.step.no3 span { background-position: -78px 0; }
.step.no4 span { background-position: -117px 0; }

.step.no5 span, .step.no6 span {
  width: 31px; height: 31px;
  top: 0; left: -42px;
}

.step.no5 span { background-position: -156px 0; }
.step.no6 span { background-position: -187px 0; } 

.bluearrow {
  display: block; float: right;
  color: #134993;
  padding-right: 17px;  
  background: transparent url(images/icon-bluearrow.gif) no-repeat 100% 3px;  
}

.bluearrow.margintop { margin-top: 0.5em; }

#boxes {
  width: 900px; height: 326px;
  background: transparent url(images/boxes-bg.gif) no-repeat 0 0;
  margin: 30px 0 -10px 0;
}

#box1, #box2, #box3 { 
  float: left; margin-right: 30px;
  width: 240px; height: 129px;
  padding: 135px 20px 21px 20px;
  background: transparent url(images/box1-bg.jpg) no-repeat 0 0;
}

#box1 { background: transparent url(images/box1-bg.jpg) no-repeat 0 0; }
#box2 { background: transparent url(images/box2-bg.jpg) no-repeat 0 0; }
#box3 { background: transparent url(images/box3-bg.jpg) no-repeat 0 0; margin-right: 0;  }

#box1 h2, #box2 h2, #box3 h2 {
  font-size: 150%; font-weight: normal; line-height: 1.1em; margin-bottom: 0.4em; color: #2f9204;
}

#box1 a, #box2 a, #box3 a { padding-right: 17px; color: #2f9204; display: block; float: right; background: transparent url(images/icon-greenarrow.gif) no-repeat 100% 3px; margin-top: 0.5em; }

#support {
  padding: 1.5em 0 1.5em 21px;
  margin: 2em 0;
  border-top: 1px solid #ddd;
}

#support h2 { font-size: 180%; font-weight: normal; color: black; }

#support p.contact {
  font-size: 150%; color: black;
  padding: 7px 0 7px 73px; line-height: 1.1em;
  background: transparent url(images/contact-bg.gif) no-repeat 0 50%;
  
}

#support .contact a { color: #a8061a; }

/* ---[ logo ]-------------------------------- */ 

#logo {
  position: absolute; display: block; overflow: hidden;
  width: 209px; height: 65px;
  top: 40px; left: 40px;
}

#logo span {
  display: block; position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background: white url(images/logo-inpage.gif) no-repeat 0 0;
}