body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #d0e6f4 url(images/grad_back.jpg) repeat-x top; color: #727272; }
#flowers { background: url(images/flowerbg.jpg) no-repeat center top;  }
#whitebg { background: url(images/white_bg.gif) no-repeat; height: 1045px; width: 947px; margin: 30px auto 0 auto;}
p { text-align:justify; }
p a { text-decoration: none; color: #04649d;}
p a:hover { text-decoration: underline; }
a img { border: none; }

/*-------------------top nav----------------------------*/
#nav { width: 500px; margin: 50px 0 0 50px; padding: 0; float: left; display: inline; }
#nav ul {  display: inline; padding: 0; margin: 0;}
#nav ul li { list-style: none;  float: left; /*background: url(images/nav.gif) no-repeat;*/ width: 105px; height: 36px; margin-right: 5px; display: inline;}
#nav a { text-decoration: none; color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; display: block; width: 105px; height: 36px; 
margin: 0 0 0 10px; padding: 0;}
#nav span { display: none; }
#nav ul li#home a { background: url(images/home.gif) no-repeat 0 0;}
#nav ul li#case a { background: url(images/casestudy.gif) no-repeat 0 0;}
#nav ul li#pep a { background: url(images/pepperio.gif) no-repeat 0 0;}
#nav ul li#contact a { background: url(images/contactus.gif) no-repeat 0 0;}
#nav ul li#services a { background: url(images/webservices.gif) no-repeat 0 0;}

#nav ul li#home a:hover { background: url(images/home.gif) no-repeat 0 -36px;}
#nav ul li#case a:hover { background: url(images/casestudy.gif) no-repeat 0 -36px;}
#nav ul li#pep a:hover { background: url(images/pepperio.gif) no-repeat 0 -36px;}
#nav ul li#contact a:hover { background: url(images/contactus.gif) no-repeat 0 -36px;}
#nav ul li#services a:hover { background: url(images/webservices.gif) no-repeat 0 -36px;}

/*--------------------end nav ---------------------------*/

#casetudy { text-align:justify; padding-left: 10px;}
#number { float: right; margin: 40px 40px 0 0; display: inline; padding: 0;}

#headerimg img { margin: 0 0 0 36px; padding: 0; }

