body {
	margin: 0px;
	padding: 0;
	background: #fff url(images/img1_new.png) repeat-x;
	font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #663399;
text-align:center; /* this is for the menu */
}

.aboutus {
	background: #fff url(images/img1_aboutus.png) repeat-x;
}

.services {
	background: #fff url(images/img1_services.png) repeat-x;
}

.portfolio {
	background: #fff url(images/img1_portfolio.png) repeat-x;
}

.contact {
	background: #fff url(images/img1_contact.png) repeat-x;
}


h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #c3d4a0;
}

h1 { font-size: 1.7em; }
h2 { font-size: 1.1em; }
h3 { font-size: 18px; }

p, ol, ul {
	line-height: 20px;
	color: #fff;
}

span {
	color: #ffff66;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
}




/* Header  height was 150*/

#header {
	width: 850px;
	height: 170px;
	margin: 0 auto;
	background: url(images/img2_logo2.png);
margin-bottom:-30px;
}

#headerhome {
	width: 850px;
	height: 170px;
	margin: 0 auto;
	background: url(images/img2_logo.png);
margin-bottom:-30px;
}


/*
#headeraboutus {
	width: 850px;
	height: 170px;
	margin: 0 auto;
background: url(images/img2_aboutus.jpg);
margin-bottom:-30px;
}
*/


/** slogan 

#slogan {
	width: 400px;
	height: 38px;
margin: 0 auto;			
margin: 32px 0px 0px 10px;
position: absolute;
  background-color: #ffffff;
filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;

}



#slogan h1 {
font-family: Arial;
	margin: 0;
	padding: 0;
	line-height: normal;
	font-size: 1.4em;
	color: #000;

}

#slogan h2 {
	margin: 0;
	padding: 0;
	line-height: normal;
	font-size: 1.2em;
	color: #000;

}

*/

/* Menu */



/* ok so this works! */
#menu .portfolio {
}








#menu {
text-align:left; /* for center align menu */
	width: 767px; /* put back to 850 if on good centering */
	height: 30px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 120px;
	height: 26px;
	padding: 4px 0 0 0;
	background: url(images/img3.gif);
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
}

#menu a:hover, #menu .active a {
	background: url(images/img4.gif);
	color: #999;
}


#menu .left a {
width: 82px;
background: url(images/menuleft.png) no-repeat;
}


#menu .right a {
width: 82px;
background: url(images/menuright.png) no-repeat;
}









/* Content   	border: 6px solid #6c696a;  	border: 6px solid #9999ff;*/

#content {
	width: 838px;
	margin: 0 auto;
	background: #221f20;
}

#content p {

}

#contentaboutus {
	width: 838px;
	margin: 0 auto;
	background: #93255c;
}



#contentservices {
	width: 838px;
	margin: 0 auto;
	background: #003663;
}

#contentportfolio {
	width: 838px;
	margin: 0 auto;
	background: #21414e;
}

#contentlogos {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentads {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentbusinesscards {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentbrochures {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentpostcards {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentflyers {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}

#contentcorporateid {
	width: 838px;
	margin: 0 auto;
	background: #fff;
}
#contentcontact {
	width: 838px;
	margin: 0 auto;
	background: #66263d;
}


/* youve changed the padding to accomodate the bg gradient, look to old versions*/
#columnone {
	float: left;
	width: 430px;
	padding: 0px 15px 0 15px;
}



/* these are the gradients behind the images....

.coloneaboutus {
	background: #93255c url(images/coloneaboutus.gif) repeat-x;
}

.colonecontact {
	background: #93255c url(images/colonecontact.gif) repeat-x;
}

.colonehome {
	background: #93255c url(images/colonehome.png) repeat-x;
}

.coloneportfolio {
	background: #93255c url(images/coloneportfolio.gif) repeat-x;
}

.coloneservices {
	background: #93255c url(images/coloneservices.gif) repeat-x;
}

*/



#columnone img {
	padding-top: 20px;
}

