/******** BASIC FORMATTING / STYLING ETC ********/

  body {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size: 1em;
	 color: #000066;
	}
	
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.1em;
		color: #006699;
		padding-left: 1em;
	}
	h4 {
		color: #006699;
	}
	#content h4 {
		padding-left: 1em;
	}
	.box h3 {
		letter-spacing: 0.3em;
	}
	p {
	  padding: 1.5em;
	  font-size: .8em;
	}
	
	a:link {
		font-weight: bolder;
	}
	a:visited {
		font-weight: bolder;
	}
	
	a:hover {
		color: #009966;
	}
	
	.bold {
		font-weight: bolder;
		
	}
	.italic {
		font-style: italic;
	}
	.center {
		text-align: center;
	}
	
	p.p_li {
		padding-top: 5px;
	}
	
	.large_red {
		font-size: 1.4em;
		color: red;
	}
	  p.box2 {
  	    padding-left: 0;
     }
	
	/****** ZERO ALL MARGINS AND PADDING *****/
	* {
		padding: 0;
		margin: 0;
	}	
	
	img {
		border: none;
	}
	
	  /****** MAIN NAVIGATION BAR - HORIZONTAL ******/
 #navbar {

		background: url(images/bg5.gif);
		width: 100%;
		text-align: center;
      margin-top: -10px;
	}
	
	#navbar ul {
	  list-style-type: none;
	  line-height: 1.5em;
	}
	
	#navbar li {
	font-size: .8em;
	display: inline;
	margin: auto;
	border-left: solid 1px white;
	margin-left: -5px;
	width: 15em;
	}
	
	#navbar a {
	  color: white;
	  width: 1em;
	  padding: 0.3em 1em 0.3em 1.5em;
	  text-decoration: none;
	}
	
	#navbar a:hover {
	  color: #000066;
	  background: url(images/bg7.gif);
	}
   
  .last {
    border-right: solid 1px white;
  }
  
  /* MAIN POINTS LIST ON HOMEPAGE */
  ul.mainpoints {
   list-style: none;
  	margin-left: 20px;
	font-size: 1em;
	line-height: 135%;
	color: #006699;
	font-weight: bold;
  }
  ul.mainpoints li {
   padding-left: 20px;
  	background: url(images/earth2.gif) no-repeat left;
  }
	
	
	/******* DIV STYLING - INCLUDING FORMATTING ETC FOR DIVS FOR EASE OF EDITING STYLES ETC ******/
	
	#wrapper {
	   width: 100%;
		min-width: 800px;
	}  /***** WRAPPER IS JUST TO GIVE MIN-WIDTH, SO THAT THINGS LOOK OK WHEN WINDOW IS RE-SIZED *****/
	

 #header {
	width: 100%;
	background: url(images/headbg3.png) repeat-x;
	position: relative;
	margin-bottom: 10px;
	height: 90px;
	}
	#header_inner { 
	padding:1em 2em; /* creates space between the box  and the content */
	}
	img#sub {
		position: absolute;
		top: 10px;
		right: 100px;
	}

	
	
	
  #content {
  	 float: left;
	 width: 60%;
	 margin: 2em 0 10px 1em;
	 background: #fff url(images/boxbg8.gif) repeat-x;
	 line-height: 130%;
  }
  #content_inner { 
    background: url(images/contentbg.png);
    padding: 1.5em;
    border-left: 1px solid #c2d3dc;
    border-right: 1px solid #c2d3dc;
    border-bottom: 1px solid #c2d3dc;
	}
  
  #top_rounded {
  	 background: url(images/boxbgl4.gif) no-repeat top left;
	}
  #content h2 {
  	background: url(images/boxbgr4.gif) no-repeat top right;
   padding: 3px;
	color: #fff;
	text-align: center;
	font-size: 1.3em;
	letter-spacing: 0.4em;
	height: 25px;
  }
  
  
  
  #sidebar1 {
  	 float: right;
	 width: 36%;
	 margin-bottom: 10px;
	 margin-top: 1em;
	 }
	 #sidebar1_inner {
	   padding:1em 1.2em; /* creates space between the box and the content */
	}
	/******* BOX DIVS - USED IN SIDEBAR 1 DIV ******/
  div.box {
	background: #fff url(images/boxbg8.gif) repeat-x;
	margin-bottom: 30px;
	position: relative;
  }
  .title {
  	 background: url(images/boxbgl4.gif) no-repeat top left;
	 height: 30px;
  }
  .box h3 {
  	 background: url(images/boxbgr4.gif) no-repeat top right;
    padding: 5px;
	 color: #fff;
	 text-align: center;
	}
  .box_inner {
    padding: 10px 20px 20px 20px;
    background: url(images/contentbg2.png) repeat-x;
    border-left: 1px solid #c2d3dc;
    border-right: 1px solid #c2d3dc;
    border-bottom: 1px solid #c2d3dc;
 }
  .box p {
 	 padding: 1px 8px 8px 8px;
	 line-height: 150%;
 }
	
	
	
	#footer {
	  clear:both; /* makes the footer sit below whichever column is longest */
	  background: url(images/headbg3.png);
	  height: 100px;
	  border-top: 1px dotted #c2d3dc;
	  position: relative;
	}
	 
   #footer_inner {
	  padding:.5em 1em; /* creates space between the box and the content */
	  text-align:center;
	}
	
	#footer p {
		margin-left: 6.5em;
		letter-spacing: 0.2em;
		font-size: 0.7em;
	}
	#goodnet {
		position: absolute;
	   right: 100px;
		bottom: 25px;
	}
	img#ciw {
		position: absolute;
		left: 10px;
	}
	img#w3c {
		position: absolute;
		right: 10px;
	}
	
	
	
	
	
