html, body{ margin:0; padding:0; text-align:center;  background:url(main/bg.jpg) top center repeat-x #FFFFFF; font: 13px verdana; color:#000000;} 
 
#pagewidth{ width:900px; padding: 30px 30px 0px 30px; text-align:left; margin-left:auto; margin-right:auto; background:url(main/page.jpg) top center no-repeat #FFFFFF;} 

#header{ position:relative; height:119px; width:900px; margin: 0px 0px 0px 0px;background:url(main/header.jpg) top center no-repeat; overflow:hidden;} 
#title{width:880px; margin:0px 0px 0px 0px; padding:52px 20px 0px 0px; height:25px; clear:both; text-align:right; float:left; }
#title h1{font-size: 12px; font-weight:normal; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; color:#377EB9;}
#title h1 a{color:#377EB9; text-decoration:none;}
#title h1 a:hover {color:#377EB9; }


#tabs { font-size:100%; line-height:normal; margin: 0px 10px 0px 10px; width:880px; height: 42px;clear:both; overflow:hidden;}
#tabs ul { margin:0; padding:0px 0px 0px 0px; list-style:none;float:left; font-family: arial; font-size: 14px; height: 42px; font-weight:bold;}
#tabs li { display:inline; margin:0; padding:0; height: 42px;}
#tabs a { float:left; background:url(main/tab.jpg) no-repeat left top; margin:0px 0px 0px 0px; padding:0 0 0 20px; text-decoration:none; height:42px; }
#tabs a span { float:left; display:block; background:url(main/tab2.jpg) no-repeat right top; padding:13px 20px 12px 0px; color: #005EBB; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
 /* End IE5-Mac hack */
#tabs a:hover span { color: #005EBB; }
#tabs a:hover { background-position:0% -42px; color: #000000; }
#tabs a:hover span { background-position:100% -42px; color: #000000; }
#tabs .current_page_item a { background-position:0% -42px; }
#tabs .current_page_item a span { background-position:100% -42px;color:#000000;}
#tabs .current_page_item a:hover { background-position:0% -42px; color:#000000;}
#tabs .current_page_item a:hover span { background-position:100% -42px; color:#000000;}

#submenu { font-size:100%; line-height:normal; margin: 0px 0px 0px 0px; width:657px; height: 42px;clear:both; overflow:hidden; background:url(main/submenu.jpg) top center no-repeat;}
#submenu ul { margin:0; padding:0px 0px 0px 0px; list-style:none;float:left; font-family: arial; font-size: 14px; height: 42px; font-weight:bold;}
#submenu li { display:inline; margin:0; padding:0; height: 42px;}
#submenu a { float:left; background:url(main/tab.jpg) no-repeat left top; margin:0px 0px 0px 0px; padding:0 0 0 20px; text-decoration:none; height:42px; font-weight:bold;}
#submenu a span { float:left; display:block; background:url(main/tab2.jpg) no-repeat right top; padding:13px 20px 12px 0px; color: #005EBB; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#submenu a span {float:none;}
 /* End IE5-Mac hack */
#submenu a:hover span { color: #000000; }
#submenu a:hover { background-position:0% -42px; color: #000000; }
#submenu a:hover span { background-position:100% -42px; color: #000000; }
#submenu .current_page_item a { background-position:0% -42px; }
#submenu .current_page_item a span { background-position:100% -42px;}
#submenu .current_page_item a:hover { background-position:0% -42px; color:#000000;}
#submenu .current_page_item a:hover span { background-position:100% -42px; color:#000000;}


#submenu2 { font-size:100%; line-height:normal; margin: 0px 0px 0px 0px; width:880px; height: 42px;clear:both; overflow:hidden; background:url(main/submenu2.jpg) top center no-repeat;}
#submenu2 ul { margin:0; padding:0px 0px 0px 0px; list-style:none;float:left; font-family: arial; font-size: 14px; height: 42px;font-weight:bold;}
#submenu2 li { display:inline; margin:0; padding:0; height: 42px;}
#submenu2 a { float:left; background:url(main/tab.jpg) no-repeat left top; margin:0px 0px 0px 0px; padding:0 0 0 20px; text-decoration:none; height:42px; }
#submenu2 a span { float:left; display:block; background:url(main/tab2.jpg) no-repeat right top; padding:13px 20px 12px 0px; color: #005EBB; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#submenu2 a span {float:none;}
 /* End IE5-Mac hack */
#submenu2 a:hover span { color: #000000; }
#submenu2 a:hover { background-position:0% -42px; color: #000000; }
#submenu2 a:hover span { background-position:100% -42px; color: #000000; }
#submenu2 .current_page_item a { background-position:0% -42px; color: #000000;}
#submenu2 .current_page_item a span { background-position:100% -42px;color: #000000;}
#submenu2 .current_page_item a:hover { background-position:0% -42px; color:#000000;}
#submenu2 .current_page_item a:hover span { background-position:100% -42px; color:#000000;}

#imgicon { position: relative; margin-bottom: 0px; padding: 0px 10px 0px 10px; width: 880px; float:left; overflow:hidden; }

#imgicon ul{list-style: none; margin: 0; padding: 0; width: 880px; overflow:hidden; }

#imgicon .imgicons { display: block; background: url(main/icons_bg.jpg) top right repeat-x; height: 125px;}

#imgicon li { float: left;}

#imgicon .imgicon { display: block; cursor: pointer; overflow: hidden; height: 125px; width: 219px; padding: 0px; background: #fff;}

#imgicon .imgicon span { display: none;}

#imgicon .one { background: url(main/001.jpg) top left no-repeat;}

#imgicon .two { background: url(main/002.jpg) top left no-repeat;}

#imgicon .three { background: url(main/003.jpg) top left no-repeat;}

#imgicon .four { background: url(main/004.jpg) top left no-repeat;}


#website-design-prices {width:570px; height:130px; padding: 145px 0px 0px 310px; margin:0px auto 0px auto; display:block; clear:both;background:url(main/pricing.jpg) top left no-repeat; overflow:hidden; display:block;}

#website-design{ position:relative; height:130px; width:290px;float:left; clear:left; margin:0px 0px 0px 0px;} 
#website-design h3{margin:0px 0px 0px 0px;padding:0px;float:left;width:290px; }
#website-design h3 a{display:block;width:290px;height:130px; background:url(main/website_design.jpg) top left no-repeat;}
#website-design h3 a:hover{display:block;width:290px;height:130px; background-position: -290px 0px;}
#website-design h3 span{display:none;} 

#e-commerce { position:relative; height:130px; width:280px;float:left; margin:0px 0px 0px 0px;} 
#e-commerce h3{margin:0px 0px 0px 0px;padding:0px;float:left;width:280px; }
#e-commerce h3 a{display:block;width:280px;height:130px; background:url(main/ecommerce.jpg) top left no-repeat;}
#e-commerce h3 a:hover{display:block;width:280px;height:130px; background-position: -280px 0px;}
#e-commerce h3 span{display:none;} 




#rightcol{ width:223px; float:right; position:relative; overflow-x:hidden; padding: 0px 10px 0px 0px; font-family:verdana; font-size: 12px;}
#rightcol h5{margin:0px 0px 0px 0px;padding:0px;float:left;width:223px; clear:left;height:42px; background:url(main/enquiry.jpg) top center no-repeat;}
#rightcol h5 span{display:none;} 



div.formlayout {width: 203px;padding: 6px 10px 10px 10px;margin: 0px auto;float:left; }
 
div.row {width: 203px;  clear: both;  padding-top: 4px;color:#333333; font-family:verdana; font-size: 12px; font-weight:bold; line-height: 1.5em;  }

.formtext{color:#4D80B9; font-family:verdana; font-size: 12px; font-weight:bold; line-height: 1.5em;  }

div.row span.form {  float: right;  width: 203px;  text-align: left;  }
.textbox{ border:1px solid #A2BFDF; color:#333333; background-color:#FFFFFF;  margin: 0px 0px 0px 0px;padding: 3px; width:195px; font-size:12px; font-family:verdana;scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #EEEEEE;scrollbar-shadow-color: #A2BFDF;scrollbar-3dlight-color: #EEEEEE;scrollbar-arrow-color: #A2BFDF;scrollbar-track-color: #EEEEEE;scrollbar-darkshadow-color: #EEEEEE;}
.textarea{ border:1px solid #A2BFDF; color:#333333; background-color:#FFFFFF; height:100px; margin: 0px 0px 0px 0px;padding: 3px; width:195px; font-size:12px; font-family:verdana;scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #EEEEEE;scrollbar-shadow-color: #A2BFDF;scrollbar-3dlight-color: #EEEEEE;scrollbar-arrow-color: #A2BFDF;scrollbar-track-color: #EEEEEE;scrollbar-darkshadow-color: #EEEEEE;}

.textbutton{ border:1px solid #A2BFDF; color:#000000; background-color:#FFFFFF; margin: 4px 0px 0px 0px; width:200px; padding: 4px 4px 4px 4px; font-size:13px; font-family:verdana; }


div.contactformlayout {
width: 500px;
background-color: #fffff;
padding: 0px;
margin: 0px auto;
float:left;
 }
 
div.contactrow {
width: 500px;
  clear: both;
  padding-top: 5px;
color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;
  }

div.contactrow span.contactlabel {
  float: left;
  width: 220px;
  padding-top: 0px;
  padding-right: 4px;
 margin-bottom: 3px;
  text-align: right;
  }

div.contactrow span.contactformw {
  float: right;
  width: 250px;
  text-align: left;
  } 


 
#maincol{ float: left; display:inline; position: relative; width:657px; padding: 0px 0px 0px 10px;}

#fullcol{ position: relative; width:880px; padding: 0px 0px 0px 0px; margin:0px auto 0px auto; background:#FFFFFF; overflow-x:hidden;}


#content{ width:617px; text-align:left; padding:20px 20px 30px 20px; } 
#content h1{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;} 
#content h2{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; clear:left;} 
#content h2 a{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#content h2 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#content h4 a{ clear:left; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#content h4 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#000000; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#content p{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;clear:left;} 
#content ul{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#content ol{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#content a{color:#409FFF;} 
#content a:hover{ color:#333333;} 
#content img{ padding:0px 0px 0px 5px; border:0px; float:right; clear:right;} 


#contentfull{ width:840px; text-align:left; padding:20px 20px 30px 20px; } 
#contentfull h1{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;} 
#contentfull h2{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; clear:left;} 
#contentfull h2 a{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#contentfull h2 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#contentfull h4 a{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#contentfull h4 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#000000; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#contentfull p{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;clear:left;} 
#contentfull ul{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#contentfull ol{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#contentfull a{color:#409FFF;} 
#contentfull a:hover{ color:#333333;} 
#contentfull a img { float:left; border:1px solid #888888;} 
#contentfull a:hover img { float:left; border:1px solid #000000;} 

img.centered {display:block; margin-left:auto; margin-right:auto;}
img.alignright {float:right; clear:right; padding: 0px 0px 10px 10px;}
img.alignleft {float:left; clear:left; padding: 0px 10px 10px 0px;}
.aligncenter { display: block; margin-left: auto; margin-right: auto;}
.alignright {float:right; clear:right; padding: 0px 0px 10px 10px;}
.alignleft {float:left; clear:left; padding: 0px 10px 10px 0px;}

#portfolio{ width:840px; text-align:left; padding:20px 20px 30px 20px; } 
#portfolio h1{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;} 
#portfolio h2{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; clear:left;} 
#portfolio h2 a{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#portfolio h2 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 22px; color:#409FFF; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#portfolio h4 { clear:both; }
#portfolio h4 a{ clear:both; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#409FFF; font-weight:normal; letter-spacing:0.5px; text-decoration:none;} 
#portfolio h4 a:hover{ padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-family:arial; font-size: 18px; color:#000000; font-weight:normal; letter-spacing:0.5px;text-decoration:none;} 
#portfolio p{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;clear:left;} 
#portfolio ul{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#portfolio ol{ color:#333333; font-family:verdana; font-size: 13px; line-height: 1.7em;} 
#portfolio a{color:#409FFF;} 
#portfolio a:hover{ color:#333333;} 
#portfolio img { float:left; border:1px solid #888888;} 
#portfolio a img { float:left; border:1px solid #888888;} 
#portfolio a:hover img { float:left; border:1px solid #000000;} 

.orange{color:#FF9900; font-family:verdana; font-size: 13px; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-weight:bold;}

.black{color:#000000; font-family:verdana; font-size: 13px; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-weight:bold;}

.blue{color:#409FFF; font-family:verdana; font-size: 13px; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; font-weight:bold;}

ul.spec{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#E2F0FF; border: 1px solid #A8D3FF; padding: 10px 10px 10px 30px; margin: 20px 0px 20px 0px;}

ol.spec2{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#FFFFE1; border: 1px solid #E6E600; padding: 10px 10px 10px 40px; margin: 20px 0px 20px 0px;}

ul.spec3{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#FFE8F5; border: 1px solid #FFAADD; padding: 10px 10px 10px 30px; margin: 20px 0px 20px 0px;}


.bronze{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#F2ECDF; border: 1px solid #DCC9A5; padding: 10px 10px 10px 15px; margin: 20px 0px 20px 0px;}
.silver{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#F4F4F4; border: 1px solid #CCCCCC; padding: 10px 10px 10px 15px; margin: 20px 0px 20px 0px;}
.gold{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#FFFFEA; border: 1px solid #DFDF00; padding: 10px 10px 10px 15px; margin: 20px 0px 20px 0px;}
.examples{color:#333333; font-family:verdana; font-size: 13px; line-height: 1.5em;clear:left; background-color:#F2F9FF; border: 1px solid #A8D3FF; padding: 10px 10px 10px 15px; margin: 20px 0px 20px 0px;}
.table{ border:1px solid #EEEEEE; color:#333333; background-color:#FFFFFF; border-collapse: collapse; padding:3px; border-spacing: 0px;}



#copy{ width:900px;  margin-left:auto; margin-right:auto; margin-top:10px;padding-top: 40px;background: url(main/copy.jpg) top center no-repeat; height: 60px; color:#81A5CD; font-size: 11px; text-align:center;} 
#copy a{color:#81A5CD; font-size: 11px;} 
#copy a:hover{color:#333333; font-size: 11px; text-decoration:none;} 
 


.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}