body {
background-color: #006b6c;
margin: 10px; 
padding: 0;
font: 13px/1.7em arial,helvetica,sans serif;
text-align: center;
}

#container {
background-color: #fff;
width:760px; 
padding:0;
margin: 0;
text-align: center;
}

#header {
width: 760px;
display:block; 
height:100px; 
margin-top: 3px;
border-top:3px solid #fff;
}

/* logo */

#header img.logo {
width:230px; 
height:79px; 
padding: 0; 
margin:0;
float:left
}

#header h1 {
width:450px;
height:15px;
margin:50px 0 0 270px; 
font: 18px verdana, arial, helvetica, sans-serif; 
padding-left:20px; 
color:#881f00;
letter-spacing:1.4px
}

/* top navigation */

#header ul {
list-style-type: none; 
display:block; 
width: 522px; 
height:20px; 
position:absolute; 
margin:1px 0 0 230px; 
padding:0; 
border-bottom:1px solid #ccc;
}

#header ul li {
float:right; 
font: bold 9.2px/2.0em verdana, arial, helvetica, sans-serif; 
background:url(images/button.gif) no-repeat 0 0; 
text-decoration:none; 
margin-left: 3px;
}

#header ul li a {
width:55px; 
height:20px; 
display:block; 
padding:0; 
color:#fff; 
background:url(images/button.gif) no-repeat 0 0;  
text-decoration:none; 
text-align:center; 
margin:0; 
top:0; 
left:0;
}

#header ul li a:hover {
width:55px; 
height:20px; 
text-decoration:none; 
background:url(images/buttonhover.gif) no-repeat 0 0; 
color:#fff;
}

#content {
width:760px;
background-color:#fff;
padding:0;
margin:0;
}

a { 
color:#006b6c; 
text-decoration:none;
font-weight:bold
}

a:hover { 
color:#006b6c; 
text-decoration:underline;
font-weight:bold 
}

h2  {
width:500px;
font:bold 1.2em arial, helvetica, sans-serif;
color:#881f00;
text-align:justify;
margin:50px 10px 50px 150px;
padding:0;
}

h3  {
width:600px;
height:10px;
font:bold 1.0em arial, helvetica, sans-serif;
color:#881f00;
text-align:justify;
margin:0;
padding:0;
margin-left:80px
}

hr {
color:#881f00;
background-color:#881f00;
text-align:center;
height:1px;
width:95%;
}

p {
color:#2a3845;
padding:0 15px 0 15px;
text-align:justify; 
}

#content img{
float:left; 
margin:0 1px 10px 1px;
}

#content img.right {
float:right;
margin-right:50px;
}


/* Styling for right-side screenshot */

#content img.right1 {
float:right;
margin-right:10px;
}

/* colour blocks */

#boxes {
 width: 760px;
 height: 155px;
 background: #fff;
 padding:0;
 margin: 0;
}

#orange {
width:182px; 
height:150px; 
display:block;
position: absolute; 
margin-left:40px; 
padding:0; 
background:url(images/orange.jpg) no-repeat 0 0; 
color: #fff;
}

#green{
width:182px; 
height:150px;
display: block; 
position:absolute;  
margin-left:290px; 
padding:0; 
background:url(images/green.jpg) no-repeat 0 0; 
color:#fff;
}

 #red{
width:182px; 
height:150px; 
display: block;
position:absolute; 
margin-left:535px; 
padding:0; 
background:url(images/red.jpg) no-repeat 0 0; 
color:#fff;
}

 #orange a, #green a, #red a {
width:182px; 
height:150px; 
display:block; 
text-decoration:none; 
}

 #orange a:hover {
width: 182px; 
height: 150px; 
background:url(images/orangehover.jpg) no-repeat 0 0; 
color:#fff; 
text-decoration:none;
}

 #orange h2, #green h2, #red h2 {
display: block; 
width: 120px; 
height: 25px; 
margin: 10px 0 0 15px; 
font: bold 17px arial, helvetica, sans-serif; 
color: #fff;
position: absolute; 
text-align: left
}

 #orange p, #green p, #red p {
width:150px; 
display:block; 
font: bold 11px/1.4em arial, helvetica, sans-serif;
color: #fff;
position:absolute; 
padding:0; 
margin:40px 0 0 20px;
text-align: left
}

#green a:hover{
width:182px; 
height:150px; 
background:url(images/greenhover.jpg) no-repeat 0 0; 
color:#fff; 
text-decoration:none;
}

 #red a:hover{
