* { margin: 0; padding: 0; outline: 0; }

body { font: 11px/16px Helvetica, Arial, Sans-Serif; color: white; text-align: left; }
body#grey { background: #282829; }
body#grey #page { background: #39393b; }
body#red { background: #9a2730; }
body#red #page { background: #ef3d4b; }

#page { padding-top: 30px; }

a { color: white; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a.underlined { text-decoration: underline; }
a.underlined:hover { text-decoration: none; }
a.dotted { padding-bottom: 1px; border-bottom: 1px dotted white; color: white; font-weight: bold; display: inline-block; }
a.dotted:hover { border-color: transparent; text-decoration: none; }
a.red { border-color: #bf313c !important; }
a img { border: 0; }

input, select, textarea { font-family: "Trebuchet MS", Arial, Sans-Serif; }

fieldset { border: 0; }

.ar { display: block; text-align: right; }

.ac { display: block; text-align: center; }

.al { display: block; text-align: left; }

.cl { clear: both; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; }

.fr { float: right; display: inline; }

.fl { float: left; display: inline; }

.hidden { display: none; }

.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.shell { margin: 0 auto; width: 960px; position: relative; }

h2 { font: bold 40px/42px "DIN", Arial, Sans-Serif; }

h3 { font: bold 24px/29px "DIN", Arial, Sans-Serif; }

small { font-size: 10px; }

h1#logo { height: 18px; width: 242px; padding: 0 0 5px 10px; }
h1#logo a { display: block; height: 18px; background: url(/images/logo.gif); }

#navigation { border-top: 1px solid #bf313c; border-bottom: 1px solid #bf313c; background: #39393b url(/images/nav-bg.gif) repeat 0 0; padding: 15px 10px 0 10px; min-height: 172px; }
#navigation ul { list-style: none outside none; text-transform: uppercase; }
#navigation ul li { line-height: 30px; }
#navigation ul li a { color: white; font: bold 24px/30px "DIN", Arial, Sans-Serif; }
#navigation ul li a:hover, #navigation ul li a.active { color: #ef3d4b; text-decoration: none; }

#red #navigation { background: #ef3d4b url(/images/red-nav-bg.gif); }
#red #navigation ul li a { color: #952730; }
#red #navigation ul li a:hover, #red #navigation ul li a.active { color: white; }

.services { background: #39393b url(/images/services-bg.gif) repeat 0 0; min-height: 186px; padding-left: 10px; padding-bottom: 6px; position: relative; }
.services ul { list-style: none outside none; padding: 70px 0 0 0; }
.services ul li { color: white; font-size: 16px; line-height: 18px; }

#red .services { background: #ef3d4b url(/images/red-services-bg.gif); }
#red .services ul li { color: #992831; }

#categories-list li a { text-decoration: none; color: inherit; }

body#red #categories-list li a:hover { color: #721d24; }
body#grey #categories-list li a:hover { color: #7d7d80; }
body#grey #categories-list li.highlight a, body#grey #categories-list li.active a { color: #bf313c !important; }

.featured { display: none; height: 117px; width: 117px; position: absolute; top: 40px; left: 190px; font-size: 0; line-height: 0; text-indent: -4000px; }
.featured img { display: block; }

.other-links { position: absolute; top: 385px; left: 10px; }
.other-links ul { list-style: none outside none; }
.other-links ul li a { font-weight: bold; color: white; }

.introduction { min-height: 359px; background: #e43a47; }
.introduction h3 { text-transform: uppercase; width: 380px; }
.introduction h2 { text-transform: uppercase; color: #992831; }

.work-detail { border-top: 1px solid #bf313c; position: relative; padding-bottom: 20px; line-height: 14px; }
.work-detail .nav { position: absolute; top: -20px; left: 0; width: 634px; color: white; }
.work-detail .nav div.disabled { color: #7d7d80; display: inline; }
.work-detail .nav a { color: white; }
.work-detail .nav span { padding: 0 15px; }
.work-detail .nav span.first { padding-left: 0; }
.work-detail .container { background: url(/images/inner-bg.gif) repeat 0 0; padding: 15px 0 0 0; color: white; }
.work-detail h3 { font: bold 14px/16px Helvetica, Arial, Sans-Serif; padding: 0 0 10px 10px; }
.work-detail .column { border-top: 1px solid #7d7d80; padding: 10px 10px 0 10px; height: 100%; width: 292px; }
.work-detail .column p { padding-bottom: 15px; }
.work-detail .column ul { list-style: none outside none; padding-bottom: 15px; font-weight: bold; }
.work-detail .column ul li { color: #7d7d80; }
.work-detail .column ul li span { color: #bf313c; }
.work-detail .column ul li a { color: white; }

#media-container { position: relative; height: 405px; }
#media-container .image, #media-container .media_item { position: absolute; width: 634px; margin-top: 13px; }

.splash { width: 634px; height: 380px; border-top: 1px solid #bf313c; }

.screencast { margin-bottom: 5px; }
.screencast.hide { display: none; }

#flashContent { display: none; }

.work-list ul { list-style: none outside none; font-weight: bold; }
.work-list .project-summary { display: block; position: relative; border-top: 1px solid #bf313c; margin-bottom: 20px; background: url(/images/inner-bg.gif) repeat 0 0; height: 167px; width: 634px; }
.work-list .project-summary a.main-click { text-decoration: none; height: 167px; width: 634px; display: block; }
.work-list .project-summary h3 { padding: 20px 0 5px 0; margin-left: 5px; border-bottom: 1px solid #7d7d80; width: 315px; font-size: 14px; line-height: 18px; }
.work-list .project-summary .copy { width: 312px; padding: 6px; }
.work-list .project-summary .copy span { color: #bf313c; font-weight: bold; }
.work-list .project-summary.highlight, .work-list .project-summary:hover { border-top: 1px solid white; background-image: url(/images/inner-bg-hover.gif); }
.work-list .project-summary.highlight h3, .work-list .project-summary:hover h3 { border-bottom: 1px solid white !important; }
.work-list .project-summary.highlight ul li, .work-list .project-summary:hover ul li { color: white; }
.work-list .project-summary.highlight ul li span, .work-list .project-summary:hover ul li span { color: #444444; }
.work-list .project-summary.highlight .copy span, .work-list .project-summary:hover .copy span { color: white !important; }

.inner-content .contact { background: url(/images/contact-bg.jpg) no-repeat 0 0; border-top: 1px solid #bf313c; padding-top: 20px; }
.inner-content .contact h3 { color: white; text-transform: uppercase; padding: 0 0 143px 10px; }
.inner-content .contact .column { border-top: 1px solid white; padding: 5px 0 43px 5px; width: 307px; font-size: 12px; line-height: 14px; font-weight: bold; }
.inner-content .company { border-top: 1px solid #bf313c; }
.inner-content .company h2 { text-transform: uppercase; padding: 15px 0 20px 10px; font: bold 40px/42px "DIN", Arial, Sans-Serif; }
.inner-content .company h3 { border-top: 1px solid #bf313c; text-transform: uppercase; color: white; font: bold 24px/29px "DIN", Arial, Sans-Serif; padding: 5px 0 10px 10px; }
.inner-content .company p { padding: 0 0 10px 10px; }
.inner-content .company div.fr { border-top: 1px solid #bf313c; padding-top: 10px; }
.inner-content .company div.fr img { float: left; display: inline; }

div.inner-content { margin-bottom: 50px; }

.shortcolumn, .column { width: 312px; }

.widecolumn { width: 634px; }

.shortcolumn, .widecolumn { margin-bottom: 100px; position: relative; border-bottom: 2px solid #75757a; }

#footer { background: url(/images/footer-bg.gif) repeat-x 0 0; padding: 20px 0; color: white; line-height: 14px; }
#footer .shell { background: none; }
#footer .column { border-bottom: 1px solid #bf313c; margin-bottom: 50px; }
#footer h4 { font: bold 12px/14px "DIN", Arial, Sans-Serif; color: #ef3d4b; border-bottom: 1px solid #bf313c; text-transform: uppercase; padding: 0 0 3px 10px; margin-bottom: 10px; }
#footer h3 { font: bold 11px/14px Helvetica, Arial, Sans-Serif; color: white; }
#footer .wrapper { padding: 0 25px 15px 10px; background-repeat: no-repeat; background-position: right bottom; min-height: 150px; position: relative; }
#footer p { padding-bottom: 10px; }
#footer .more { font-size: 10px; color: #ef3d4b; font-weight: bold; border-bottom: 1px dotted #ef3d4b; }
#footer .icon { position: absolute; width: 40px; height: 40px; float: right; }
#footer .post { background-image: url(/images/icon-blog.gif); }
#footer .post h3 { font-size: 11px; color: white; }
#footer .post h3 a { color: white; }
#footer .post .date { font-size: 10px; color: #ef3d4b; display: block; margin-bottom: 15px; font-weight: bold; }
#footer .post .icon { bottom: 0; right: 0; }
#footer .tweet { background-image: url(/images/icon-tweet.gif); }
#footer .tweet .icon { bottom: 0; right: 0; }
#footer .last { background-image: url(/images/icon-lastfm.gif); }
#footer .last .more { position: relative; top: 10px; }
#footer .last .icon { right: 0; bottom: 0; }
#footer ul { list-style: none outside none; }
#footer .column { float: left; display: inline; }
#footer .middle-column { margin: 0 12px; }
#footer .bottom-links { width: 625px; padding: 5px 0 0 5px; color: #ef3d4b; }
#footer .bottom-links ul { width: 323px; }
#footer .bottom-links ul li a { color: #ef3d4b; }

#red #footer { background: url(/images/red-footer-bg.gif) repeat-x 0 0; }
#red #footer .post { background-image: url(/images/red-icon-blog.gif); }
#red #footer .tweet { background-image: url(/images/red-icon-tweet.gif); }
#red #footer .last { background-image: url(/images/red-icon-lastfm.gif); }

#grey .bottom-links { border-top: 2px solid #75757a; }

#red .bottom-links { border-top: 2px solid white; }

.image .positioning { margin-bottom: 2px; }
.image .positioning a, .image .positioning span { float: left; display: inline; font-size: 0; line-height: 0; text-indent: -4000px; }
.image .positioning .arrows a { width: 13px; height: 13px; }
.image .positioning a.prev { background: url(/images/button-prev.png) no-repeat 0 0; }
.image .positioning a.next { background: url(/images/button-next.png) no-repeat 0 0; }
.image .positioning a:active { background-position: bottom; }
.image .positioning .dots { float: left; display: inline; margin-left: 7px; }
.image .positioning .screenshotLink { height: 7px; width: 7px; background: url(/images/dot.png) no-repeat 0 0; margin-right: 3px; margin-top: 3px; }
.image .positioning .selected { background: url(/images/dot-active.png) no-repeat 0 0; }
.image .media_items { display: block; position: relative; height: 375px; }
.image .media_items .media_item { position: absolute; top: 0; left: 0; }

#screenshots_link { display: none; }

.project-admin-new-link { position: absolute; }

.project-admin-controls { position: absolute; bottom: -17px; }

.project-admin-new-link { top: -20px; }

.admin-links { position: absolute; top: -20px; right: 0; }

form { margin-top: 10px; }
form p { margin-bottom: 5px; }

#index-list { margin-top: 20px; }
#index-list td { padding: 0 10px 0 0; }

.formcol { margin-right: 20px; }

.responsibilities-list { float: left; margin-right: 10px; }

.work-detail .responsibilities-list { float: none; }

.blog-h1 { margin-bottom: 360px; }

.pickNewImage { margin: 8px 0 0 8px; }

#screenshots img { padding-right: 6px; }

#addScreenshot { display: none; }

.launch_site { font-size: 1.4em; }
.launch_site:hover { border-bottom: 1px solid white; }

.video_unavailable { padding: 2em; text-align: center; font-size: 1.5em; }