/* CSS Document */



body {
font-family: Georgia, Times New Roman;
color: #ffffff;
font-size: 24px;
}

#homepage {
background: #571c54;
text-align: right;
}

#whole {
width: 960px;
margin: 0 auto;
padding: 0;
}


a {
padding: 0;
margin: 0;
}

span {
font-size: 36px;
}

#nav {
  width: 270px;
  height: 80px;
  float: right;  
}


#nav a{
display: block;
background: url(images/nav.png) no-repeat;
height: 80px;
float: left;
}



#nav #home {
  width: 60px;
  background-position: 0 0;
}

#nav #home:hover {
background-position: 0 -80px;
}

#nav #about {
  width: 80px;
  background-position: -60px 0;
}

#nav #about:hover {
background-position: -60px -80px;
}

#nav #portfolio {
  width: 62px;
  background-position: -140px 0;
}

#nav #portfolio:hover {
background-position: -140px -80px;
}

#nav #contact {
  width: 68px;
  background-position: -202px 0;
}

#nav #contact:hover {
background-position: -202px -80px;
}

#big-logo {
clear: both;
width: 850px;
margin: 0 auto;
}

#header {
text-align: left;
}

#right-column {
float: right;
width: 485px;
padding-right: 40px;
}

#right-column a {
text-decoration: none;
color: #ffffff;
}

#butterfly {
float: left;
padding-top: 38px;
}

#butterfly2 {
margin: -20px 0 0 0;
float: right;
}

#home-links {
width: 230px;
float: right;
}

#home-links a {
margin-top: 10px;
}

#twitter {
display: block;
background: url(images/twitter.png);
width: 230px;
height: 30px;
}

#twitter:hover {
display: block;
background: url(images/twitter-hover.png);
width: 230px;
height: 30px;
}

#blog {
display: block;
background: url(images/blog.png);
width: 230px;
height: 30px;
}

#blog:hover {
display: block;
background: url(images/blog-hover.png);
width: 230px;
height: 30px;
}

#work {
display: block;
background: url(images/work.png);
width: 230px;
height: 30px;
}

#work:hover {
display: block;
background: url(images/work-hover.png);
width: 230px;
height: 30px;
color: #000000;
}

#quote {
display: block;
background: url(images/quote.png);
width: 230px;
height: 30px;
}

#quote:hover {
display: block;
background: url(images/quote-hover.png);
width: 230px;
height: 30px;
color: #000000;
}

#black:hover {
color: #000000;
}


#right-statement {
font-size: 22px;
text-align: left;
float: right;
width: 450px;
}

#statement {
width: 400px;
margin: 0 0 0 30px;}

/* #statement {
width: 450px;
margin: 0 400px 0 0;}
*/

.statement {
width: 450px;
margin: 0 400px 0 0;}


/* About */

#aboutpage {
background: #db176a;
}

#aboutpage #statement p, #aboutpage .statement p {
margin-right: 20px;
}

#aboutpage p {
text-align: right;
}

.right-align {
text-align: right;
}

#smaller-logo {
display: block;
width: 390px;
height: 120px;
background: url(images/smaller-logo.png);
}

#right-column-services {
float: right;
width: 490px;
text-align: left;
}

#right-column-services p {
text-align: left;
}

#statement-services {
width: 400px;
margin: 0 400px 0 0;}

.margin10 {
padding-top: 10px;
}

.smallerfont {
font-size: 20px;
}

#aboutpage p {
margin: 0 0 30px 0;
}


h2 {
margin: 0;
}


h2.vinegar {
font-size: 36px;
}

h2 span.synch {
font-size: 46px;
}

li span.vinegar {
font-size: 24px;
}

/* Portfolio */

#workpage {
background: #64bf00;
text-align: left;
}

.right {
float: right;
}

.clear {
clear: both;
}


.headline {
margin: 20px 10px 0;
font-size: 30px;
}

p.headline span.vinegar {
font-size: 30px;
}

p.headline span.folio {
font-size: 48px;
}


#webdesign, #logos, #archivedsites {
clear: both;
}

#webdesign p {
padding: 10px 0 0 10px;
}

#logos p, #archivedsites p {
padding: 50px 0 0 10px;
}


#port-wrapper a{
display: block;
width: 300px;
height: 160px;
float: left;
margin: 0 8px 30px 8px;
border: 1px solid #000000;
}


a#ibpublic {
background: url(images/ib-public.png) no-repeat;
}

a#ibprivate {
background: url(images/ib-private.png) no-repeat;
}

a#themedia {
background: url(images/themedia.png) no-repeat;
}

a#pro {
background: url(images/pro.png) no-repeat;
}

a#tina {
background: url(images/tina.png) no-repeat;
}

a#wealthywahm {
background: url(images/wealthywahm.png) no-repeat;
}