#columnone ul {
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
	border-top: thin solid #cc0033;
	margin: 10px 0 0 0;
	color: #fff;
padding: 0px;
}

/* for list on 1 line */
#columnone li {
	display: inline;
	list-style: none;
}


#columnone p {
	color: #fff;
}

#columnone strong {
	color: #006699;
}

#columnone a {
	color: #fff;
}

/* width was 320 . padding right was 23* */
#columntwo {
text-align: left; /* added to align menu */
	float: right;
	width: 313px;
	padding: 17px 37px 12px 0;
}

#columntwo p {
	color: #fff;
	line-height: 1.4em;
}

#columntwo h2 {
	font-size: 1.8em;
	color: #66cccc;
margin-bottom: -7px;
}



#columntwo ul {
	line-height: 1.5em;
}


#promo {
	float: right;
	padding: 0px 20px 5px 20px;
}


#contact {
	width: 250px;
}


#contact p {
	line-height: 1em;
}

#contact p.small {
}

#contact a {
	color: #fff;
}

#contact ul {
margin-bottom: -2px;
line-height: 1em;

}


.crumbtrail {
	float: left;
	color: #000;
	padding-left: 50px;
}

.crumbtrail p {
color: #999;
}

.crumbtrail a {
	text-decoration: underline;
	color: #000;
}

.crumbtrail a:hover, #crumbtrail .active a {
	color: #ccc;
	text-decoration: none;
}





/* portfolio image gallery */


/*  NOTE NB i think ie fixed this. so check and double check  ..........ok here your prob is theres too much margin or padding somewhere and its causing the crossover in firefox .... possibly the margin: 20px; in ul#gallery ... quite likely   */


/* was height 330 */
ul#gallery{
	width: 260px;
	height: 620px;
	float: right;
	margin: 20px;
padding-top: 30px;
	position: relative;
}
			
ul#gallery li{
	margin: 5px;
	float: left;
	display: inline;
	border: 1px solid #6c696a;
}

								
ul#gallery a span{
	display: none;
}

ul#gallery a:hover{
	background: none;
	z-index: 100;
}
	

/* width was 433     left was -500*/
ul#gallery a:hover span{
	position: absolute;
	width:500px;
	height: 300px;
	float: left;
	top: 20px;
	left: -510px;
	display: block;
}



/* end portfolio image gallery */





/* start of main portfolio page experimenting watch out!! */










#folioone {
	float: left;
	width: 100px;
	padding: 20px 20px 0 35px;
}

#folioone p {
	margin-top: -1px;
}

#folioone a {
	color: #fff;
}

#foliotwo {
	float: right;
	width: 100px;
	padding: 20px 35px 0 20px;
}

#foliotwo p {
	margin-top: -1px;
}

#foliotwo a {
	color: #fff;
}
/* end of disaster experimentation! */

 


.form {
	margin-left: 55px;
	color: #ccc;
}

.form ul {
	margin: 0;
	padding: 8px 0 2px 0;
	list-style: none;
}

.form.checkbox {
	display: inline;
}

.error {
	color: #ff0000;
margin-left:30px;
}



/* Footer */

#footer {
	width: 800px;
	margin: 0 auto;

}

#footer p {
	margin: 0;
	padding: 0 0 4px 0;
	text-align: center;
	font-size: 9px;
	color: #2e2e2e;
}

#footer a {
	color: #999;
}



#footerservices {
	width: 800px;
	margin: 0 auto;

}

#footerservices p {
	margin: 0;
	padding: 0 0 4px 0;
	text-align: center;
	font-size: 9px;
	color: #3b567a;
}

#footerservices a {
	color: #999;
}

#footerportfolio {
	width: 800px;
	margin: 0 auto;

}

#footerportfolio p {
	margin: 0;
	padding: 0 0 4px 0;
	text-align: center;
	font-size: 9px;
	color: #47616b;
}

#footerportfolio a {
	color: #999;
}