@import url('portfolio.css');

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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color:#E1E1E1;
	padding: 0;
	margin: 0;
	background: url(../grfx/body-bg.gif);
}
html>body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color:#E1E1E1;
	padding: 0;
	margin: 0;
	background: url(../grfx/body-bg.gif);
}

#logo-holder {
	position: absolute;
	top: 14px;
	left: 17px;
	width: 220px;
	height: 120px;
	background: url(../grfx/webextra-logo.png) top left no-repeat;
}

#logo-holder h1 {
	position: absolute;
	left: -999em;
}

* html #logo-holder {
	position: absolute;
	top: 14px;
	left: 17px;
	width: 220px;
	height: 120px;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/webextra-logo.png', sizingMethod='crop');
}

#navigation {
	position: absolute;
	top: 148px;
	left: 41px;
	width: 897px;
	height: 33px;
	padding: 6px 0 0 24px;
	margin: 0;
	background: url(../grfx/nav-bg.gif) top left no-repeat;
}

#navigation ul {
	font-size: 0.7em;
	margin: 0;
	padding: 0;
}

#navigation li {
	float: left;
	list-style: none;
	font-weight: bold; /* font properties added to fool IE */
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

#navigation li a {
	border: 0;
	display: block;
	height: 26px;
	text-decoration: none;
}

#navigation li a span{
	display: none;
}

#navigation li#home a {
	width: 88px; 
	background: url(../grfx/nav.png) 0px 0px no-repeat;
}

#navigation li#about-us a {
	width: 109px; 
	background: url(../grfx/nav.png) -88px 0px no-repeat;
}
	
#navigation li#services a {
	width: 108px; 
	background: url(../grfx/nav.png) -197px 0px no-repeat;
}
/*
#navigation li#toolbox a {
	width: 117px; 
	background: url(../grfx/nav.png) -305px 0px no-repeat;
}
*/
#navigation li#portfolio a {
	width: 113px; 
	background: url(../grfx/nav.png) -422px 0px no-repeat;
}

#navigation li#contact a {
	width: 97px; 
	background: url(../grfx/nav.png) -539px 0px no-repeat;
}

#banner-holder {
	position: absolute;
	top: 191px;
	left: 41px;
	width: 702px;
	height: 157px;
	padding: 0;
	margin: 0;
}

#banner-holder h2 {
	margin: 0;
}

#banner-filler {
	position: absolute;
	top: 191px;
	left: 744px;
	width: 5px;
	height: 157px;
	padding: 0;
	margin: 0;
	background: url(../grfx/banner-filler.png) top left no-repeat;
}

* html #banner-filler {
	position: absolute;
	top: 191px;
	left: 735px;
	width: 5px;
	height: 157px;
	padding: 0;
	margin: 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/banner-filler.png', sizingMethod='crop');
}

#enquire-button-holder {
	position: absolute;
	top: 191px;
	left: 748px;
	width: 214px;
	height: 157px;
	padding: 0;
	margin: 0;
}

#content-container {
	position: absolute;
	top: 353px;
	left: 41px;
	width: 921px;
	padding: 0;
	margin: 0;
}

* html #content-holder {
	float: left;
	width: 921px;
	padding: 12px 0 10px 0;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/content-bg.png', sizingMethod='scale');
}

#content-holder {
	float: left;
	top: 353px;
	left: 41px;
	width: 921px;
	padding: 12px 0 10px 0;
	margin: 0 0 6px 0;
	background: url(../grfx/content-bg.png);
}

#content-holder .price {
	position: absolute;
	left: -999em;
}

#startup-kit-holder {
	float: left;
	width: 266px;
	padding: 0 5px 0 0;
	margin: 0;
}

#startup-kit-holder span {
	color: #bfca30;
	font-weight: normal;
	font-size: 90%;
}

h3.startupkit,
p.startupkit a {
	color: #bfca30;
	font-weight: normal;
}

