/* @group CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* @end */

body { background-color: #FFF; font-family: Arial, sans-serif; font-size: 100%; color: #000; text-align: center; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }

/********************************************/
/* GENERIC                                  */
a.more { font-family: Arial, sans-serif; font-size: 0.6875em; background-color: #fff200; line-height: 1.33em; padding: 0.2em; text-decoration: none; }
a.more:hover { border-bottom: none; text-decoration: none; }
span.stabilo { background-color: #fff200; line-height: 1.33em; }

/********************************************/
/* CONTAINERS                               */
#wrapper { width: 940px; margin: 0 auto 3em auto; padding: 0 10px; overflow: hidden; text-align: left; }
#header { height: 105px; border-bottom: 5px solid black; position: relative; }

/********************************************/
/* LOGO                                     */
#logo { position: absolute; top: 27px; }
#logo a { display: block; width: 250px; height : 29px; text-indent: -5000px; background: url("../img/logo.gif") left top no-repeat; }
.vcard { position: absolute; top: 24px; right: 0px; font-family: Georgia, serif; line-height: 1.25em; }
.vcard .fn,
.vcard .type { display: none; }

#language { text-decoration: underline; position: absolute; top: 80px; }

/********************************************/
/* NAVIGATION                               */
#navigation { width: 940px; height: 34px; margin-bottom: 1.4em; background: url("../img/border.gif") bottom left repeat-x; font-size: 0.6875em; }
#navigation #breadcrumb { float: left; margin-top: 16px; }
#navigation #breadcrumb li { float: left; margin-right: 0.5em; }
#navigation #sub-navigation { float: right; margin-top: 16px; margin-right: 0px; }
#navigation #sub-navigation li { float: left; }
#navigation #sub-navigation li.portfolio { margin-right: 50px; }
#navigation #sub-navigation li.next { margin-right: 0px; }
#navigation #sub-navigation li.prev { margin-right: 15px; }

/********************************************/
/* BODY TEXT                                */
#text-intro { margin-bottom: 1.25em; padding-bottom: 0.3em; width: 960px; font-family: Georgia, Serif; font-size: 1em; line-height: 1.25em; background: url("../img/border.gif") bottom left repeat-x; }
#text-intro.no-border { margin-bottom: 0; padding-bottom: 0; background: none; }
#text-intro img { float: left; display: block; margin-right: 0.74em; margin-bottom: 2em; }
#text-intro p { margin-bottom: 1em; width: 700px; }
#text-intro p em { font-style: italic; }
#text-intro p sup { font-size: 0.4em; vertical-align: 0.85em; }
#text-intro a { text-decoration: underline; }
#text-intro a:hover { text-decoration: none; }

/* REFERENCE LIST                           */
#reference-list { width: 960px; font-size: 0.625em; }
#reference-list h2 { width: 960px; margin-bottom: 1em; font-family: Georgia, Times, serif; font-size: 1.6em; }
#reference-list h2 a { text-decoration: underline; }
#reference-list .reference-line { overflow: hidden; }
#reference-list .reference-item { float: left; width: 220px; margin: 0 2em 2.4em 0; padding: 0 0 0.6em 0; background: url("../img/border.gif") left bottom repeat-x; line-height: 1.25em; }
#reference-list .reference-item img { display: block; margin-bottom: 0.5em; }
#reference-list .reference-item p { font-size: 1.1em; line-height: 1.3;}

/* PAGE HEADER                              */
.page-header { width: 940px; overflow: hidden; margin: 0.5em 0 1.05em 0; padding: 0 0 0.4em 0; background: url("../img/border.gif") bottom left repeat-x; }
.page-header h1 { margin-bottom: 0.125em; font-family: Georgia, Times, serif; font-size: 2.1875em; }
.page-header h1 em { font-style: italic; }
.page-header h2 { font-size: 0.6875em; }

/* PAGE INTRO                               */
.page-text { width: 700px; margin-top: -0.625em; margin-bottom: 1em; font-family: Arial, sans-serif; font-size: 0.8125em; line-height: 1.4em; text-align: justify; }
.page-text p { margin-bottom: 1em; width: 700px; }
.page-text p em { font-style: italic; }
.page-text p sup { font-size: 0.4em; vertical-align: 0.85em; }
.page-text a { text-decoration: underline; }
.page-text a:hover { text-decoration: none; }

.page-medias { width: 960px; }
.page-medias img { margin: 0 1.25em 1em 0; }
.page-medias .reference-medias-group{ clear: left; }
.page-medias .reference-medias-group h3 { margin-bottom: 0.35em; padding-bottom: 0.1em; font-family: Georgia, Times, serif; font-size: 2.1875em; background: url("../img/border.gif") left bottom repeat-x; }
.reference-detail ul#zoom-navigation { margin: 1em 0 0.5em 0; overflow: hidden; }
.reference-detail ul#zoom-navigation li { display: block; float: left; width: 70px; font-size: 1.5em; }
.reference-detail div.legende { margin-top: 0.35em; padding-bottom: 1em; font-family: Arial, sans-serif; font-size: 0.8125em; }

/* GAZETTE                                  */
#hartland-gazette.noborder { border: none; }
#post-list .page-text { margin-bottom: 3em; }
.pagination { margin-left: 240px; text-align: left; }
.pagination li { display: inline; font-size: 0.75em; }
.pagination li.current { font-weight: bold; text-decoration: underline; }

/********************************************/
/* STUDIO/HISTOIRE                          */
.schema { margin: 0.5em 0; }
.schema td { padding-right: 0.4em; vertical-align: middle; }
.schema td.bordered { padding-left: 0.25em; border-left: 1px solid #666; }

#curriculum { width: 720px; }
#curriculum li { float: left; width: 220px; margin-right: 20px; }
#curriculum li img { display: block; margin-bottom: 1.4em; }
#curriculum li h2 { margin-bottom: 0.6em; font-family: Georgia, Times, serif; font-size: 1.6875em; }
#curriculum li p { margin-bottom: 1.1em; font-family: Georgia, Times, serif; font-size: 0.875em; line-height: 1.2em; }
#curriculum li p strong { font-weight: bold; }

#client-list { overflow: hidden; }
#client-list h2 { margin: 0 0 1.125em 0; font-family: Georgia, Times, serif; font-size: 1em; text-transform: uppercase; }
#client-list .client-column { float: left; width: 25%; }
#client-list .client-column h3 { margin: 0 0 1.4em 0; font-family: Georgia, Times, serif; font-size: 0.75em; font-weight: bold; }
#client-list .client-column li { margin: 0 0 0.1em 0; font-family: Georgia, Times, serif; font-size: 0.75em; line-height: 1.25em; }
#client-list .client-column li.indented { margin-left: 1em; }
#client-list .client-column li a { font-family: Georgia, Times, serif; text-decoration: underline; }
#client-list .client-column li a:hover { text-decoration: none; }

/********************************************/
/* HOME -> Hartland Gazette                 */
#hartland-gazette { overflow: hidden; clear: left; padding: 1em 0 0 0; border-top: 5px solid black; }
#hartland-gazette h3 a { float: left; width: 220px; height: 32px; margin-right: 1.4em; padding-bottom: 0.6em; font-family: Georgia, Times, serif; font-size: 0.875em; line-height: 1.25em; text-transform: uppercase; background: url("../img/hartland_news.png") top left no-repeat; text-indent: -5000px; }

#blog-entries { float: left; width: 460px; margin-top: 0.5em; }
.blog-entry { margin: 0 0 1.5em 0; padding: 0 0 1.5em 0; background: url("../img/border.gif") bottom left repeat-x; }
.blog-entry .signature { width: 460px; margin-bottom: 0.25em; font-size: 0.5625em; }
.blog-entry h2 { float: auto; width: 460px; margin-bottom: 1em; font-family: Georgia, Times, serif; font-size: 1em; line-height: 1.25em; }
.blog-entry p { margin: 0 0 0.5em 0; font-family: Georgia, Times, serif; font-size: 0.75em; line-height: 1.25em; }

/*********************************************/
/* CLIENT -> MEDIA SHOW                      */
.media-item { float: left; overflow: hidden; }
.media-item a { float: left; overflow: hidden; }
.media-item object { float: left; clear: left; }
