@charset "utf-8";
* { margin: 0; padding: 0; }
body { background-color: #171719; }

a { color: #cc9900; outline: none; }
a img { border: none; }

p { color: #999; margin: 1em 0; font-family: Arial; font-size: 12px; line-height: 1.4em; }

h1, h2, h3, h4, h5 { color: #999; margin: 1em 0; font-family: Arial, Verdana; }
h2 { font-size: 20px; font-weight: normal; }

/* Container */
#container { width: 800px; margin: 0 auto; }

/* Header */
#header { height: 132px; background: url(../images/bg-header.gif) left top no-repeat; }

/* Main */
#main { }

#main p a { color: #666; text-decoration: none; background: url(../images/dotted-grey.gif) left bottom repeat-x; }
#main p a:hover { color: #fff;  }

#main ul { color: #999; font-family: Arial; font-size: 12px; margin: 1em 0; line-height: 1.4em; padding: 0 0 0 2em;  }

/* General */
.no-margin { margin: 0; }
.padded { margin: 1em 10px;}
.padded-last { margin: 1em 10px 2em 10px;}
.clear { clear: both; }
.centralize { text-align: center; }

/* Home Page */
h1 { font-size: 12px; margin: 0 10px; }
h2 { margin: 0.5em 0 }

div#service-print, div#service-web, div#service-identity { padding: 0 10px; margin: 0 10px 20px 10px; float: left; width: 150px;  }
div#service-identity { width: 200px; }
div#service-print span, div#service-web span, div#service-identity span { color: #444; }

div#service-print { margin-left: 130px; }

/* Works Page */
h3 { font-size: 18px; font-family: Arial; padding: 8px 10px 0 10px; font-weight: normal; height: 30px; background: url(../images/bg-h3.gif) left top no-repeat;}
h3 strong { color: #eee; padding: 0 2em 0 0.5em; font-weight: normal; }

.slogan { font-family: Georgia, "Times New Roman"; font-weight: bold; font-size: 18px; font-style: italic; padding: 0 10px; text-align: center;  }
.description { margin: 1em 10px; font-size: 11px; }
.description span { color: #444; letter-spacing:.1em; }

#worksdisplay { padding: 10px; height: 300px; width: 780px;}
#worksthumbs { padding: 10px; height: 80px; width: 780px; }

div.back-to-top { margin: 2em 0 3em 0; }
div.back-to-top span { display: none; }
div.back-to-top a { height: 40px; display: block; background-image: url(../images/back-to-top.gif); background-position: 0 0; }
div.back-to-top a:hover { background-position: 0 -40px; }

div#workspage-top p, div#workspage-bottom p { font-size: 1.2em; font-weight: bold; }
div#workspage-top a, div#workspage-bottom a { display: inline-block; padding: 0 0.4em; text-decoration: none; background-image: none; }
div#workspage-top a:hover, div#workspage-bottom a:hover { color: #FFCC00; background-color: #111; }
div#workspage-top a.current, div#workspage-bottom a.current { color: #000; background-color: #ffCC00; }

/* Footer */
#footer { height: 50px; text-align: center; padding: 0.2em; }
#footer p { font-family: Arial; font-size: 10px; }


/* Navigation */
#navigation { width: 490px; height: 30px; float: right; margin: 92px 10px 0 0; }
#navigation ul { list-style-type: none; }
#navigation li { float: left; }
#navigation a { display: block; background-image: url(../images/navigation.gif); background-repeat: no-repeat; height: 30px; text-decoration: none; }
#navigation a span { visibility: hidden; }
#navigation a.nav-home { background-position: 0 0; width: 80px; }
#navigation a:hover.nav-home { background-position: 0 -30px; }
#navigation a.nav-home-current { background-position: 0 -60px; width: 80px; }
#navigation a.nav-about { background-position: -80px 0; width: 102px; }
#navigation a:hover.nav-about { background-position: -80px -30px; }
#navigation a.nav-about-current { background-position: -80px -60px; width: 102px; }

#navigation a.nav-works { background-position: -182px 0; width: 113px; }
#navigation a:hover.nav-works { background-position: -182px -30px; }
#navigation a.nav-works-current { background-position: -182px -60px; width: 113px; }

#navigation a.nav-news { background-position: -295px 0; width: 77px; }
#navigation a:hover.nav-news  { background-position: -295px -30px; }
#navigation a.nav-news-current { background-position: -295px -60px; width: 77px; }

#navigation a.nav-contact { background-position: -372px 0; width: 118px; }
#navigation a:hover.nav-contact { background-position: -372px -30px; }
#navigation a.nav-contact-current { background-position: -372px -60px; width: 118px; }