width:182px; 
height:150px; 
background:url(images/redhover.jpg) no-repeat 0 0; 
color:#fff; 
text-decoration:none;
}

#contentleft {
  float: left;
  height: 325px;
  width: 350px;
  font-size: 12px;
  margin: 0;
  padding-left: 20px;
  font-family: arial,helvetica,sans-serif;
  border-right: solid 1px #ccc;
  background: #fff
}

#contentleft img{
margin-left: 25px
}

/* text under latest website */

#contentleft p {
padding:0
}

#contentleft p.heading, #contentright p.heading {
float: left;
width:220px; 
margin:0; 
padding: 10px 0 0 30px;
font: bold 13px arial,helvetica,sans-serif;
color:#881f00;
}

#contentright {
background: #fff;
background-image:url(images/pen.jpg);
background-repeat: no-repeat;
background-position: 3em 3em;
height: 325px;
width: 370px;
float: right;
font-size: 12px;
margin: 0; 
padding: 0;
font-family: arial,helvetica,sans-serif;
}

#contentright ul {
float: right;
display:block; 
width:220px; 
height:170px; 
margin-right:15px; 
padding-top:0;
}

#contentright li { 
background-image: url(images/tick.gif);
background-repeat: no-repeat;
background-position: 0 0.8em;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
font: bold 11px/2em arial, helvetica, sans-serif; 
text-decoration:none; 
border-bottom:1px solid #ccc;
padding-left: 25px;
padding-top: 7px;
text-align: left
}

#contentright p img.mouse{
float: right;
display:block; 
width:300px; 
height:80px; 
margin:0;
padding-top: 10px;
padding-right: 20px
}

#footer {
background: url(images/footer.gif) no-repeat 0 0; 
color:#fff; 
margin-left: 20px;
clear:both; 
text-align:center; 
font-size:11px; 
display:block;
width: 720px;
}

a img {
border: 0 none; 
}

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

/* Styling for pages  */


/* Styling for color boxes on pages */

#orangebox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left:10px; 
padding:0; 
background:url(images/orange.jpg) no-repeat 0 0; 
color: #fff;
text-align: left;
}

#greenbox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left:10px; 
padding:0; 
background:url(images/green.jpg) no-repeat 0 0; 
color: #fff;
}

#redbox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left: 10px; 
padding:0; 
background:url(images/red.jpg) no-repeat 0 0; 
color: #fff;
}

#purplebox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left: 10px; 
padding:0; 
background:url(images/purple.jpg) no-repeat 0 0; 
color: #fff;
text-align: left
}

#tealbox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left: 10px; 
padding:0; 
background:url(images/teal.jpg) no-repeat 0 0; 
color: #fff;
text-align: left
}

#bluebox {
width:182px; 
height:150px; 
display:block;
position: absolute;
margin-left:10px; 
padding:0; 
background:url(images/blue.jpg) no-repeat 0 0; 
color: #fff;
text-align: left
}

#orangebox h2, #greenbox h2, #redbox h2, #purplebox h2, #tealbox h2, #bluebox h2 {
display: block; 
width: 120px; 
height: 20px; 
margin: 5px 0 0 15px; 
font: bold 17px/1.0em arial, helvetica, sans-serif; 
color: #fff;
position: absolute; 
text-align: left
}

#orangebox p, #greenbox p, #redbox p, #purplebox p, #tealbox p {
width: 150px; 
display: block; 
font: bold 11px/1.4em arial, helvetica, sans-serif;
color: #fff;
position: absolute;  
padding: 0; 
margin: 40px 0 0 20px;
text-align: left
}

#bluebox p {
width:150px; 
display:block; 
font: bold 11px/1.4em arial, helvetica, sans-serif;
color: #fff;
position:absolute; 
padding:0; 
margin:40px 0 0 20px;
text-align: left
}

p.para {
line-height: 2em;
padding: 0px 20px 0px 200px;
}

p.pages {
line-height: 2em;
padding: 0 20px 0px 20px;
}

#header img.icon {
margin: 5px 10px 0 0
}

/* Styling for Services table */

.servicestable {
  table-layout: fixed;
  width:400px;
  padding: 0;
  margin-left: 170px;
  margin-bottom: 20px;
  border-collapse: collapse;
  border: 1px dashed #D68685;
  font:  1.1em arial, helvetica, sans-serif;
  color: #000;
}