#startup-kit-holder a {
	color: #bfca30;
	font-size: 80%;
	font-weight: normal;
}

#startup-kit-holder p {
	margin-left: 64px;
}

/* IE6 PNG hack */

* html #startup-kit-holder-price, #web-pack-1-holder-price, #web-pack-2-holder-price, #web-pack-3-holder-price { 
	behavior: url("common/iepngfix.htc");
}

#startup-kit-holder-price {
	float: right;
	width: 186px;
	height: 57px;
	padding: 0;
	margin: 0 14px 0 0;
	background: url(../grfx/products/web-startup-kit-price.png) top right no-repeat;
}

* html #web-pack-holder-1 {
	float: left;
	width: 213px;
	padding: 0 4px 0 0;
	margin: 0;
}

#web-pack-holder-1 {
	float: left;
	width: 213px;
	padding: 0 5px 0 0;
	margin: 0;
}

#web-pack-holder-1 span {
	color: #00b2d9;
	font-weight: normal;
	font-size: 90%;
}

h3.webpack1,
p.webpack1 a {
	color: #00b2d9;
	font-weight: normal;
}

#web-pack-holder-1 a {
	color: #00b2d9;
	font-size: 80%;
	font-weight: normal;
}

#web-pack-holder-1 p {
	margin-left: 7px;
}

#web-pack-1-holder-price {
	float: right;
	width: 186px;
	height: 57px;
	padding: 0;
	margin: 0 14px 0 0;
	background: url(../grfx/products/web-pack-1-price.png) top right no-repeat;
}

* html #web-pack-holder-2 {
	float: left;
	width: 213px;
	padding: 0 4px 0 0;
	margin: 0;
}

#web-pack-holder-2 {
	float: left;
	width: 213px;
	padding: 0 5px 0 0;
	margin: 0;
}

#web-pack-holder-2 span {
	color: #f7941e;
	font-weight: normal;
	font-size: 90%;
}

h3.webpack2,
p.webpack2 a {
	color: #f7941e;
	font-weight: normal;
}

#web-pack-holder-2 a {
	color: #f7941e;
	font-size: 80%;
	font-weight: normal;
}

#web-pack-holder-2 p {
	margin-left: 7px;
}

#web-pack-2-holder-price {
	float: right;
	width: 186px;
	height: 57px;
	padding: 0;
	margin: 0 14px 0 0;
	background: url(../grfx/products/web-pack-2-price.png) top right no-repeat;
}

#web-pack-holder-3 {
	float: left;
	width: 213px;
	padding: 0;
	margin: 0;
}

#web-pack-holder-3 span {
	color: #ec008c;
	font-weight: normal;
	font-size: 90%;
}

h3.webpack3,
p.webpack3 a {
	color: #ec008c;
	font-weight: normal;
}

#web-pack-holder-3 a {
	color: #ec008c;
	font-size: 80%;
	font-weight: normal;
}

#web-pack-holder-3 p {
	margin-left: 7px;
}

#web-pack-3-holder-price {
	float: right;
	width: 186px;
	height: 57px;
	padding: 0;
	margin: 0 14px 0 0;
	background: url(../grfx/products/web-pack-3-price.png) top right no-repeat;
}

* html #web-pack-3-holder-price {
	float: left;
	width: 186px;
	height: 57px;
	padding: 0;
	margin: 0;
	background: url(../grfx/products/web-pack-3-price.png) top right no-repeat;
}

* html #info-holder {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/info-bg.png', sizingMethod='scale');
}
#info-holder {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: url(../grfx/info-bg.png);
}

* html #info-holder-full {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/info-bg-full.png', sizingMethod='scale');
}
#info-holder-full {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: url(../grfx/info-bg-full.png);
}

* html #contact-holder {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/contact-bg.png', sizingMethod='scale');
}

#contact-holder {
	float: left;
	width: 921px;
	padding: 0;
	margin: 0 0 6px 0;
	background: url(../grfx/contact-bg.png);
}