h1,h2,h3,h4,h5 { font-family: Arial, "Times New Roman", Times, serif; }
h1 { font-size: 22px; font-weight: 400; color: #727272; margin: 20px 0 0; height: 34px;  }
h1#underline { background: url(images/headerline.gif) no-repeat 0px 28px;}

h2 { font-size: 20px; font-weight: 400; color: #727272; margin: 30px 0 10px; padding: 0; }
h3{ font-size: 20px; font-weight: 400; color: #00a3e6; margin: 5px 0 5px 10px; padding: 0;}
h4 { font-size: 12px; color: #68a2c4; margin: 0; font-weight: 400;}
h5 { font-size: 16px; }
#maincontent6 h3{ font-size: 20px; font-weight: 400; color: #00a3e6; margin: 10px 0; padding: 0;}

#maincontent { width: 570px; float: left; margin: 0 0 0 40px; display: inline;}
.maincontent4 { width: 280px; float: left; margin: 0 0 20px; display: inline;}

ul#questions { font-size: 16px; margin: 0; padding: 0;}
ul#questions li { margin: 0 0 5px; list-style: none; }
.light { color: #00a3e6; }
.dark { color: #04649d; }
#quote { color: #279400; font-size: 18px; font-style: italic; }


#webguide { width: 290px; height: 150px; float: left; border: 1px solid #e1e0e0; margin-top: 15px; }
#webguide ul { font-size: 14px; margin: 0; padding: 3px 0 0 25px;} 
#webguide ul li { list-style-image: url(images/blue_bullet.gif); padding-bottom: 6px;}
#webguide a {text-decoration: underline; color: #727272;}
#yesques { width: 245px; padding: 20px 0 0 30px; }



#homeright { float: left; margin: 30px 0 0 42px; width: 261px; height: 670px; display: inline; background: url(images/rightcol.jpg) no-repeat;}
#rightone { margin: 40px 0 8px 0; clear: both; height: 100px; }
#righttwo { margin: 65px 0 8px 0; clear: both; height: 100px; }
#rightone img, #righttwo img { float: left; padding: 0 8px 15px; }
#rightone p, #righttwo p { padding: 5px 8px 0 0; text-align: left; font-size: 13px;}
.homebox .title { color: #0079ae; font-weight: bold; margin: 0; padding: 0;}


.steps { margin: 30px 0 0; font-size: 11px; }
.tips { margin-top: 20px; }
.tips img { padding: 0 5px 0 0; }
.tips h3 {padding: 8px 0 0; }
.steps2 { margin: 30px 0 0; font-size: 11px; padding-left: 20px; }
.steps p, .steps2 p { width: 270px; padding: 0; margin: 0;}
.steps img, .steps2 img { padding: 0 8px 0 0;}
.maincontent4 p.floatright, .maincontent4 p.floatleft { padding: 30px 40px 20px 10px; }
.maincontent4 #webguide { margin: 30px 0 0; }

#pep1 { margin: 10px 30px 20px 30px; float: right;}
#pep2 { margin: 10px 30px 150px 30px; float: right;}
#pep2 p { text-align: center; margin: 0;}
#pep2 a img{ border: none; }

#diction { overflow: auto; height: 300px; width: 565px; border: 1px solid #CCC; margin: 20px 0 10px 0; }
#diction table { padding: 0 8px;}
#diction table td { border-bottom: 1px solid #e7e6e6; padding: 10px 0;}
#diction a {text-decoration: none; color: #006aa5;}
#diction a:hover {text-decoration: underline; color: #006aa5;}

#optiontxt strong { font-size: 16px; color: #006aa5; }
#optiontxt p { padding: 0 0 10px 120px; margin: 0;}
#pepperio { background: url(images/pep_white.jpg) no-repeat left bottom; }

#footer, #footer p { margin: 0 0 0 240px; padding: 0; color: #04649d; font-size: 11px;}

#footnote { width: 850px; margin: 0 auto; font-size: 10px; color:#999999; }

#green { color: #279400; }
#blue { color: #3752a5; }
#yellow { color: #fdc44f; }
#red { color: #cf3c40; }
.bluetxt { color: #04649d; }
.turq { color: #66c8f0; }
.darkturq { color: #2b9fd7; margin-top: 20px; }
#lightgrey { color: #cecfcf; }
.pepblue { color: #006aa5;}

.floatright { float: right;}
.floatleft { float: left; }
.alignright { text-align: right; }

/*----------------Pepperio right column---------------*/

#pepright { float: left; margin: 22px 0 0 42px; width: 261px; height: 600px; display: inline; background-color: #ecebeb;}
.pepsteps { margin: 20px 0 8px 0; clear: both; height: 90px;	}
.pepsteps img { float: left; padding: 0 8px; }
.pepsteps p { padding: 5px 8px 0 0; text-align: left; font-size: 13px;}
.pepsteps .title { color: #0079ae; font-weight: bold; margin: 0; padding: 0;}


/***********************************************************************/
/* forms                                                               */
/***********************************************************************/

form { margin:0; padding:0; }
label { float:left; clear:left; display:block; width:80%; margin:0 20px; margin-top:5px; font-weight:bold; font-size:11px; }
fieldset { border:0; margin:0; padding:0; }
fieldset p { margin-top:3px; margin-bottom:3px; font-size:12px; }
input, select, textarea { float:left; width:80%; margin:0 20px; padding:2px; margin-top:5px; font-size:0.9em; border:1px solid #BBB; 
font-family: Arial, Helvetica, sans-serif;}
input.button { width:78px; margin: 10px 0 0 20px; border:0; }
input.radio, input.checkbox { float:left; clear:left; width:15px; margin:2px 10px 2px 20px; border:0; }
select { width: auto;}
label.alt {  width:27%; margin: 5px 15px 0 20px; text-align: right; overflow: hidden; }
input.alt, select.alt {  width:50%; margin:0; margin-top:5px;}
select{  width: auto; }

form#brief label { float: left; }
form#brief input { float: right; width: 70%; margin: 2px 20px; background-color: #E2E2E2; border: none;}
form#brief #enquiry { width: 50%; }
form#brief #telephone { width: 50%; }
form#brief .button { width: auto; background: none; margin: 0 18px 0 60px;}
form#brief span { float: left; margin: 5px 0 0 7px;}