/* Colors -- Blue: #035aa6 */

@import "reset.css";

/*------------------------------------------------*/
/*-----------------GENERAL STYLES-----------------*/
/*------------------------------------------------*/
html, body { background-color: #eeeeee; color: #555555; font-family: Arial, Helvetica, sans-serif; line-height: 22px; font-size: 12px; }
#wrap { width: 960px; margin: 0 auto; }
h3 { font-size: 20px; letter-spacing: -0.5px; }
h4 { font-size: 16px; }
p { letter-spacing: -0.2px; margin: 0 0 15px 0; }
a { color: #035aa6; text-decoration: none; }
a:hover {  color: #555555; text-decoration: none; }

/*------------------------------------------------*/
/*---------------------TOOLS----------------------*/
/*------------------------------------------------*/
.hline { clear: both; background: url(images/hline.png) no-repeat; width: 959px; height: 2px; }
.vline { float: left; background: url(images/vline.png) no-repeat; width: 2px; height: 152px;  }
.vline-long { float: left; background: url(images/vline-long.png) no-repeat; width: 2px; height: 357px;  }
.grey { color: #888888; }
.grey a:hover { color: #035aa6;}
.cache-images { display: hidden; }

/*------------------------------------------------*/
/*-----------------HEADER-------------------------*/
/*------------------------------------------------*/
#header { margin: 70px 0 0 0; height: 125px; }
#header h1 { float: left; background: url(images/name.png) no-repeat; height: 76px; width: 600px; text-indent: -9999px; margin: 0 0 0 -5px; }
#header h2 { float: right; background: url(images/subtitle.png) no-repeat; width: 333px; height: 42px; text-indent: -9999px; margin: 40px 0 0 0; }

/*------------------------------------------------*/
/*-------------------INFO-------------------------*/
/*------------------------------------------------*/
#info { margin: 35px 0 0 0; height: 187px; }
#info #about-me { float: left; width: 540px; margin: 0 40px 0 0; }
#info #about-me img { float: left; padding: 4px; background-color: #cccccc; margin: 0 38px 0 0; }
#info #about-me p { margin: 0 0 14px 0; }
#info #about-me h3 { padding: 0 0 10px 0; }
#info .vline { margin: 0 0 0 0; }
#info #contact-info { float: left; margin: 0 0 0 38px; width: 340px }
#info #contact-info h3 { padding: 0 0 10px 0; }
#info #contact-info .contact-large, #info #about-me .status  { font-size: 16px; padding: 0 0 0 0; margin: 0 0 4px 0; }
#info #contact-info p.contact-info { margin: 0 0 9px 0; }

/*------------------------------------------------*/
/*-------------------PORTFOLIO--------------------*/
/*------------------------------------------------*/
#portfolio { margin: 30px 0 20px 0; }
#portfolio h3 { margin: 0 0 20px 0; }
#portfolio img { padding: 4px; background-color: #cccccc; margin: 0 0 13px 13px; }
#portfolio img:hover { padding: 4px; background-color: #888888; margin: 0 0 13px 13px; }
#portfolio img.first { margin-left: 0px; }

/*------------------------------------------------*/
/*-------------------SERVICES---------------------*/
/*------------------------------------------------*/
#services { margin: 30px 0 0 0; }
#services h3 { padding: 0 0 20px 0; }
#services .service { float: left; width: 290px; margin: 0 0px 30px 45px; }
#services .service.first { margin-left: 0px; }
#services .service img { float: left; margin: 2px 10px 0 -2px; }
#services .service p { margin: 5px 0 0 0; }

/*------------------------------------------------*/
/*-------------------FURTHER INFO-----------------*/
/*------------------------------------------------*/
#further-info { float: left; margin: 30px 0 20px 0; }
#further-info #testimonials { float: left; width: 444px; margin: 0 35px 0 0; }
#further-info #testimonials h3 { padding: 0 0 20px 0; }
#further-info #testimonials .testimonial { margin: 0 0 20px 0; }
#further-info #testimonials .testimonial img { float: left; padding: 4px; background-color: #cccccc; margin: 5px 20px 0 0; }
#further-info #testimonials .testimonial p { margin: 0 0 0 0; }
#further-info #testimonials .testimonial p.testimonial-text { margin: 0 0 8px 0; }
#further-info #testimonials .testimonial .testimonial-name { margin: 0 0 -4px 0; font-weight: bold; }
#further-info #testimonials .testimonial .testimonial-link { font-size: 12px; }

#further-info #contact { float: left; width: 439px; margin: 0 0 0 40px; }
#further-info #contact #contactform { margin: 0 0 0 -3px; }
#further-info #contact h3 { padding: 0 0 20px 0; }
#further-info #contact p { margin-left: 1px; }
#further-info #contact input { background: url(images/input-bg.png) no-repeat; border: none; width: 264px; font-size: 12px; color: #555555; padding: 13px 15px 17px 15px; margin: 0 0 8px 0; font-family: Arial, Helvetica, sans-serif; }
#further-info #contact label { padding: -2px 0 0 0; }
#further-info #contact textarea { background: url(images/textarea-bg.png) no-repeat; width: 340px; height: 105px; border: none; font-size: 12px; color: #555555; padding: 12px 20px 17px 15px; font-family: Arial, Helvetica, sans-serif; line-height: 18px; }
#further-info #contact .submit { background: url(images/submit-message-button.png) no-repeat; width: 106px; height: 39px; margin: 2px 0 0 -3px; }
#further-info #contact .submit:hover { background: url(images/submit-message-button-hover.png) no-repeat; width: 106px; height: 39px; }

.contact_error { background: #eeeeee url('images/cross.png') no-repeat 10px center; height: 22px; padding: 3px 10px 3px 35px; color:#555555; border: 1px solid #888888; background-color: #cccccc; margin: 0 0 15px 0; }
#contact #email_sent img { float: left; padding: 1px 10px 0 8px; }
#contact #email_sent { height: 22px; padding: 3px 0 3px 0; color:#555555; border: 1px solid #888888; background-color: #cccccc; margin: 0 0 0 1px; }

/*------------------------------------------------*/
/*--------------------FOOTER----------------------*/
/*------------------------------------------------*/
#footer { margin: 20px 0 0 0; height: 50px; width: 960px; }
#footer p { float: left; margin: -12px 0 0 0; color: #888888; }
#footer .design { float: right; }