a#momtastrophe {
background: url(images/momtastrophe.png) no-repeat;
}

a#momblogs {
background: url(images/momblogs.png) no-repeat;
}

a#kcpweb {
background: url(images/kcp-web.png) no-repeat;
}

a#hour {
background: url(images/hour.png) no-repeat;
}

a#ysl {
background: url(images/ysl.png) no-repeat;
}

a#tutu {
background: url(images/tutu.png) no-repeat;
}

a#kcp {
background: url(images/kcp.png) no-repeat;
}

a#indieshop {
background: url(images/indieshop.png) no-repeat;
}

a#yslweb {
background: url(images/ysl-web.png) no-repeat;
}

a#bfthree {
background: url(images/bfthree.png) no-repeat;
}

a#bftwo {
background: url(images/bftwo.png) no-repeat;
}

a#bfone {
background: url(images/bfone.png) no-repeat;
}

a#bfshop {
background: url(images/bf-shopify.png) no-repeat;
}

#port-wrapper a:hover {
border: 1px solid #ffffff;
background-position: 0 -160px;
}

.headline a {
color: #ffffff;
text-decoration: none;
border-bottom: 1px dotted #ffffff;
}

.headline a:hover {
border-bottom: 1px dashed #ffffff;
}


/* Individual Portfolio Pages */

#right-column-folio, .right-column-folio {
float: right;
text-align: right;
padding-right: 10px;
} 


#folio-wrapper #statement {
width: 420px;
text-align: left;
margin-left: 10px;
}

#folio-wrapper .statement {
width: 420px;
text-align: left;
margin-left: 10px;
}

#folio-wrapper p a{
color: #ffffff;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
}

#folio-wrapper p a:hover {
text-decoration: none;
border-bottom: 1px dashed #ffffff;
}


.single-folio {
padding: 5px;
border: 1px solid #000000;
}

a img.single-folio:hover {
border-color: #ffffff;
}

.caption {
width: 510px;
margin-top: -10px;
}

/* Quote and Contact Page */

#contactpage {
background: #2790a9;
text-align: right;
}

.email .vinegar {
font-size: 24px;
}

#contact-wrapper a{
color: #ffffff;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
}

#contact-wrapper a:hover {
text-decoration: none;
border-bottom: 1px dashed #ffffff;
}


a, a:focus, a:hover, a:active, a:visited {
outline: none;
}


.contact-clear {
display: block;
clear: both;
height: 30px;
}


.textinput {
height: 20px;
margin: 5px 0;
width: 250px;
}

#contact-wrapper label{
margin: 0 5px 0 0;
position: relative;
top: 5px;
font-size: 22px;
}

#contact-wrapper label span.vinegar {
font-size: 22px;
}

form textarea {
margin: 5px 0 0 0;
}

#submit {
width: 80px;
height: 30px;
margin: 5px 0 20px 0;
padding: 0;
}

a#skype, a#skype img {
border: 0;
}

a#skype:hover, a#skpye img:hover {
border: 0;}

.gvoice {
font-size: 20px;
margin-left: 140px;
}


/* quote */

#quote-wrapper #statement-quote {
text-align: left;
width: 900px;
}

#left-quote-statement {
width: 450px;
float: left;
}

#right-quote-statement {
padding-top: 290px;
margin-left: 520px
}



#quote-wrapper span.vinegar {
font-size: 22px;
}

#quote-wrapper a{
color: #ffffff;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
}

#quote-wrapper a:hover {
text-decoration: none;
border-bottom: 1px dashed #ffffff;
}

#quote-wrapper form label, #quote-wrapper form .label {
display: block;
margin: 30px 0 0 0;
font-size: 22px;
}

input.otherdetail {
position: relative;
top: -5px;
}

input.site, span.site {
position: relative;
top: 8px;
}

input.sitedomain {
position: relative;
top: 6px;
padding: 5px 0 0 0;
}

select {
height: 25px;
margin: 5px 0;
width: 255px;
padding: 3px 0 0 0;
}


a.emailborder {
color: #ffffff;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
}

a.emailborder:hover {
text-decoration: none;
border-bottom: 1px dashed #ffffff;
}

#quote-wrapper #statement-quote #submit {
width: 80px;
height: 30px;
margin: 5px 0 0 265px;
padding: 0;
}




/* thank you page */

.thanks {
margin-bottom: 30px;
}

/* google voice widget */
object, object:focus {
outline: none;
}

/* footer */

#footer {
clear: both;
border-top: 1px dashed #ffffff;
padding: 3px 5px 0 5px;
font-size: 12px;
text-align: right;
margin: 0;
}

#footer p {
margin: 0;
padding: 0;
}

#footer .vinegar {
font-size: 14px;
}

#footer .synch {
font-size: 22px;
}

#twitter, #blog, #work, #quote {
text-align: left;
text-indent: -3000px;
}