@charset "utf-8";
/* CSS Document */

body {
	margin-left: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: center;
	background-image: url(images/pagebg.gif);
	background-repeat: repeat-x;
	background-color: #e3e3e3;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}  



#container {
	width: 819px; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 


#body {
	background: #ffffff;
	padding: 10px; 
}



#content {
	float: left;
	width: 570px;
	padding-right: 20px;
	
}
#content a {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
	color: #006699;
	
}	
	

#content_port {
	float: left;
	width: 800px;
	height: 800px;
	padding-right: 20px;
	
}


#sidebar {
	float: right;
	width: 200px;
}

.clear {
	clear: both;
}

#left_content {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	color: #000000;
	background-repeat: no-repeat;
	width: 563px;
	font-weight: normal;
	background-image: url(images/seo.gif);
	padding-left: 10px;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #8d8a8c;
	border-left-color: #8d8a8c;
	background-position: top;
	margin-left: 10px;

}

#left_content a{
border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
	color: #006699;

}

#left_foot {
	background-image: url(images/footerseo.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 23px;
	display:block;
	float: left;
	padding-left: 10px;
	margin-left: 10px;


}
#left_head {
	background-image: url(images/seo_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}
#ecom_head {
	background-image: url(images/ecom_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

#setup_head {
	background-image: url(images/setup_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}



#demo_head {
	background-image: url(images/demo_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

#faq_head {
	background-image: url(images/faq_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

#rss_head {
	background-image: url(images/newsbg.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

#contact_head {
	background-image: url(images/contact_head.gif);
	background-repeat: no-repeat;
	width: 565px;
	height: 65px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

* ---------------------- demo square button on many pages & eCom---------------------- */  

#demo_button {
	padding-bottom: 15px;
	padding-left: 5px;
	float: left;
	height: 165px;
	width: 185px;
	padding-top: 22px;
}

#demo_button a{
	float:left;
	height: 165px;
	width: 185px;
	text-align: center;
	text-decoration: none;
	display: block;
	background-image: url(images/demobg.gif);
	vertical-align: middle;
	background-repeat: no-repeat;
}

#demo_button a:hover{
	float:left;
	height: 165px;
	width: 185px;
	background-image: url(images/demobg_on.gif);
	background-repeat: no-repeat;
}

#ecom_button a{
	float:left;
	height: 165px;
	width: 185px;
	text-align: center;
	text-decoration: none;
	display: block;
	background-image: url(images/ecombg.gif);
	vertical-align: middle;
	background-repeat: no-repeat;
}

#ecom_button a:hover{
	float:left;
	height: 165px;
	width: 185px;
	background-image: url(images/ecombg_on.gif);
	background-repeat: no-repeat;
}



/* ---------------------- 5 step guide button on a few pages ---------------------- */  

#steps_button {
	padding-bottom: 15px;
	padding-left: 5px;
	float: left;
	height: 165px;
	width: 185px;
	padding-top: 60px;
}

#steps_button a{
	float:left;
	height: 165px;
	width: 185px;
	text-align: center;
	text-decoration: none;
	display: block;
	background-image: url(images/steps.gif);
	vertical-align: middle;
	background-repeat: no-repeat;
}

#steps_button a:hover{
	float:left;
	height: 165px;
	width: 185px;
	background-image: url(images/steps_on.gif);
	background-repeat: no-repeat;
}

/* ---------------------- Main Page Headings on all pages & the left colour---------------------- */  

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #4e8ad0;
	font-weight: bold;
	line-height: 15px;
}

.h2l {
	color: #333333;
}

/* ---------------------- Main Page Headings on all pages & the left colour---------------------- */  


h3 {

font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4e8ad0;
	font-weight: bold;
	line-height: 0px;
}

/* ----------------------  Sub headings ---------------------- */  

.headings {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #009933;
	font-weight: bold;
}

.maintext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* ---------------------- silver nav ---------------------- */  
.silver #nav{
	position:relative;
	display:block;
	height:42px;
	width:819px;
	font-size:12px;
	font-weight:normal;
	background:transparent url(images/silver_nav_background.gif) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
}  

.silver #nav ul{   
margin:0px;   
padding:0;   
list-style-type:none;   
width:auto;   
}  

.silver #nav ul li{   
display:block;   
float:left;   
margin:0 1px 0 0;   
}   
.silver #nav ul li a{
	display:block;
	float:left;
	color:#3A3A3A;
	text-decoration:none;
	height:28px;
	padding-top: 14px;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
}  

.silver #nav ul li a:hover,.silver #nav ul li a.current{
	color:#333333;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(images/silver_nav_mouseover.gif);
}   
/* ---------------------- END silver nav ---------------------- */  


