body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,th,td,img { margin: 0; padding: 0; }
body { background: #fff url(/images/faux.jpg) repeat-x; font: 14px Arial; color: #444; }

a { color: #3eb7de; text-decoration: none; outline-style: none; font-weight: bold; }
a:hover { background: none; text-decoration: underline; }
span { color: #3eb7de; font-size: 22px; }
ul { margin: 0; }

.clear { clear: both; }

.well, .box .inner { margin: 0 auto; width: 990px; }

.header { text-indent: -3000px; padding-right: 50px; }
.header h1 a { margin: 16px 0 0 25px; width: 288px; height: 80px; background: url(/images/logo.jpg) no-repeat; display: block; }

.nav { float: right; margin-top: 23px; width: 411px; }
.nav a { display: block; margin-left: 35px; float: left; height: 33px; }
.nav a.portfolio { width: 67px; background: url(/images/nav-portfolio.jpg) no-repeat; }
.nav a.services { width: 114px; background: url(/images/nav-services.jpg) no-repeat; }
.nav a.hosting { width: 105px; background: url(/images/nav-hosting.jpg) no-repeat; }
.nav a.contact { width: 90px; background: url(/images/nav-contact.jpg) no-repeat; }
.nav a:hover, .nav a.selected { background-position: top right; }

.box { background: url(/images/box-right.jpg) top right no-repeat; }
.box .inner { position: relative; padding: 25px 0 0 25px; height: 273px; background: url(/images/box-bg.jpg) no-repeat; font-family: "Book Antiqua", Arial; color: #fff; font-weight: normal; font-style: italic; line-height: 3.2em; text-shadow: #000 1px 1px 2px; }
.box h3, .box h2 { letter-spacing: -0.05em; }
.box h3 { font-size: 27px; padding-top: 35px; }
.box h2 { font-size: 68px; }
.box .text { float: right; font-size: 25px; width: 300px; margin: 17px 77px 0 0; text-indent: -3000px; width: 286px; height: 139px; background: url(/images/box-text.jpg) no-repeat; }
.box a.contact { position: absolute; right: 25px; bottom: -37px; text-indent: -3000px; background: url(/images/contact.jpg) no-repeat; display: block; width: 170px; height: 154px; }

.content { clear: both; padding: 50px 50px 20px 50px; font-size: 17px; letter-spacing: -0.03em; line-height: 1.3em; }

.sup { font-size: 11px; }

.footer { clear: both; font-size: 12px; border-top: 1px solid #d5d5d5; padding: 20px 0; letter-spacing: 0; }
.footer .copyright { float: left; padding-left: 10px; }
.footer .links { float: right; padding-right: 5px; }
.footer .links a { border-left: 1px solid #d5d5d5; padding: 0 5px 0 10px; font-weight: normal; }
.footer .links a.first { border: 0; }

.referred { border-bottom: 1px solid #d5d5d5; margin-bottom: 25px; padding: 25px; }

.sep { border-top: 1px solid #c0c0c0; margin-top: 10px; padding-top: 20px; }
.scrolling { float: left; position: relative; overflow: hidden; height: 190px; width: 890px; }
.scrolling .item { width: 165px; position: absolute; text-align: center; font-size: 14px; }
.scrolling .item img { width: 100%; padding: 1px; border: 1px solid #c0c0c0; }
.scrolling span { display: block; position: absolute; left: 0; width: 40px; height: 100%; background: url(/images/scrolling.png) repeat-y; }
.scrolling span.right { right: 0; left: auto; background-position: top right; }
.popout { display: none; float: right; width: 635px; height: 230px; position: relative; }
.popout .image { position: absolute; left: -255px; width: 242px; height: 203px; background: url(/images/portfolio-image.jpg) top left no-repeat; }
.popout a.close { display: inline-block; position: absolute; right: 15px; top: 15px; background: url(/images/close.png) no-repeat; width: 68px; height: 21px; text-indent: -10000px; z-index: 2; }
.popout .item { display: none; z-index: 1; position: absolute; right: 0; font-size: 14px; line-height: 1.5em; letter-spacing: 0em; padding: 20px 15px; border: 1px solid #ededed; background-color: #fafafa; }
.popout .item h2 span { color: #444; font-weight: normal; }
.popout .item h2 { font-size: 20px; font-weight: normal; line-height: 1em; }

div.portfolio { font-size: 14px; line-height: 1.3em; letter-spacing: 0em; }
div.portfolio .image { margin-top: 20px; float: right; padding: 20px 0 0 35px; width: 250px; background: url(/images/portfolio-sep.jpg) top left no-repeat; text-align: center; }
div.portfolio .image a { background: url(/images/portfolio-image.jpg) no-repeat; display: block; text-align: center; width: 242px; height: 180px; padding-top: 23px; }
div.portfolio .image img { border: 1px solid #c0c0c0; }
div.portfolio .item { margin-top: 20px; clear: right; float: left; width: 525px; margin-left: 30px; padding: 30px 15px; border: 1px solid #ededed; background-color: #fafafa; }
div.portfolio .item h2 a { font-size: 20px; font-weight: normal; line-height: 1em; }
div.portfolio .client { clear: both; padding-top: 20px; font-size: 25px; }
div.portfolio .item.no-i { width: 555px; margin-left: 0; }
div.portfolio .item.no-i h2 a { font-size: 25px; }

label { clear: left; float: left; width: 200px; text-align: right; margin-bottom: 17px; padding-right: 7px; }
input.text, textarea.text { float: left; padding: 6px; border: 1px solid #c0c0c0; width: 400px; font-size: 13px; margin-top: -3px; font-family: Arial; }
textarea.text { height: 125px; margin-bottom: 10px; }
select { float: left; font-size: 13px; font-family: Arial; padding: 1px 0; width: 130px; }
input.submit { clear: left; display: block; margin-left: 207px; }

.errorExplanation { font-size: 12px; background-color: #FFEEEE; border: 1px solid #DD4444; padding: 10px; margin: 10px 0; }
.errorExplanation h2 { font-size: 16px; }
.errorExplanation ul { margin-left: 35px; }
.fieldWithErrors input, .fieldWithErrors textarea { border: 1px solid #DD4444; background-color: #FFEEEE; }
.success { padding: 10px; border: 1px solid #9c9; background-color: #E2F9E3; color: #060; }