.colored { color: #ff9900; }

.highlight { background-color: #ffface; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

.clear { clear: both; }

.left { float: left; }

.right { float: right; }

.serif { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", times, serif; }

.centered { text-align: center; }

.rounded-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.glossary { cursor: help; border-bottom: 1px dashed #888888; }

img.border { border: 4px solid #999999; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

body { background: #eeeeee; color: #999999; }
body p { font-size: 1.2em; }
body .title { text-align: center; }

header { display: block; color: white; height: 55px; background: #223344; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #556677), color-stop(100%, #223344)); background-image: -moz-linear-gradient(top, #556677 0%, #223344 50%); background-image: linear-gradient(top, #556677 0%, #223344 50%); border-bottom: 4px solid #e6e6e6; }
header #identity { margin-top: 9px; text-align: right; }
header #identity #phone { float: left; font-size: 1.4em; padding-top: 10px; }
header #nav { text-align: center; }
header #nav ul { list-style-type: none; margin: 0; }
header #nav ul li { float: left; font-size: 1.1em; }
header #nav ul li .active { background: #000011; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #444455), color-stop(100%, #000011)); background-image: -moz-linear-gradient(top, #444455 0%, #000011 50%); background-image: linear-gradient(top, #444455 0%, #000011 50%); color: white; font-weight: bold; }
header #nav ul li a, header #nav ul li #phone { padding: 0 1em; padding-top: 19px; }
header #nav ul li a { font-weight: bold; margin-right: 1px; display: block; height: 36px; color: white; text-decoration: none; }
header #nav ul li a:hover { background: #000011; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #444455), color-stop(100%, #000011)); background-image: -moz-linear-gradient(top, #444455 0%, #000011 50%); background-image: linear-gradient(top, #444455 0%, #000011 50%); color: white; font-weight: bold; text-shadow: #666666 0.1em 0.1em 0.1em; cursor: pointer; }
header #nav ul li a:active { background: #ff9900; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffcc33), color-stop(100%, #ff9900)); background-image: -moz-linear-gradient(top, #ffcc33 0%, #ff9900 50%); background-image: linear-gradient(top, #ffcc33 0%, #ff9900 50%); }
header #nav ul li #phone { display: none; margin-left: 2em; }

#main { background: white; color: black; padding-top: 2em; }
#main .graybox { margin-top: 2em; padding: 2em; background: #efefef; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
#main #home { padding-top: 2em; }
#main #home #pop { text-align: center; }
#main #home #pop h1 { text-shadow: #aaaaaa 1px 1px 1px; font-size: 3.5em; font-weight: normal; padding-bottom: 1em; }
#main #home #pop h2 { color: #444444; }
#main #home #pop h2 a { font-weight: bold; padding: 2px; color: #444444; }
#main #home #pop h2 a:hover { text-decoration: none; }
#main #home #detail { font-size: 1.2em; background: #ffface; border-top: 1px solid #fffff0; border-bottom: 1px solid; border-color: #ccc79b; padding: 1em 0; }
#main #home #detail .item { color: #444444; padding-bottom: 2em; }
#main #home #detail .item h4 { color: black; font-size: 1em; font-weight: bold; padding: 0; margin: 0; }
#main #home #detail .item h4 a { text-decoration: none; color: #223344; font-weight: bold; text-align: left; }
#main #home #detail .item h4 a:hover { text-shadow: #ffcc33 0 0 0.2em; }
#main #home #detail .item.bottom { padding-bottom: 0; }
#main #home #more { background-color: white; padding-top: 2em; }
#main #home #more #actions ul { list-style-type: none; }
#main #home #more #actions ul li { font-size: 2em; border-bottom: 1px dashed white; }
#main #home #more #actions ul li a { color: black; font-style: italic; border-bottom: 1px dashed black; font-weight: bold; text-decoration: none; }
#main #home #more #actions ul li a:hover { border-color: #ff9900; color: #ff9900; text-shadow: #cccccc 0.1em 0.1em 0.2em; }
#main #home #testimonials { position: relative; height: 13em; }
#main #home #testimonials .testimonial { position: absolute; top: 0; left: 0; z-index: 50; display: none; }
#main #home #testimonials .testimonial .quote { font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 2em; line-height: 1; text-shadow: #cccccc 0.1em 0.1em 0.2em; }
#main #home #testimonials .testimonial .quote:before, #main #home #testimonials .testimonial .quote:after { content: '"'; }
#main #home #testimonials .testimonial .author { float: right; }
#main #home #testimonials .testimonial .company { font-weight: bold; }
#main #home #testimonials .testimonial.active { display: block; }
#main #work #products { margin-bottom: 4em; }
#main #work #products .product { text-align: center; }
#main #work #products .product .detail h4 { width: 200px; margin: 0 auto; font-weight: bold; }
#main #work #tools .tool { padding: 1em; margin-bottom: 2em; }
#main #work #tools .tool p { text-align: left; padding-left: 110px; }
#main #work #tools .frameworks { text-align: center; }
#main #work #tools .frameworks h4 { color: #cccccc; text-shadow: none; }
#main #work #tools .frameworks .framework { padding: 0 2em; display: inline; }
#main #work #tools .frameworks .framework a { text-decoration: none; }
#main #work #tools .frameworks #prototype.framework img { padding: 4px; background-color: #0e4faf; }
#main #services { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background: #eeeeee; }
#main #services .service { padding: 1em; overflow: hidden; border-bottom: 1px solid #cccccc; }
#main #services .service .icon { float: left; width: 100px; }
#main #services .service .detail { float: left; overflow: hidden; width: 800px; padding-left: 20px; }
#main #services .service .detail .contact { display: none; }
#main #services .service.highlight .contact { display: block; }
#main #services .service h2 { padding: 0; margin: 0; }
#main #clients .title { text-align: center; }
#main #clients .intro { font-size: 1.3em; text-align: center; }
#main #clients #portfolio { padding: 20px 10px; }
#main #clients #portfolio h4 { font-size: 1.5em; }
#main #clients #portfolio .client { min-height: 100px; padding: 25px 5px; border-bottom: 1px solid #cccccc; }
#main #clients #portfolio .client .thumb { float: left; width: 250px; margin-right: 15px; padding: 2px; }
#main #clients #portfolio .client .info { margin-left: 270px; }
#main #clients #portfolio .client .provided { color: #666666; font-style: italic; padding-top: 5px; font-size: 80%; }
#main #clients #portfolio #crowdfusion .powering a { text-decoration: none; }
#main #clients #portfolio .clean { background: none; border: none; }
#main #clients #portfolio .last { border-bottom: none; }
#main #contact { font-size: 1.2em; }
#main #contact #address { text-align: center; }
#main #contact #address h3 { padding: 0; margin: 0; }
#main #contact #address address { font-size: 1.2em; margin: 0; }
#main #contact #address p { padding: 0; margin: 0; }
#main #contact #map { width: 400px; margin: 0 auto; }
#main #contact #form { padding: 5px; width: 700px; margin: 0 auto; background: #ffface; border: 1px solid; border-color: #ccc79b; }
#main #contact #form td { padding-top: 0; padding-bottom: 0; }
#main #contact #form input { padding: 0.2em; font-size: 1em; }
#main #contact #form .submit { text-align: right; }
#main #philosophy h2 { font-size: 3em; }
#main #philosophy p { text-align: center; width: 600px; margin-left: auto; margin-right: auto; font-size: 2em; }
#main #about h2, #main #about h3 { text-shadow: none; }
#main #about h2 { line-height: normal; font-size: 2.5em; }
#main #about h3 { font-weight: normal; font-size: 2em; }
#main #about #worksheet { margin-top: 2em; padding: 2em; background: #ffface; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
#main #about #worksheet h4 { font-size: 1.4em; font-variant: small-caps; font-weight: bold; text-transform: lowercase; margin-bottom: 0.4em; }
#main #about #worksheet #problems { width: 380px; float: left; }
#main #about #worksheet #solutions { width: 380px; float: left; margin-left: 75px; }
#main #about #worksheet #slogan { width: 600px; margin: 0 auto; padding: 1em; background: #eee9bd; text-align: center; }
#main #about #worksheet #slogan h2 { padding: 0; margin: 0; }
#main #about #signature { margin-top: 2em; }

footer { border-top: 4em solid white; }
footer .container { text-align: center; }
footer #images a { text-decoration: none; }
footer #images img { padding: 10px; }
footer #footer-text p, footer #footer-text address { margin: 0; }