/* ---------------------- Top nav ---------------------- */  


 #top_nav {
	display: block;
	height: 30px;
	font-size:12px;
	font-weight:normal;
	font-family:Arial, Verdana, Helvitica, sans-serif;
	
	color: #FFFFFF;
	text-decoration: none;
	text-indent: 0px;
 }




/* ---------------------- Very top Buttons and links ---------------------- */  

#ecom a {
	display: block;
	height: 30px;
	width: 96px;
	background-image: url(images/ecom.gif);
	background-repeat: no-repeat;
	color: #FFFFFF;
	text-decoration: none;
}

#ecom a:hover {
	display: block;
	height: 30px;
	width: 96px;
	background-image: url(images/ecom_on.gif);
	background-repeat: no-repeat;
}

#demo {
	display: block;
	float: left;
	padding-left: 5px;
	text-indent: 16px;
	line-height: 25px;
}
 
#ecom {
	display: block;
	float: left;
	height: 30px;
	width: 96px;
	padding-right: 2px;
	padding-left: 580px;
	color: #FFFFFF;
	text-decoration: none;
	text-indent: 14px;
	line-height: 25px;
}

#demo a{
	display: block;
	height: 30px;
	width: 96px;
	background-image: url(images/demo.gif);
	background-repeat: no-repeat;
	color: #FFFFFF;
	text-decoration: none;
}

#demo a:hover{
	display: block;
	height: 30px;
	width: 96px;
	background-image: url(images/demo_on.gif);
	background-repeat: no-repeat;
}

/* ---------------------- Main Logo ---------------------- */  



#logo {
	background: url(images/logo.gif);
	display:block;
	height: 141px;
	width: 819px;
	
}
#logo a {
display:block;
height: 141px;
width: 819px;
}

/* ------------- The Button copyright text on all pages-------------*/



#copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #FFFFFF;
	text-indent: 40px;
	float:left;
	margin-right: auto;
	margin-left: auto;
}

/* ----- -- footer -- ------ */

#footer {
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	display:block;
	height: 8px;
	width: 819px;
	
}

#terms {
	width:819px;
	height:35px;
	text-align: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-top: 5px;
}

/* ---------------------- T and C page ---------------------- */  

#terms a  {
	width:819px;
	height:35px;
	text-align: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-top: 5px;
}

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	
}
a:hover {
	
}

/** webdesign page packages  **/


#compare {
	width: 800px;
	height: 350px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.green {
	font-family: "Century Gothic", "Arial Black";
	font-size: 14px;
	color: #FFFFFF;
	background-color: #5ca629;
}

.orange {
	font-family: "Century Gothic", "Arial Black";
	font-size: 14px;
	color: #FFFFFF;
	background-color: #db6a0c;
}


.blue {
	font-family: "Century Gothic", "Arial Black";
	font-size: 14px;
	color: #FFFFFF;
	background-color: #2b739b;
}

td {
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #0099FF;
	border-right-style: dotted;
	border-right-color: #0099FF;
	height: 25px;
	text-align: center;
	width: 150px;
}

#contacttable td {
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-bottom-style: dotted;
	border-bottom-color: #0099FF;
	border-right-style: dotted;
	border-right-color: #0099FF;
	height: 25px;
	text-align: left;
	width: 150px;
}

.c_titles {
	text-align: left;
	padding-left: 20px;
	width: 200px;
}

.web_pack {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	color: #000000;
	background-repeat: no-repeat;
	width: 570px;
	font-weight: normal;
	background-image: url(images/webpack.gif);
	padding-right: 4px;
	padding-bottom: 4px;
	margin-left: 10px;
	margin-top: 10px;
	height: 200px;
	padding-left: 4px;
}

 .web_pack ul {
	list-style-image: url(images/tick.png);
	line-height: 25px;
 }
 

.web_pack2 {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	color: #000000;
	background-repeat: no-repeat;
	width: 570px;
	font-weight: normal;
	background-image: url(images/webpack2.gif);
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
	margin-left: 10px;
	height: 200px;
	margin-top: 10px;
}
 .web_pack2 ul {
	list-style-image: url(images/tick.png);
	line-height: 25px;
 }
 
.web_pack3 {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-repeat: no-repeat;
	width: 570px;
	font-weight: normal;
	background-image: url(images/webpack3.gif);
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 10px;
	height: 270px;
}

 .web_pack3 ul {
	list-style-image: url(images/tick.png);
	line-height: 20px;
	text-align: left;
	vertical-align: text-bottom;
 }
 
 /** This is the webdesign extra sidebar  **/

 .extras  {
	width: 182px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(images/extra_body.png);
	background-repeat: no-repeat;
	height: 290px;
	padding-top: 10px;
	padding-left: 10px;
	line-height: 17px;
 }
 
