/* JH Graphics - Imagination and Creation By: JoEllen Harshman http://jhgraphics.com */ /* STRUCTURE ................................................. */ html, body { height: 100%; } body { background: #e4ddc3 url(images/bkgd-header.jpg) no-repeat center top; margin: 0px auto; padding: 0px; } #container { width: 950px; min-height: 100%; position: relative; margin-left: auto; margin-right: auto; margin-bottom: -77px; padding: 0px; font: 18px "Times New Roman", Times, serif; } html>body #container { height: auto; } /* CONTENT ................................................. */ #header { width: 950px; height: 180px; margin: 0; padding: 0; } #pgcontainer { width: 890px; margin-top: 0px; padding-left: 30px; padding-right: 30px; text-align: left; } .logo { width: 411px; height: 56px; margin: 0; padding: 0; position: absolute; top: 80px; left: 30px; display: block; background: url(images/jhgraphicslogo.gif) no-repeat top left; } .logo span { display: none; } #butterfly { clear: both; float: left; width: 259px; height: 448px; margin: 0; padding: 0; position: relative; top: -34.25px; left: -16px; background: url(images/butterfly.gif) no-repeat top left; } .floatLF { float: left; } .floatRT { float: right; text-align: left; } .clear { clear: both; } .sep { width: 885px; border-top: 1px #555 dotted; } .sep2 { width: 835px; border-top: 1px #555 dotted; margin-top:40px; margin-bottom:40px; } #socialscene { width: 200px; height: 173px; float: right; margin-left: 30px; margin-bottom: 10px; padding-left: 45px; padding-top: 20px; font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; background: url(images/social-scene.gif) no-repeat top left; } #socialscene ul { list-style-position: outside; list-style-image: url(images/ulstar.gif); list-style-type: circle; margin: 0; padding: 0; } #socialscene ul li { margin-left: 25px; padding: 0; } #socialscene ul li a { text-decoration:none; color:#6b5f48; } #socialscene ul li a:hover { color: #383226; } .ssicons { margin:5px; } #ontheside { width: 200px; height: 140px; float: right; margin-left: 30px; margin-bottom: 10px; padding-left: 45px; padding-top: 20px; font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; background: url(images/ontheside.gif) no-repeat top left; } #ontheside ul { list-style-position: outside; list-style-image: url(images/ulstar.gif); list-style-type: circle; margin: 0; padding: 0; } #ontheside ul li { margin-left: 25px; padding: 0; } #ontheside ul li a { text-decoration:none; color:#6b5f48; } #ontheside ul li a:hover { color: #383226; } #boxcurve { width: 200px; height: 140px; float: right; margin-left: 30px; margin-bottom: 10px; padding-left: 20px; padding-top: 20px; font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; background: url(images/boxcurve.gif) no-repeat top left; } #boxcurve ul { list-style-position: outside; list-style-image: url(images/ulstar.gif); list-style-type: circle; margin: 0; padding: 0; } #boxcurve ul li { margin-left: 25px; padding: 0; } #boxcurve ul li a { text-decoration:none; color:#6b5f48; } #boxcurve ul li a:hover { color: #383226; } a.button { background: transparent url('images/red-button-a.gif') no-repeat scroll top right; color: #FFF; display: block; float: left; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ font: bold 14px "Times New Roman", Times, serif; text-decoration: none; } a.button span { background: transparent url('images/red-button-span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } a.button:active { background-position: bottom right; color: #FFF; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ } a.button:visited { color: #FFF; outline: none; /* hide dotted outline in Firefox */ } .pcolone { float: left; position: relative; left: -15px; width: 690px; height: 335px; } .pcolonet { float: left; position: relative; left: -15px; width: 650px; padding-left: 20px; padding-right: 20px; } .pcoltwo { float: left; width: 195px; } .box4 { width: 180px; height: 80px; float: left; margin: 15px 0px 0px 0px; padding: 20px; background: #917f5a; border-right: 1px solid #333333; text-align: center; } .columns2 { width: 360px; float: left; margin: 0px; padding-right: 40px; } .columnshome { width: 275px; height: 125px; float: left; margin: 0px; padding-left: 10px; } .t-col1 { width:250px; float:left; margin-right:20px; padding:0; } .t-col2 { width:560px; float:left; margin:0; padding:0; } /* UPPER NAVIGATION ................................................. */ #skipnav { clear: both; float: right; margin: 3px 10px 0px 0px; } .uppercontact { font: 17px "Times New Roman", Times, serif; color: #69a6a3; text-decoration: none; position: absolute; left: 665px; top: 22px; } .uppercontact a:link { font: 17px "Times New Roman", Times, serif; color: #69a6a3; text-decoration: none; outline: none; } .uppercontact a:visited { font: 17px "Times New Roman", Times, serif; color: #69a6a3; text-decoration: none; outline: none; } .uppercontact a:hover { color: #fff; text-decoration: none; outline: none;} ul { margin:0; padding:0; } #uppernavigation li { display:inline; padding: 0px; clear: both; } li.about a { text-indent: -1000em; background: url(images/about.gif) no-repeat left top; width: 65px; height: 36px; display: block; overflow: hidden; position: absolute; left: 466px; top: 12px; text-decoration: none; outline: none; } li.about a:hover { background-position: -65px 0px; outline: none; } body.about #uppernavigation a.about { background-position: -130px 0px; outline: none; } li.blog a { text-indent: -1000em; background: url(images/blog.gif) no-repeat left top; width: 56px; height: 36px; display: block; overflow: hidden; position: absolute; left: 531px; top: 12px; text-decoration: none; outline: none; } li.blog a:hover { background-position: -56px 0px; outline: none; } body.blog #uppernavigation a.blog { background-position: -112px 0px; outline: none; } li.home a { text-indent: -1000em; background: url(images/home.gif) no-repeat left top; width: 62px; height: 36px; display: block; overflow: hidden; position: absolute; left: 587px; top: 12px; text-decoration: none; outline: none; } li.home a:hover { background-position: -62px 0px; outline: none; } body.home #uppernavigation a.home { background-position: -124px 0px; outline: none; } /* LOWER NAVIGATION ................................................. */ #lowernavigation li { display:inline; padding: 0px; clear: both; } li.web a { text-indent: -1000em; background: url(images/web.gif) no-repeat left top; width: 51px; height: 29px; display: block; overflow: hidden; position: absolute; left: 485px; top: 87px; text-decoration: none; outline: none; } li.web a:hover { background-position: -51px 0px; outline: none; } body.web #lowernavigation a.web { background-position: -102px 0px; outline: none; } li.print a { text-indent: -1000em; background: url(images/print.gif) no-repeat left top; width: 58px; height: 29px; display: block; overflow: hidden; position: absolute; left: 536px; top: 87px; text-decoration: none; outline: none; } li.print a:hover { background-position: -58px 0px; outline: none; } body.print #lowernavigation a.print { background-position: -116px 0px; outline: none; } li.specialty a { text-indent: -1000em; background: url(images/specialty.gif) no-repeat left top; width: 136px; height: 29px; display: block; overflow: hidden; position: absolute; left: 594px; top: 87px; text-decoration: none; outline: none; } li.specialty a:hover { background-position: -136px 0px; outline: none; } body.specialty #lowernavigation a.specialty { background-position: -272px 0px; outline: none; } li.emarketing a { text-indent: -1000em; background: url(images/emarketing.gif) no-repeat left top; width: 112px; height: 29px; display: block; overflow: hidden; position: absolute; left: 730px; top: 87px; text-decoration: none; outline: none; } li.emarketing a:hover { background-position: -112px 0px; outline: none; } body.emarketing #lowernavigation a.emarketing { background-position: -224px 0px; outline: none; } li.contact a { text-indent: -1000em; background: url(images/contact.gif) no-repeat left top; width: 74px; height: 29px; display: block; overflow: hidden; position: absolute; left: 842px; top: 87px; text-decoration: none; outline: none; } li.contact a:hover { background-position: -74px 0px; outline: none; } body.contact #lowernavigation a.contact { background-position: -148px 0px; outline: none; } /* SIDE NAVIGATION ................................................. */ #skipnav2 { clear: both; position: relative; margin: -5px 0px 0px 190px; } .sidenavsectionC { margin-top: 9px; margin-bottom: 9px; font: 20px/20px "Times New Roman", Times, serif; color: #304440; } .sidenavsection { margin-top: 9px; margin-bottom: 9px; font: 17px/17px "Times New Roman", Times, serif; color: #304440; outline: none; } .sidenavsection a, .sidenavsection a:visited { padding-left: 12px; background: url("images/rt-arrow.gif") no-repeat 0px 5px; color: #4b6963; text-decoration: none; outline: none; } .sidenavsection a:hover { background: url("images/rt-arrow.gif") no-repeat 3px 5px; color: teal; outline: none; } #sidenav { font: 13px Arial, Helvetica, sans-serif; line-height:130%; width: 200px; margin: 0;padding: 0; } #sidenav ul { list-style: none; margin: 0px; padding: 0px; border: none; } #sidenav ul li { margin: 0px; padding: 0px; outline: none; } #sidenav ul li a { display:block; width:190px; padding: 5px 0px 2px 15px; border-bottom: 1px dotted #c7af81; text-decoration:none; color:#6b5f48; outline: none; } #sidenav ul li a:hover { background: #d7d1b9 url("images/arrow-nav.gif") no-repeat 3px 9px; color: #383226; outline: none; } body.websites #sidenav a.websites, body.hosting #sidenav a.hosting, body.webpromo #sidenav a.webpromo, body.flyers #sidenav a.flyers, body.postcards #sidenav a.postcards, body.ads #sidenav a.ads, body.logos #sidenav a.logos, body.businesscards #sidenav a.businesscards, body.miscspecialty #sidenav a.miscspecialty, body.presentations #sidenav a.presentations, body.banners #sidenav a.banners, body.promotional #sidenav a.promotional { background: #d7d1b9 url("images/arrow-nav.gif") no-repeat 3px 9px; color: #383226; outline: none; } /* TEXT ................................................. */ p { font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; margin: 0; padding: 0; } p a { color: #006972; text-decoration: none; outline: none; } p a:visited { color: #006972; text-decoration: none; outline: none; } p a:hover { color: #5d9e00; text-decoration: none; outline: none; } ul { font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; } ul a { color: #006972; text-decoration: underline; outline: none; } ul a:visited { color: #006972; text-decoration: underline; outline: none; } ul a:hover { color: #5d9e00; text-decoration: underline; outline: none; } .indent { position:relative; left:25px; } ol { font: 13px/20px Arial, Helvetica, sans-serif; color: #252525; margin: 0; padding: 0; } ol a { color: #006972; text-decoration: underline; outline: none; } ol a:visited { color: #006972; text-decoration: underline; outline: none; } ol a:hover { color: #5d9e00; text-decoration: underline; outline: none; } .p1 { font: 15px/22px Arial, Helvetica, sans-serif; color: #252525; margin: 0;padding: 0; } h2 /* Heading Large */ { font: 25px/30px "Times New Roman", Times, serif; color: #385046; margin: 0;padding: 0; } h3 /* Heading Medium */ { font: 18px/20px "Times New Roman", Times, serif; color: #187a62; margin: 0;padding: 0; } h4 /* Heading Small */ { font: 18px/20px "Times New Roman", Times, serif; color: teal; margin: 0;padding: 0; } ul { list-style: disc; margin-left: 2em; padding: 5px; } .fadeblock { background: url("images/div-dk.gif") repeat-x center bottom; border-bottom: 3px solid #dcd0af; } .rts { font-family: "Times New Roman", Times, serif; color: #a1864f; background: url("images/div-dk.gif") repeat-x center bottom; border-bottom: 3px solid #bcaf96; } .rts a { font-family: "Times New Roman", Times, serif; color: #a1864f; text-decoration:none; } .rts a:visited { font-family: "Times New Roman", Times, serif; color: #a1864f; text-decoration:none; } .rts a:hover { font-family: "Times New Roman", Times, serif; color: #c1ac82; text-decoration:underline; } .divlt { background: url("images/div-lt.gif") no-repeat center bottom; } .important { float:right; width:628px; background-color:#FFFF99; border:1px dotted #CC6600; text-align:center; margin-top:15px; } .twitter { clear: both; float: left; width:204px; height:254px; background:url(images/twitter-box-bkgd.gif) no-repeat; } /* FORM ................................................. */ #contactformwrap { width: 425px; margin:0; padding:0; float: left;} .formtext { text-align: center; font: 15px Arial, Helvetica, sans-serif; color: teal; } .show { display:block; } .hidden, hr { display:none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix { display: block;} /* End hide from IE-mac */ fieldset, form { margin:0; padding:0; border:0; } fieldset ol { margin:0; padding:12px 0 0; list-style:none; } fieldset ol li { margin-bottom: 12px; } fieldset ol label { float:left; width: 100px; line-height:10px; font: 15px Arial, Helvetica, sans-serif; color: teal; text-align:right; padding-top:8px; padding-left: 0px;} fieldset ol input.text, fieldset ol input.email, fieldset ol textarea { float:right; width:300px; background:#eee7cc url(images/form-bkgd.gif) repeat-x top center; border: 1px dashed #a69470; border-top: none; border-left: none; border-right: none; padding:5px; font-size:16px; outline: none; } fieldset ol input.text:hover, fieldset ol input.email:hover, fieldset ol textarea:hover { background:#f7f0d4; border: 1px dashed #a69470; border-top: none; border-left: none; border-right: none; outline: none; } fieldset ol input.text { height:20px; } fieldset ol textarea { height:130px; font-size:16px;} .submit input { clear: both; float: right; background: url(images/send.gif) no-repeat top center; } #diebot { display:none; } /* @end */ /* FOOTER STRUCTURE ................................................. */ .clearfooter { height: 77px; clear: both; } #footer { background: url(images/bkgd-footer.jpg) no-repeat top center; height: 77px; width: 100%; position: relative; } #footercontainer { width: 825px; margin: 0px auto; padding: 18px 0px 10px 0px; } #fside-nav { float: left; width: 550px; } #fside-copyright { float: left; width: 275px; } /* FOOTER TEXT ................................................. */ .footernav { font: 11px/16px Arial, Helvetica, sans-serif; color: #917f5a; word-spacing: 3px; text-decoration: none; } .footernav a, a:visited { color: #917f5a; text-decoration: none; outline: none; } .footernav a:hover { color: #480000; text-decoration: none; outline: none; } .footertext { font: 11px/16px Arial, Helvetica, sans-serif; color: #917f5a; text-decoration: none; } .footertext a, a:visited { color: #917f5a; text-decoration: none; outline: none; } .footertext a:hover { color: #480000; text-decoration: none; outline: none; } .footerlisting { padding-top: 10px; font: 11px/16px Arial, Helvetica, sans-serif; color: #8f8674; text-align: center; text-decoration: none; } .footerlisting a, a:visited { color: #8f8674; text-decoration: none; outline: none; } .footerlisting a:hover { color: #480000; text-decoration: none; outline: none; }