/*------------------------------
=CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; list-style: none; position: relative; cursor: default;}

/* GENERAL */
html, body {height: 100%; width: 100%; }

body {font-family: MuseoSans-500; color: #333; font-size: 14px; line-height: 1.8; }
body a, body a:hover {text-decoration: none; }
body a {color: #900;}
body a:hover {color: #333;}

body p {margin: 0px 0px 10px; }

/* LAYOUT */

#container {width: 100%; }
		
.wrap {width: 1010px; margin: 0px auto; position: relative; display: block; padding-top: 15px; }

.page_wrap {width: 704px; min-height: 450px; margin: 0px 25px 0px 35px; display: block;  }

/* CONTENT */

.page_wrap h1, .page_wrap h2 {font-size: 24px; font-family: MuseoSlab-500; font-weight: bold; letter-spacing: -1px; margin: 0px; padding: 0px 0px 10px; color: #900; }
.page_wrap h2 {font-size: 18px; padding-bottom: 5px; border: none; }

a.twitter {padding-left: 40px; background: url(../images/contact-twitter.png) 2px 0px no-repeat; height: 30px; display: block; clear: left; vertical-align: middle; text-decoration: none;}
a.linkedin {padding-left: 40px; background: url(../images/contact-linkedin.png) 2px 3px no-repeat; height: 30px; display: block; clear: left; vertical-align: middle; text-decoration: none;}
a.behance {padding-left: 40px; background: url(../images/contact-behance.png) 2px 3px no-repeat; height: 30px; display: block; clear: left; vertical-align: middle; text-decoration: none;}
a.email {padding-left: 40px; background: url(../images/contact-email.png) 2px 3px no-repeat; height: 30px; display: block; clear: left; vertical-align: middle; text-decoration: none;}

/* HEADER */
.header {width: 100%; display: block; clear: both; background: url(../images/header-stripe.png) center bottom repeat-x; border-top: 3px solid #900; } 
.header .header_content {display: block; width: 1050px; height: 95px; padding: 0px; margin: 0px auto;}
.header .header_content .logo {position: absolute; top: 10px; left: 0px; display: block; width: 350px; height: auto; }
.header .header_content .contact {position: absolute; margin: 0px; top: 0px; padding: 0px; left: 783px; display: block; height: 59px; vertical-align: top; }

a.hello {background: #900; color: white;}
a:hover.hello {background: #999; color: white;}
a.hello, a:hover.hello {padding: 10px 20px; margin: 0px;float: left; font-family: MuseoSlab-500;font-size: 18px;text-decoration: none;
-moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px;}
a.hello span {font-family: MuseoSlab-500italic; font-size: 11px; display: block; margin: 0px; padding: 0px; top: -10px;}

/* NAV */
.menu {display: block; width: 211px; margin: 0px 35px 0px 0px; padding: 0px 0px 35px; list-style: none; float: right; border-left: 1px solid #333; }
.menu li {margin: 0px 15px 0px 25px; padding: 10px 0px; letter-spacing: 1px; text-transform: uppercase; clear: both; border-bottom: 1px solid #333; }
.menu li a {font-family: MuseoSans-900; font-size: 24px; text-decoration: none; color: #900; line-height: 1.1; display: block; }
.menu li a:hover, .menu li a.active {text-decoration: none; color: #666;}
.menu li a span {font-family: MuseoSans-500; font-size: 12px; clear: both; text-decoration: none; text-transform: lowercase; display: block; color: #666; }
.menu li a:hover span, .menu li a.active span {color: #900;}

/* HOME */
.home1, .home2 {float: left; display: block; }
.home1 {margin-right: 44px; width: 400px;}
.home2 {width: 260px; margin-bottom: 30px;}


/* PORTFOLIO */
.project {display: block; margin: 0px 15px 10px 0px; width: 210px; float: left;  }
.project img {display: block; width: 206px; height: 75px; padding: 2px; border: 1px solid #900;}
.project span.title {font-size: 14px; font-family: MuseoSans-900; color: #900; margin: 5px 0px 10px;}
.project span.description {font-size: 11px; clear: left; display: block; line-height: 1.2; min-height: 40px;}

/* PORTFOLIO PAGES */
.project-description {float: right; width: 250px;  margin: 10px 0px 0px 25px;}
.project-description span {color: #900; font-family: MuseoSlab-500; font-size: 14px; }
.project-description p {min-height: 50px; margin-bottom: 10px; }
.testimonial {display: block; text-align: right; font-size: 10px; color: #333;}
a.return {display: block; padding-left: 20px; background: url(../images/return.png) left 4px no-repeat; font-size: 14px;}
.project-samples {width: 420px; margin: 0px;}
.project-samples img {width: 420px; height: auto; }
.project-samples .web {border: 1px solid #333; }
.project-samples span {font-family: MuseoSans-900; color: #900; font-size: 14px; margin: 10px 0px 10px; clear: left; padding-bottom: 3px; border-bottom: 1px solid #333; display: block; }
.project-samples a.return-web {display: block; padding-left: 20px; background: url(../images/return.png) left 4px no-repeat; margin-bottom: 15px;}

/* SERVICES */
ul.design-services {padding: 0px; margin: 0px 0px 15px 25px; list-style:none; }
ul.design-services span {font-family: MuseoSans-900; font-size: 14px; color: #900; }
ul.design-services li {margin: 0px; padding: 3px 0px 5px 20px; background: url(../images/services-arrow.png) left 7px no-repeat; }

/* CONTACT */
.contact1, .contact2 {float: left; display: block; }
.contact1 {margin-right: 44px; width: 310px; }
.contact2 {width: 350px;}

/* CONTACT FORM */
.contact1 form span {float: left; clear: left; display: block; width: 100%;}
form input {padding: 5px; width: 250px; margin-bottom: 10px; display: block; float: left; clear: left;}
form select {margin-bottom: 10px;}
form textarea {padding: 5px; margin-bottom: 10px; display: block; width: 300px;}

/* FOOTER */
.footer {position: relative; width: 100%; display: block; clear: both; display: block; padding-top: 15px; top: 25px; background: url(../images/header-stripe.png) center top repeat-x;   }
.footer .info, .footer .site, .footer .social {position: relative; float: left; display: block; }
.footer div h2 {font-size: 14px; color: #900; font-family: MuseoSlab-500;}
.footer .info {width: 510px;}
.footer .info p {width: 400px; margin-bottom: 10px; font-family: MuseoSans-500; color: #333; }

.footer .site {width: 250px; }
.footer .site li a {padding-left: 20px; background: url(../images/services-arrow.png) left 0px no-repeat; color: #333; font-family: MuseoSans-500; }
.footer .site li a:hover {color: #900;}

.footer .social {width: 250px; display: block;}
.footer .social img {display: block; float: left; margin: 5px 15px 0px 0px; padding: 0px;  }
.footer .social a:hover img {opacity: .6;}