.extras1  {
	width: 180px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(images/links_body.png);
	background-repeat: no-repeat;
	height: 250px;
	padding-left: 10px;
	line-height: 17px;
	
 }
 
  .extras1 a {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
	padding-bottom: 2px;
 }
 
  .extras1 a:hover  {
	color: #009900;
 }
 
 
 
 
  .extras ul {
	list-style-image: url(images/tick.png);
	line-height: 25px;
	text-align: left;
	vertical-align: text-bottom;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-indent: 0px;
	margin-left: 12px;
	padding-left: 12px;
 }
 
   .extras1 ul {
	line-height: 20px;
	text-align: left;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-image: url(images/bullet.png);
	margin-left: 10px;
	padding-left: 10px;
 }
 
  /** Index packages  **/
  
.packages {
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	}
	
	
.packages ul {
	list-style-image: url(images/tick1.png);
	line-height: 25px;
	text-align: left;
	line-height: 25px;
	margin-left: 10px;
	
 }
  
 #packages_head {
	width: 774px;
	height: 39px;
	background-image: url(images/package.jpg);
	background-repeat: no-repeat;
	margin-left: 12px;
	}
	 
 #starter {
	height: 202px;
	width: 266px;
	float:left;
	background-image: url(images/starter.jpg);
	background-repeat: no-repeat;
	margin-left: 12px;
	
}

#starter a{
	float:left;
	height: 202px;
	width: 266px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	display: block;
	background-image: url(images/starter.jpg);
	background-repeat: no-repeat;
	font-weight: bold;
}

#starter a:hover{
	float:left;
	height: 202px;
	width: 266px;
	background-image: url(images/starter_on.jpg);
	background-repeat: no-repeat;
}



 #medium {
	height: 234px;
	width: 267px;
	float:none;
	background-image: url(images/medium.jpg);
	background-repeat: no-repeat;
}

#medium a{
	float:left;
	height: 234px;
	width: 267px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	font-weight: bold;	
	display: block;
	background-image: url(images/medium.jpg);
	background-repeat: no-repeat;
	
}

#medium a:hover{
	float:left;
	height: 234px;
	width: 267px;
	background-image: url(images/medium_on.jpg);
	background-repeat: no-repeat;
	}

 #large {
	height: 265px;
	width: 240px;
	float:left;
	background-image: url(images/large.jpg);
	background-repeat: no-repeat;
}

#large a{
	float:left;
	height: 266px;
	width: 240px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	font-weight: bold;	
	display: block;
	background-image: url(images/large.jpg);
	background-repeat: no-repeat;
}

#large a:hover{
	float:left;
	height: 266px;
	width: 240px;
	background-image: url(images/large_on.jpg);
	background-repeat: no-repeat;
}


 #packages_foot{
	width: 774px;
	height: 38px;
	float:left;
	background-image: url(images/demo_design.jpg);
	background-repeat: no-repeat;
	font-family: "Century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-left: 10px;
	margin-left: 12px;
	}
	
	  /** Index RSS and blog link  **/

#updates {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 110px;
	float: right;
	height: 28px;
	text-transform: none;
	text-align: center;
	padding-top: 12px;
}

#craftysyntax {
	padding-top: 22px;

}

#portfolio {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 80px;
	line-height: 18px;
}


#portfolio a {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
	color: #006699;

}

/* ---------------------- Detail on the Contact Button ---------------------- */  

#contact_details {
	padding-bottom: 15px;
	padding-left: 5px;
	float: left;
	height: 165px;
	width: 185px;
	padding-top: 60px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

/* ---------------------- Detail on the Contact Button ---------------------- */  

#demotable td{

	border-right-width: 0px;
	border-bottom-width: 0px;
	border-bottom-style: dotted;
	border-bottom-color: #0099FF;
	border-right-style: dotted;
	border-right-color: #0099FF;
	height: 25px;
	text-align: left;
	width: 150px;
}

/* ---------------------- CMS headers on that page ---------------------- */  

#wordpress {
	height: 40px;
	width: 552px;
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	background-image: url(images/cmsword.jpg);
}

#joomla {
	
	height: 40px;
	width: 552px;
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	background-image: url(images/joomlacms.gif);
}

#bullet ul {
	line-height: 20px;
	text-align: left;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-image: url(images/bullet.png);
	margin-left: 10px;
	padding-left: 10px;
 }