/* *********************************** STRUCTURE *********************************** */

body { font: small/1.3 Verdana, Arial, sans-serif; margin: 0; padding: 2em; }

img { float:left; border: none; margin: .25em 0 0 0; padding: 0 0 0 0; }

a:hover { border-bottom: 1px solid; }

p { margin: 1em 0; padding: 0; }

.skip { left: -99999em; position: absolute; top: -99999px; }

#structure { margin: 0 auto; max-width: 100%; width: 60em; }

#header { border-bottom: 0.5em solid; clear: both; float: left; line-height: 1; width: 100%; }
#header img {padding: 0 0 0 1.5em; }

#header h1 { float: left; font-size: 2em; font-weight: normal; margin: 0; padding: 1.25em 0 1.25em 1em; }

#nav { float: right; margin: 0; padding: 2em 1em 2em 0; }

#nav li { display: inline; padding: 0 1em 0 0; }

/*
  EM >>  2em  +  40em  +  2em  +  14em  +  2em  = 60em
  %  >> 3.34% + 66.67% + 3.32% + 23.33% + 3.34% = 100%
*/

#main { clear: left; float: left; margin: 1em 0 1em 3.34%; width: 66.67%; }

#supplement { clear: right; float: right; margin: 1em 3.34% 1em 0; width: 23.33%; }

#supplement ul { border: 1px solid; margin: 1em 0; padding: 1em 0; }

#supplement li { margin: 0.5em 0; padding: 0; }

#footer { border-top: 1px solid; clear: both; font-size: 8px; padding: 0.1em 0; }

/* fix ie */

* html #content { height: 1%; }

* html #main { margin-left: 1.67%; }

* html #supplement { margin-right: 1.67%; }

/* small */

body.small { padding: 0; }

body.small #structure { width: 100%; }

/* smaller */

body.smaller #structure { padding-bottom: 2em; }

body.smaller #header { float: none; text-align: center; }

body.smaller #header h1 { float: none; padding: 1.5em 0 0.5em; }

body.smaller #nav { float: none; padding: 0 0 3em; }

body.smaller #main { margin: 1em 5% 0; width: 90%; }

body.smaller #supplement { margin: 0 5% 1em; width: 90%; }

body.smaller #footer { background: none; border: none; padding: 0; }

/* *********************************** STYLE *********************************** */

body { background: #777; color: #222; }

a { color: #f3c; text-decoration: none; }

a:hover { border-color: #fbe; color: #000; }

#structure { background: #fff; }

#header { background: #fff; border-color: #f3c; color: #000; }

#header h1 { font-weight: normal; }

#nav { list-style: none; text-transform: lowercase; }

#nav a { color: #999; }

#nav-webdesign a { color: #111; font-weight: bold; }

#nav-multimedia a { color: #111; font-weight: bold; }

#nav-cdanddvdproduction a { color: #111; font-weight: bold; }

#nav a:hover { border: none; color: #fbe; }

#main { text-align: justify; }

#supplement ul { background: #eee; border-color: #ccc; list-style: none; }

#supplement li { list-style: none; text-align: center; }

#footer { background: #eee; border-color: #ccc; color: #999; text-align: center; }

.vcard { white-space: nowrap; }