#info-content-holder-full {
	float:left;
	width:865px;
	padding: 12px 22px 12px 32px;
	margin:0;
}
#info-content-holder {
	float: left;
	width: 688px;
	padding: 12px 54px 12px 32px;
	margin: 0;
}
#info-content-holder h4,
#info-content-holder-full h4,
#contact-content-holder h4,
#contact-details h4 {
	color: #E76E34;
/*	font-size: 0.9em;*/
	font-weight: bold;
}

#contact-content-holder {
	float: left;
	width: 450px;
	padding: 12px 54px 12px 32px;
	margin: 0;
}

#web-bolt-ons-holder {
	float: left;
	width: 147px;
	padding: 0;
	margin: 0;
}

#contact-details {
	float: left;
	width: 350px;
	padding: 12px 10px 12px 10px;
	margin: 0;
}

#web-bolt-ons-holder h4 {
	margin: 0;
}

#web-bolt-ons-holder p {
	padding: 0 5px;
}

#web-bolt-ons-holder ul {
	font-size: 0.7em;
	margin: 0;
	padding: 25px 0 0 25px;
}

#web-bolt-ons-holder li {
	list-style: none;
	font-weight: bold;
	margin: 0;
	padding: 0 0 20px 0;
}

#web-bolt-ons-holder li a {
	display: block;
}

#web-bolt-ons-holder li a span {
	display: none;
}

#web-bolt-ons-holder ul li#email-marketer a {
	width: 95px;
	height: 117px;
	background: url(../grfx/bolt-ons/email-marketer.png) top left no-repeat;
}

#web-bolt-ons-holder ul li#search-engine-optimisation a {
	width: 95px;
	height: 132px;
	background: url(../grfx/bolt-ons/search-engine-optimisation.png) top left no-repeat;
}

#web-bolt-ons-holder ul li#website-maintenance a {
	width: 103px;
	height: 131px;
	background: url(../grfx/bolt-ons/website-maintenance.png) top left no-repeat;
}
#web-bolt-ons-holder ul li#ecommerce-unleashed a {
	width: 103px;
	height: 131px;
	background: url(../grfx/bolt-ons/ecommerce-unleashed.png) top left no-repeat;
}
#web-bolt-ons-holder ul li#content-management-systems a {
	width: 103px;
	height: 143px;
	background: url(../grfx/bolt-ons/content-management-system.png) top left no-repeat;
}
#web-bolt-ons-holder ul li#photo-gallery a {
	width: 101px;
	height: 114px;
	background: url(../grfx/bolt-ons/photo-gallery.png) top left no-repeat;
}
#web-bolt-ons-holder ul li#flash-banner a {
	width: 101px;
	height: 131px;
	background: url(../grfx/bolt-ons/flash-banner.png) top left no-repeat;
}

#testimonials {
	float: left;
	width: 921px;
	height:75px;
	padding:0;
	margin: 0 0 5px 0;
	background: url(../grfx/footer-bg.png) top left;
}

* html #testimonials {
	float: left;
	width: 921px;
	height:75px;
	padding:0;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/footer-bg.png', sizingMethod='scale');
}

* html #testimonials p,
*:first-child+html #testimonials p,
#testimonials p {
	padding-left: 175px;
	margin-top:-55px;
}

#testimonials h4 {
	margin:0;
}

#footer {
	float: left;
	width: 901px;
	padding: 0 10px;
	margin: 0 0 5px 0;
	background: url(../grfx/footer-bg.png) top left;
}

* html #footer {
	float: left;
	width: 901px;
	padding: 0 10px;
	margin: 0 0 6px 0;
	background: none;
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='grfx/footer-bg.png', sizingMethod='scale');
}

* html #footer p {
	margin: 20px;
}

*:first-child+html #footer p {
	margin: 20px;
}