#header_inner, #sidebar1_inner, #content_inner {
	overflow:hidden; /* clips oversize elements that would otherwise expand divs and break the layout */
	}



	
  
	

 
 
  /****** IMAGE STYLING IN BOX DIVS *****/
 .box img {
 	float: left;
	padding-bottom: 30px;
	padding-right: 15px;
	padding-top: 10px;
	}
	img.client_img {
	  float: none;
	  padding-bottom: 5px;
	}
  .client {
  	 text-align: center;
  }
  
  /****** PORTFOLIO BOX DIVS ******/
   .box_p {
  	  margin-bottom: 30px;
	  border-bottom: 1px dotted #000066;
	  padding: 10px 10px 50px 10px;
	}
  .box_p img {
  	 float: left;
	 margin-right: 20px;
	 clear: both;
  }
  .box_p p {
	 margin-left: 250px;
  }
  .box_p a.external {
  	 float: right;
	 background: url(images/globe.gif) no-repeat right top;
	 padding-right: 18px;
	 border-bottom: none;
	 font-weight: normal;
  }
    a.external:hover {
  	  background-position: right -20px;
	  color: #339900;
  }
  

 
 
  
  /***** VARIATIONS FOR DIFFERENT PAGES - DEFINED BY BODY ID ******/
  #portfolio #content, #thanks #content {
  	 width: 80%;
	 margin-left: auto;
	 margin-right: auto;
	 float: none;
	 margin-top: 50px;
  }
  #portfolio #content_inner {
  	 background: url(images/contentbg3.png) repeat-x;
  }
  #thanks #content_inner {
  	 margin-bottom: 100px;
  }
  #jargonbuster #content_inner,#packages #content_inner {
  	  background: url(images/contentbg4.png) repeat-x;
  }
  #packages #content {
  	  width: 65%;
  }
  #packages #sidebar1 {
  	  width: 31%;
  }

  
  /****** STYLING FOR PACKAGES BOXES ****/
  .package_box {
     
  	  border-left: 1px solid #c2d3dc;
	  border-right: 1px solid #c2d3dc;
	  border-bottom: 1px solid #c2d3dc;
	  margin: 20px;
  }
  .package_box_inner {
  	 padding: 10px;
	 background: #fff url(images/packbg.gif) no-repeat bottom right;
  }
  h3.prices {
  	background: url(images/boxbg10.png);
	color: #fff;
	padding: 3px 3px 3px 8px;
  }
  
  
  
  
  /****** STYLING FOR UL IN PACKAGES BOXES ********/
   ul.package_list {
  	 list-style: none;
	 line-height: 150%;
	 padding-bottom: 30px;
  }
  ul.package_list li {
  	background: url(images/earth2.gif) no-repeat left;
	font-size: 0.8em;
	padding-left: 20px;
	font-weight: bold;
  }
  .crossout {
  	text-decoration: line-through;
	padding-right: 10px;
	font-weight: lighter;
	letter-spacing: normal;
  }
  
  img#offer {
   position: absolute;
	top: 130px;
	right: -40px;
  }
  
  
  /********* FORM STYLING *********/
  form {
  	float: left;
	width: 85%;
	margin: 20px 20px 0 25px;
	padding: 1em .75em .5em;
	border: 2px solid #c2d3dc;
	background: #f4f4f4;
	font-size: .8em;
  }
  form h3 {
  	font-size: 1.4em;
	padding-left: 0;
  }
  
  div.formsection {
  	float: left;
	width: 100%;
	border-bottom: 1px solid #c2d3dc;
  }
  input {
  	font-size: .8em;
  }
  
  
  label {
  	display: block;
	clear: both;
	font-size: 85%;
	font-weight: bold;
	margin: .5em 0 0;
  }
  
  input[type="submit"], input[type="reset"] {
  	float: right;
	margin: .5em 0;
	width: 100px;
	background: url(images/bg5.gif);
	padding: 5px;
	color: #fff;
  }
  
  .buttongroup {
  	float: left;
  }
  .buttongroup input {
  	float: left;
	clear: both;
	margin: 4px 0 0 0;
	padding-left: 0;
	line-height: 0;
  }
  .buttongroup label {
  	
	width: 24em;
	float: left;
	margin: 0 0 0 .5em;
	font-weight: normal;
	clear: none;
  }
  ul#contact_list {
  	padding: 5px;
	margin-left: 10px;
  }