.servicestable caption {
margin:0;
  caption-side: top;
  font-size: 1.2em;
  padding: 0;
  margin-bottom: 10px;
  color: #881f00
}

 .servicestable td {
    padding: 5px 0 5px 20px;
    width: 220px;
 }
 
  .servicestable td.price {
    padding: 5px 0 5px 20px;
    width: 100px;
 }
 
  .servicestable tr {
    padding: 5px 0 5px 20px;
     width: 300px;
    background-color: #FBEDED
 }
 
 .servicestable tr.alt {
    padding: 5px 0 5px 20px;
     width: 300px;
    background-color: #F3f3f3
 }
 

 /* Styling on Pricing page */
 
.pricetable {
  table-layout: fixed;
  width:486px;
  padding: 0;
  margin: 0;
  margin-left: 140px;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: arial, helvetica, sans-serif;
  font-size: 1.0em;
  color: #000;
  background: #f1f1f1
}

.pricetable caption {
  caption-side: top;
  font-size: 1.2em;
  padding: 0;
  margin-bottom: 10px;
  color: #881f00
}

.pricetable th, .pricetable td {
  border: 1px solid #666;
  color: #32312F;
}

 .pricetable td {
   text-align: center;
    padding: 5px
 }

.pricetable th[scope=col] {
  color: #fff;
  background-color: #773871;
  font-size: 1.0em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
  text-align: center
}

.pricetable th+th {
  color: #fff;
  background-color: #773871;
  border-right: 1px dotted #666;
}

.pricetable th {
  background-color: #CDAFC9;
  border-right: 2px solid #333;
}

.pricetable th[scope=row] {
  font-size: 0.9em;
}

.pricetable .tableprice {
  background-color: #773871;
  color: #fff; 
  text-align: center
}

.pricetable th.text {
 font-size: 0.9em
}

.pricetable td.tick {
 background-image: url(images/tick.gif);
 background-repeat: no-repeat;
 background-position: 3.3em 0.5em;
}

p.tableprice {
  padding: 0;
  margin: 0;
  margin-left: 140px;
  font: italic 0.9em arial, helvetica, sans-serif;
}

span.prices {
  margin: 0;
  margin-left: 20px;
  padding: 0;
  font: bold 1.1em arial, helvetica, sans-serif;
  color: #881f00
}

/* Styling for Contact Form */

form#contactform {
  font-size: 1.2em;
  font-weight: bold;
  color: #15534E;
  width: 430px;
  margin-left: 18.5em;
  background-color: #e1eded
}

.page{
  position: absolute;
  top: 10;
  left: 10;
  visibility: hidden;
}

#contactform fieldset {
  display: block;
  width: 400px;
  margin: 0;
  padding: 0 1em 1em 1em;
  border-color: #15534E;
}

#contactform label.top {
  float: left;
  display: block;
  margin: 1em 1em 0 0;
  font-weight: normal;
  font-size: 0.9em;
  color: #000000;
} 

label.header{
  float: left;
  width: 10em;
  font-weight: bold;
  font-size :1.0em;
}

label .required {
  font-size: 0.83em;
  color:#387675;
}

#contactform input {
  display: block;
  width: 20em;
}

#contactform label {
  display: block;
  margin-bottom: 1em;
  font-weight: bold;
}

#contactform label.first {
  padding-top: 1em
}

#contactform select {
  display: block;
  margin-bottom: 1em;
}

 input#submit {
  width: 100px;
  cursor:pointer;
  padding: 1px 2px;
  border: 1px solid #15534E;
  color:#15534E;
  font-weight: bold;
  font-style: normal;
 }

 textarea {
  width: 300px;
  height: 100px;	
}

/* Round Corners */

.roundcorner_box {
  background: #ffffff;
 width:780px; 
 padding:0;
 margin: 0;
 margin:auto; 
 text-align:left; 
 display:block; 
}

.roundcorner_top div {
   background: url(images/tl.png) no-repeat top left;
}
.roundcorner_top {
   background: url(images/tr.png) no-repeat top right;
}
.roundcorner_bottom div {
   background: url(images/bl.png) no-repeat bottom left;
}
.roundcorner_bottom {
   background: url(images/br.png) no-repeat bottom right;
}

.roundcorner_top div, .roundcorner_top, 
.roundcorner_bottom div, .roundcorner_bottom {
   width: 100%;
   height: 30px;
   font-size: 1px;
}

.roundcorner_content { 
margin-top: -27px; 
margin-bottom: -27px; 
padding-left: 10px
}