@font-face { font-family: Kaffee; src: url("/fonts/YanoneKaffeesatz-Light.otf"); }
@font-face { font-family: Kaffee; font-weight: bold; src: url('/fonts/YanoneKaffeesatz-Bold.otf'); }

/*
@font-face {
    font-family: 'YanoneKaffeesatzBold';
    src: url('/fonts/yanonekaffeesatz-bold-webfont.eot');
    src: url('/fonts/yanonekaffeesatz-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/yanonekaffeesatz-bold-webfont.woff') format('woff'),
         url('/fonts/yanonekaffeesatz-bold-webfont.ttf') format('truetype'),
         url('/fonts/yanonekaffeesatz-bold-webfont.svg#YanoneKaffeesatzBold') format('svg');
    font-weight: bolder;
} */

@font-face {
    font-family: 'YanoneKaffeesatz';
    src: url('/fonts/yanonekaffeesatz-regular-webfont.eot');
    src: url('/fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
         url('/fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
         url('/fonts/yanonekaffeesatz-regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
    font-weight: bold;
}

@font-face {
    font-family: 'YanoneKaffeesatz';
    src: url('/fonts/yanonekaffeesatz-light-webfont.eot');
    src: url('/fonts/yanonekaffeesatz-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/yanonekaffeesatz-light-webfont.woff') format('woff'),
         url('/fonts/yanonekaffeesatz-light-webfont.ttf') format('truetype'),
         url('/fonts/yanonekaffeesatz-light-webfont.svg#YanoneKaffeesatzLight') format('svg');
    font-weight: normal;
}


body { font-family: YanoneKaffeesatz, Arial, sans-serif; font-size: 16px; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding: 0; margin: 0; }

#wrapper { width: 960px; padding: 0 30px; margin: 0 auto; }
#header { overflow: hidden; }
#footer { text-align: right; font-size: 0.875em; width: 960px; }

#menu { float: right; }
#menu ul { list-style-type: none; }
#menu ul li { float: left; padding-left: 1em; padding-top: 2.25em; }
#logo h1 { font-weight: normal;  float: left; }
#logo a:hover { text-decoration: none; }
#people h2 { margin-bottom: 0.25em; margin-top: 1.25em;}
#people p { margin-top: 0.25em; }

.bold { font-weight: bold; }
.clear { clear: both; }
.hidden { display : none; }
.grey_separator { width: 100%; border: 1px solid #ddd; color: #ddd; margin: 0.5em 0; display: block; }

img.profile_photo { float: left; margin: 5px; }

#contact_map { width: 700px; float: left; }
#contact_details { width: 260px; float: left; }

.fade_gallery_image { position: relative; /*height: 400px;*/ width: 960px; }
.fade_gallery_image img { display: block; }
.fade_gallery_description { position: absolute; bottom: 0px; padding: 5px; background: url('/images/background_whitetransparent.png'); width: 960px; font-size: 2em; }
ul.fade_gallery li { position: relative; }
.image_description { z-index: 0; position: absolute; top: 30px; }

#projects_navigation ul { list-style-type: none; margin-top: 5px; }
#projects_navigation ul li { float: left; margin-right: 25px; overflow: hidden; width: 200px; height: 130px; display: block; }
#projects_navigation ul li.last { margin-right: -1px; }
#projects_navigation ul li a, #projects_navigation ul li img { float: left; overflow: hidden; border: none; }
#projects_navigation ul li a:hover { border: 3px solid #000; overflow: hidden; }
#projects_navigation ul li a:hover img { margin: -3px; }

#projects_grid ul { list-style-type: none; margin-top: 5px; }
#projects_grid ul li { float: left; margin-right: 40px; overflow: hidden; width: 200px; height: 170px; display: block; }
#projects_grid ul li a, #projects ul li img { float: left; overflow: hidden; border: none; }
#projects_grid ul li a:hover { border: 3px solid #000; overflow: hidden; }
#projects_grid ul li a:hover img { margin: -3px; }