html #footer p,
html #footer a {
	text-align:right;
	color:#838383;
}

footer p,
footer a {
	text-align:right;
	color:#838383;
}

a {
	color: #E76E34;
}

a:hover {
	text-decoration: none;
}

a img {
	border: none;
}

/*p,ul {
	font-size: 0.8em;
}
td {
	font-size: 0.8em;
}*/
th {
	text-align:left;
	/*font-size: 0.8em;*/
}
/* contact form styles */

* html #contact-form-holder {
	width: 300px;
	margin: 0 auto;
	padding: 0;
}

#contact-form-holder {
	width: 300px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

fieldset {
	padding: 5px;
	border: none;
}

.col1 {
	text-align: right;
	width: 115px;
	padding: 5px 5px 0 0;
	margin: 0;
	float: left;
	font-size: 0.7em;
}

.col2 {
	float: left;
	width: 175px;
	margin: 0;
}

.col1-verification-code {
	float: left;
	text-align: right;
	padding: 12px 5px 0 0;
	width: 115px;
	font-size: 0.7em;
}

.col2-verification-code {
	float: left;
	width: 180px;
	height: 31px;
	margin: 5px 0 0 0;
}

* html .verification-code {
	margin-bottom: -4px;
}

*:first-child+html .verification-code {
	margin-bottom: -4px;
}

.verification-code {
	margin-bottom: -8px;
}

.col2comment {
	float: left;
	width: 175px;
	padding: 0 0 10px 0;
	margin: 0;
}

.col1comment {
	float: left;
	text-align: right;
	padding: 5px 5px 0 0;
	width: 115px;
	font-size: 0.7em;
}

div.row {
	float: left;
	clear: both;
	width: 300px;
}

.wrong-code {
	float: left;
	clear: both;
	width: 300px;
	padding: 0 0 0 40px;
	color: #FF0000;
}

.code-input {
	width: 104px;
	height: 22px;
	margin: 2px 5px 0 0;
	border: none;
	color: #ffffff;
	padding: 5px 1px 1px 3px;
	background-color: #444444;
	font-size: 0.7em;
}

.submit-row {
	text-align: right;
	float: left;
	clear: both;
	width: 288px;
	padding: 10px 0 20px 0;
}

input {
	/*width: 158px;
	margin: 0 0 15px 0;*/
	height: 18px;
	margin: 0;
	border: none;
	color: #ffffff;
	padding: 5px 1px 1px 5px;
	background-color: #444444;
	font-size: 80%;
}
input[type="radio"],
input[type="checkbox"] {
  /* same colors as |input| rule, but |!important| this time. */
  background-color: transparent;
}
input.costs {
	font-size:90%;
	color:#E76E34;
	font-weight:bold;
}
textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-stretch: wider;
	background-color: #444444;
	border: none;
	color: #ffffff;
	margin: 0;
	padding: 5px 1px 1px 5px;
	width: 158px;
	overflow: auto;
}

img.ver-image {
	margin:0;
	padding:0;
	line-height:10px;
}
.button {
	/*float: right;
	margin: 10px 0 0 0;
	padding: 0 0 1px 0;
	width: 50px;*/
	font-size: 90%;
	height: 24px;
	margin:0;
	border: none;
	color: #ffffff;
	background-color: #444444;
	padding: 0 10px;
}
.button:hover {
	color: #fff;
	background-color:#333;
}

.header {
	background-color:#444444;
	color:#E76E34;
	font-size:1.2em;
	line-height:20px;
}
.subheading {
	background-color:#282828;
	line-height:20px;
}
.formsubmit {
	line-height:30px;
	font-weight:bold;
	color:#E76E34;
}
.contactdetails {
	line-height:18px;
}
.navtext {
	text-align:left;
	width:350px;
	border-width:1px;
	border-style:solid;
	border-color:#E76E34;
	background-color:#111;
	layer-background-color:#444444;
	color:#E1E1E1;
}