/*
THEME NAME: Paper Frosting
DESCRIPTION: Customized CSS for paperfrosting.com built with the Wordpress CMS
AUTHOR: Matt Kreikemeier
*/

body {color: #555; background: #EEE;}
#wrap {background: url(images/bg-wrap.png) no-repeat 0 120px; width: 973px; margin: 0 auto; padding: 50px 0 0 0; position: relative; font-size: 1em;}
  /* UTILITY NAV */
#utility {width: 973px; margin: 20px auto 0 auto; font-size: 12px; position: relative;}
#utility ul {width: auto; position: absolute; top: 17px; right: 240px;}
#utility ul li {background: url(images/bg-utility-dot.png) no-repeat 100% 7px; width: auto; padding: 0 7px; display: block; list-style: none; text-transform: uppercase; float: left;}
#utility ul li a {color: #888;}
#utility ul li a:hover {color: #333;}
#utility form#cse-search-box {background: url(images/bg-search.png) no-repeat; width: 226px; height: 45px; position: relative; left: 741px;}
#utility form#cse-search-box div {width: 226px; height: 45px;}
#utility form#cse-search-box input {color: #666; background: #FFF; margin: 15px 0 0 37px; border: none;}
#utility form#cse-search-box input#submit {background: url(images/bg-search-button.png) no-repeat; width: 12px; height: 13px; margin: 0; position: absolute; top: 17px; left: 20px; text-indent: -9999px; outline: none; cursor: pointer;}
  /* TWITTER */
.twitter {background: url(images/bg-twitter.gif) no-repeat; width: 225px; height: 70px; margin: 0 auto; position: absolute; top: 15px; left: 27px;}
.twitter p {width: 180px; margin: 7px 0 0 40px;}
p.twitterLink a {background: url(images/bg-twitterLink.gif) no-repeat; width: 59px; height: 12px; display: block; position: absolute; top: 78px; left: 150px; text-indent: -9999px; outline: none;}
p.facebookLink a {background: url(images/bg-facebookLink.gif) no-repeat; width: 46px; height: 14px; display: block; position: absolute; top: 96px; left: 163px; text-indent: -9999px; outline: none;}

          /************************************************** CONTENT ********************************************/
          
#content {background: url(images/bg-content.png) repeat-y; width: 973px; position: relative; top: 20px;}/*see ie.css for fixes*/
#content:after {clear: both; content: ''; display: block; height: 0; visibility: hidden;}
#content p#breadcrumbs {color: #999; margin: 0 0 0 30px; text-align: left;}
#content p#breadcrumbs a {color: #999;}
#content p#breadcrumbs a:hover {color: #555;}
#content p#breadcrumbs strong {color: #555; font-weight: normal;}

  /* MAIN */
#main {width: 750px; margin: 0 auto; padding: 0 0 20px 0; font-size: 12px; float: left;}/*see ie.css for fixes*/
#main #contentContainer {margin: 10px 45px;}
#main h1 {background: url(images/logo.gif) no-repeat; width: 342px; height: 114px; margin: 5px 0 0 300px; text-indent: -9999px; outline: none;}
#main h2 {height: 28px; margin: 0 0 15px 0; text-indent: -9999px; outline: none;}
.aboutus #main h2 {background: url(images/bg-pageTitle-aboutUs.gif) no-repeat;}
.contactus #main h2 {background: url(images/bg-pageTitle-contactUs.gif) no-repeat;}
.customform #main h2 {background: url(images/bg-pageTitle-getStarted.gif) no-repeat;}
.websites #main h2 {background: url(images/bg-pageTitle-websites.gif) no-repeat;}
.doityourself #main h2 {background: url(images/bg-pageTitle-doityourself.gif) no-repeat;}
.faqs #main h2 {background: url(images/bg-pageTitle-faqs.gif) no-repeat;}
.blog #main h2 {background: url(images/bg-pageTitle-blog.gif) no-repeat;}
.galleries #main h2 {background: url(images/bg-pageTitle-galleries.gif) no-repeat;}
.specialoffers #main h2 {background: url(images/bg-pageTitle-specialOffers.gif) no-repeat;}
.templates #main h2 {background: url(images/bg-pageTitle-templates.gif) no-repeat;}
#main h3 {color: #F9A5EA; margin: 0 0 10px 0; font-size: 15px; font-weight: normal;}
#main h4 {color: #777; margin: 30px 0 10px 0; border-bottom: 1px solid #DDD; font-size: 15px; font-weight: normal; text-transform: uppercase;}
#main h5 {font-size: 15px; font-weight: normal; text-transform: uppercase;}
#main p {margin: 0 0 15px 0;}
#main img.left,#main img.alignleft {margin: 0 10px 10px 0; float: left;}
#main img.right,#main img.alignright {margin: 0 0 10px 10px; float: right;}
#main ul, #main ol {margin: 10px 20px;}
.post img.alignleft {background: #FFF; margin: 0 10px 10px 0; padding: 7px; float: left; border: 1px solid #DDD;}
.post img.alignright {background: #FFF; margin: 0 0 10px 10px; padding: 7px; float: right; border: 1px solid #DDD;}
    /** NAVIGATION **/
#nav {width: 193px; margin: 140px 0 30px 0; position: relative; float: left;}
#nav:after {clear: both; content: ''; display: block; height: 0; visibility: hidden;}
#nav .buttonWrap {width: 193px; min-height: 25px; padding: 0 0 15px 0; margin: 0 30px 0 0; position: relative; display: block;}
#nav .buttonWrap h3 {height: 40px; text-indent: -9999px; outline: none; cursor: pointer;}
#nav .buttonWrap h3#as {background: url(images/bg-nav-as.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#cs {background: url(images/bg-nav-cs.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#gd {background: url(images/bg-nav-gd.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#ds {background: url(images/bg-nav-ds.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#we {background: url(images/bg-nav-we.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#fs {background: url(images/bg-nav-fs.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#bg {background: url(images/bg-nav-bg.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#gs {background: url(images/bg-nav-gs.gif) no-repeat 100% 0;}
#nav .buttonWrap h3#sw {background: url(images/bg-nav-sw.gif) no-repeat 100% 0;}
#nav .buttonWrap h3 a {width: 200px; height: 40px; display: block;}
#nav .buttonWrap .toggleInfo {color: #666; background: #EEE; width: 170px; margin: 0; padding: 15px; font-size: 12px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; display: none;}
#nav .buttonWrap .toggleInfo p.continue a {background: url(images/bg-toggleInfo-continue.png) no-repeat; width: 50px; height: 11px; margin: 5px 0 0 120px; display: block; text-indent: -9999px; outline: none;}
#nav .buttonWrap .toggleInfo p.close {background: url(images/bg-toggleInfo-close.png) no-repeat; width: 32px; height: 32px; position: absolute; top: 35px; left: 180px; text-indent: -9999px; outline: none; cursor: pointer;}


          /************************************************** FOOTER ********************************************/
          
#footer {background: url(images/bg-main.png) no-repeat; margin: 0 0 50px 0; padding: 35px 0 0 0; position: relative; clear: both; font-size: 11px;}
  /* BUCKETS */
.bucket {color: #888; background: #FFF; width: 437px; margin: 0 0 15px 0; padding: 15px; position: relative; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; float: left;}
.bucket h4 {color: #888; margin: 0 0 10px 0; padding: 2px 0 2px 0; font-size: 18px; font-weight: normal; text-transform: uppercase; cursor: pointer;}
.bucket p.subscribe {position: absolute; top: 10px; right: 15px;}
.bucket p.subscribe a {color: #777; background: url(images/bg-rss_icon.gif) no-repeat 100% 0; height: 16px; padding: 5px 30px 0 0; display: block; font-size: 11px; text-transform: uppercase;}
.bucket p.viewMore {position: absolute; top: 16px; right: 15px;}
.bucket p.viewMore a {color: #777; background: url(images/bg-viewMore.gif) no-repeat 100% 1px; height: 16px; padding: 0 20px 0 0; display: block; font-size: 11px; text-transform: uppercase;}
.bucket .toggle {margin: 10px 0 0 0;}
    /** POSTS **/
.recentNews {margin: 0 20px 15px 8px;}
.bucket .post {padding: 0 0 25px 0;}
.bucket .post h2 {margin: 0 0 4px 0;}
.bucket .post h2 a {color: #777; font-size: 16px; font-weight: normal;}
.bucket .post h2 a:hover {color: #555;}
.bucket .post span.entry-date {color: #EEE; background: #BBB; padding: 3px 7px; margin: 0 0 10px 0; position: relative; top: 2px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.bucket .post .post-content {margin: 25px 0 15px 0;}
.bucket .post p {margin-top: 15px; font-size: 12px; clear: both;}
.bucket .post .more-link {width: 88px; position: relative; top: 10px; left: 320px;}
.bucket .post .more-link a {background-image: url(images/bg-post-readMore.png); background-repeat: no-repeat; width: 88px; height: 24px; display: block; text-indent: -9999px; outline: none;}
.galleries #main .gallery img.left {margin: 0 5px 0 0;}
    /** FEATURED PROJECT **/
.bucket .pics {margin: 0 0 5px 20px;}
#footer p#plug {margin: 0 0 40px 0; position: relative; bottom: 0; text-align: center; clear: both;}
#footer p.contact,#ww-widget-reviews {text-align: center; clear: both; top: 15px;}#footer a img {background: #EEE; padding: 7px; margin: 0 10px 10px 10px; border: 1px solid #CCC;}
#footer .ww-reviews-placeholder {clear: both;}
#ww-widget-wwrated-2010 a img {padding: 0; margin: 0; border: none;}
#ww-widget-reviews {max-width: 100%;}


          /************************************************** UNIQUE LAYOUTS ********************************************/

/***** CONTACT US *****/

  /* FORM */
form.cform {color: #777; width: 100%; clear: both; font-size: 12px;}
form#cformsform {width: auto;}
form.cform fieldset {margin: 0 0 0 5px;}
form.cform fieldset.cf_hidden {display: none;}
form.cform fieldset legend {display: none;}
form.cform fieldset ol li,form.cform ol li {margin-bottom: 7px; list-style: none; clear: both;}
form.cform fieldset ol li#li-2-11 {margin-bottom: 13px;}
form.cform fieldset label,form.cform label {background: #EEE; width: 155px; margin: 0 5px 0 0; padding: 5px 10px 5px 5px; display: block; text-align: right; float: left; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-transform: uppercase;}
form.cform fieldset label.cf-after {text-align: left;}
form.cform fieldset input,form.cform input {color: #FFF; background: #999; width: 200px; margin: 0 5px 0 0; padding: 5px 5px 5px 10px; border: none; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; font-size: 12px;}
form.cform fieldset select {width: 200px;}
form.cform fieldset input:hover, form.cform  input:focus,form.cform input:hover, form.cform input:focus,form.cform textarea:hover,form.cform textarea:focus {color: #777; background: #ddfafa;}
form.cform fieldset input.cf-box-a {width: 15px; margin: 0 5px 10px 143px; border: none; float: left; clear: left;}
form.cform input.sendbutton,form.cform input.sendbutton {color: #FFF; background: #cc78ba; width: auto; margin: 10px 0 0 0; padding: 5px; position: relative; left: 200px; text-transform: uppercase; cursor: pointer;}
form.cform input.sendbutton:hover,form.cform input.sendbutton:hover {background: #f6c3eb;}
form.cform textarea {color: #777; width: 350px; padding: 3px; font-family: Lucida Grande, Verdana, Trebuchet MS, Arial, sans-serif; border: 1px solid #bbb; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
p.linklove {display: none;}
    /** FORM FIELDS ERROR **/
ol.cf-ol li.cf_li_err {background: #FFDFDF url(/images/li-err-bg.png) repeat!important; border-color: #DF7D7D; border-style: solid; border-width: 1px; padding: 5px 10px!important; margin: 5px 0!important;}
ol.cf-ol li ul.cf_li_text_err {padding: 0 0 0 10px; margin: 0; color: #333; display: inline-block;}
form#commentform {}
form#commentform label {text-align: left; float: none;}
form#commentform input {width: 80px;}
.failure {color: red;}
    /** CUSTOM ORDER FORM **/
form#cforms2form {width: 100%;}
form#cforms2form legend {width: 100%; margin: 0 0 10px 0; padding: 0 0 3px 0; display: block; border-bottom: 1px solid #DDD;}
form#cforms2form fieldset {margin-bottom: 20px;}
form#cforms2form fieldset label,form#cforms2form label {width: 200px;}
form#cforms2form fieldset input,form#cforms2form input {width: 340px;}
form#cforms2form fieldset input.cf-box-a,form#cforms2form input.cf-box-a {background: none; width: auto; margin: 5px 5px 10px 0;}
form#cforms2form fieldset label.cf-after,form#cforms2form label.cf-after {margin: 0 0 5px 0;}
form.cform input#sendbutton2 {color: #FFF; background: #cc78ba; width: auto; margin: 10px 0 0 0; padding: 5px; position: relative; left: 270px; text-transform: uppercase; cursor: pointer;}
form.cform input#sendbutton2:hover {background: #f6c3eb;}

/***** FAQS *****/
.toggleWrap {background: #EEE; width: 530px; margin: 0 0 14px 0; padding: 10px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
.toggleWrap h5 {color: #777; margin: 0; padding: 0 0 0 30px; font-size: 12px; font-weight: normal; cursor: pointer;}
.toggleWrap h5:hover {color: #333;}
.toggleWrap h5.active {background: url(images/bg-toggleWrap-active.jpg) no-repeat;}
.toggleWrap h5.inactive {background: url(images/bg-toggleWrap-inactive.jpg) no-repeat;}
.toggleWrap .toggle {margin: 10px 0 0 0; padding: 0; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;}

/***** FORMS *****/
.formWrap {background: #EEE; width: 100%; margin: 0 0 14px 0; padding: 10px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
.formWrap h5 {color: #777; margin: 0; padding: 0 0 0 30px; font-size: 12px; font-weight: normal; cursor: pointer;}
.formWrap h5:hover {color: #333;}
.formWrap h5.active {background: url(images/bg-toggleWrap-active.jpg) no-repeat;}
.formWrap h5.inactive {background: url(images/bg-toggleWrap-inactive.jpg) no-repeat;}
.formWrap .toggle {margin: 10px 0 0 0; padding: 0; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;}

/***** BLOG *****/
.blog #main .post {background: url(images/bg-post.png) repeat-x; padding: 15px;}
.blog #main .post h4 {margin-top: 0;}
.blog #main .navigation {margin: 15px 0; text-align: center;}
.blog #main .post-date {color: #888; padding: 5px; background: #DDD; border: 1px solid #BBB}
.blog #main .post-content {margin: 30px 0 0 0;}
.blog #main .post .more-link a {background: url(images/bg-post-readMore.png) no-repeat; width: 88px; height: 24px; margin: 15px 0 0 0; display: block; position: relative; left: 530px; text-indent: -9999px; outline: none;}
  /* COMMENTS */
#comments {margin: 40px 0 0 0; padding: 20px 0 0 0; border-top: 1px solid #DDD; clear: both;}
#comments #comment_form {margin-left: 0px; margin-bottom: 0px; padding: 0px;}
#comments #comment_form label {color: #777; background: #EEE; width: 125px; margin: 0 5px 5px 0; padding: 5px 10px 5px 5px; display: block; text-align: right; float: left; clear: left; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
#comments #comment_form input {color: #FFF; background: #999; padding: 5px 5px 5px 10px; margin: 0 5px 5px 0; border: none; -border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
#comments #comment_form input#submit {color: #FFF; background: #cc78ba; width: auto; margin: 10px 0 0 0; padding: 5px; position: relative; left: 145px; border: 1px solid #FFF; text-transform: uppercase; cursor: pointer; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: 0.2em 0.2em 1.2em #999; -moz-box-shadow: 0.2em 0.2em 1.2em #999; -webkit-box-shadow: 0.2em 0.2em 1.2em #999;}
#comments #comment_form textarea {color: #FFF; background: #999; padding: 5px 5px 5px 10px; margin: 0 5px 0 0; border: none; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; font-family: Trebuchet MS, Arial, Verdana, sans-serif, Helvetica; font-size: 12px;}
#comments .comment-wrap {background: #EEE; height: 100%; overflow: auto; margin: 0 0 12px 0; padding: 0 12px 0; clear: both; border: 1px solid #DDD;}
#comments h3 {padding-top: 0;}
#comments h3#respond {padding-top: 8px;}
#comments .comment-wrap img.avatar {margin: 0 0 12px 0; padding: 4px; background-color: #fff; border: 1px solid #E8E8E8;}
#comments .comment-wrap .left {width: 65px; padding-top: 12px; float: left;}
#comments .comment-wrap .right {width: 457px; float: left; padding: 12px 0 6px 12px;}
#comments .comment-wrap .right a {text-decoration: none;}
#comments .comment-wrap .right a:hover {text-decoration: none;}
#comments .comment-wrap .right cite {margin: 0; padding: 0; font-style: normal; display: block; height: 100%; overflow: auto;}
#comments .comment-wrap .right cite b {float: left;}
#comments .comment-wrap .right cite b a {}
#comments .comment-wrap .right cite small {font-size: 90%; float: right;}
#comments .comment-wrap .right p {padding: 12px 0; clear: both;}
#comments .comment-wrap .right blockquote,#comments .comment-wrap .right code,#comments .comment-wrap .right pre {margin: 6px 0; clear: both;}
#comments .alt {}
#comments .author {border-color: #E1DAB7;}

/***** NEWSLETTER *****/
form#newsletterSignUp {width: 450px; margin: 20px 0 0 0;}
form#newsletterSignUp fieldset label {color: #444; background: #DDD; width: 125px; margin: 0 5px 5px 0; padding: 5px 10px 5px 5px; display: block; text-align: right; font-size: 12px; text-transform: uppercase; float: left; clear: left; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
form#newsletterSignUp fieldset input {color: #EEE; background: #444; width: 200px; padding: 5px 5px 5px 10px; margin: 0 5px 7px 0; border: none; -border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
form#newsletterSignUp fieldset input:focus {background: #333;}
form#newsletterSignUp input#sendbutton {color: #FFF; background: #cc78ba; width: auto; margin: 10px 0 0 0; padding: 5px; position: relative; left: 155px; border: 1px solid #FFF; text-transform: uppercase; cursor: pointer; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: 0.2em 0.2em 1.2em #999; -moz-box-shadow: 0.2em 0.2em 1.2em #999; -webkit-box-shadow: 0.2em 0.2em 1.2em #999;}
form#newsletterSignUp input#sendbutton:hover {background: #f6c3eb;}

/***** GALLERIES *****/
.galleries #main .gallery img.left {margin: 0 18px 0 17px;}

/***** TEMPLATES *****/
.templates .template {background: #FFF; padding: 10px; float: left; margin: 0 20px 20px 5px;}
.templates .template h5 {color: #777; margin: 0 0 0 10px; font-size: 14px; font-weight: normal;}

/***** DO IT YOURSELF *****/
#main p.getStartedNow {width: 308px; height: 147px; margin: 0 0 10px 10px; float: right;}
#main p.getStartedNow a {background: url(images/bg-main-diy-getStartedNow.jpg) no-repeat; width: 308px; height: 147px; display: block; text-indent: -9999px; outline: none;}

    /** TWITTER **/
#main .twitter {background: url(images/bg-twitter.gif) no-repeat; width: 225px; height: 70px; position: absolute; top: 0; right: 27px;}
#main .twitter p {width: 180px; margin: 7px 0 0 40px; font-size: 10px;}
#main p.twitterLink a {background: url(images/bg-twitterLink.gif) no-repeat; width: 59px; height: 12px; display: block; position: absolute; top: 68px; right: 60px; text-indent: -9999px; outline: none;}
#main p.facebookLink a {background: url(images/bg-facebookLink.gif) no-repeat; width: 46px; height: 14px; display: block; position: absolute; top: 86px; right: 60px; text-indent: -9999px; outline: none;}