html,body,ul,li{color:#444;margin: 0; padding: 0;}
body{
  border-top: 15px solid #000; background:#fff;font-family:Verdana, sans-serif; font-size:0.8em;text-align:justify;
  }
h4{border-bottom: 5px solid #b6e784; font-weight:normal; font-size:135%; color:#000;margin-bottom:10px}
a{text-decoration:none; margin-right: 5px; font-weight:100; color:#74b7e7;}
form {text-align:justify}
#links a{background:url(../img/navGradient.gif) repeat-x top #000;}
#links a:link,#links a:visited{background:url(../img/navGradient.jpg) repeat-x top #000; padding:30px 10px 0 8px; border:2px solid #ccc;}
#links a:hover,#links a:active{background:#000;padding:28px 10px 0 8px;}
#links{margin-top: 50px;}
.highlight{border-bottom:1px dashed #b6e784;color:#e784b7;}

ul.highlight{
  position:relative;z-index: 1; color:#444; background:url(../img/gradient.jpg) repeat-x top #b6e784;
  margin-left: 0px; margin-top: 12px; border-bottom: 3px solid #b6e784;}  
.highlight li{color:#444;margin-right: 0px; padding: 5px 5px 5px 0px; margin-left: 20px;
  font-family:Georgia;font-weight:bold;font-size:0.9em;text-align:left; border-bottom:#fff solid 1px;}
#more{margin-top:15px;}
#more a{text-decoration:underline;color:#000; }
#more a.noStyle{text-decoration:none;}
#more a img{border:0 none;margin-left:5px;}
#faq dl{margin-top:150px;margin-bottom:100px}
#faq dt{padding:5px;border-bottom:solid 2px #b6e784; border-top:3px solid #b6e784;/*background:#b6e784;*/}
#faq dd{margin-top:10px;margin-bottom:20px;}

#main{ width:450px; margin: 0px auto 10px 500px /*525px*/; }
#main #viggo img{border: 4px solid #666;}
#main #viggo{position:absolute; top:350px; left: 0px; padding: 10px 10px 10px 80px; background:#eee url(../img/tRight.jpeg) no-repeat top right;}
#content{margin-top: 0px;}
.justify{text-align:justify}
.logo{position:absolute;top:15px; left:0/*position:absolute;top: 15px; left: 20px;*/}
/*.affiliates{font-size:85%}*/
.affiliates .highlight {color:#000; border-bottom:1px #000 solid;}
form{clear:both; }

/*code used here was retrieved from dynamicdrive.com*/
.cssform p{
color:#aaa;
width: 255px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 0px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}
.cssform label{
font-size:90%;
float: left;
margin-left: 0px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.cssform .message{font-size:80%;color: #aaa; font-family:arial;}
.inputs{
width: 250px;
}
.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 250px;
}
.cssform .emphasis{color:#000;}
.cssform textarea{
width: 250px;
height: 150px;
}

/*links  page*/

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html * html 
*/

.threepxfix{
margin-left: 3px;
}
#mainContact{position:absolute; top:250px; left:0; width: 354px;}
[id = mainContact]{position:fixed; top:345px; left:0; width: 354px;}/*making use of the attribute selector so that I can make use of the fixed positioning*/

.rjustify{color:#555; text-align:right;margin-bottom: 6px;}
.rjustify span{color:#000;}

.portfolio #content{margin:10px auto auto auto;text-align:center; height:100% }
.portfolio #content img{width: 150px; height:150px; border:3px solid #333}


div.note{font-size:85%;position:absolute; top: 120px/*140px*/; width:140px;left:785px /*810px*/;background:url(../img/gradient.jpg) repeat-x top #b6e784;; padding:3px; }
div.note div{background:#ccc;}
ul.serviceLinks{margin: 15px 10px 0 25px;}