/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clear{
    clear: both;
}

input::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}

/* END RESET.CSS */

html {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #FFFFFF;
}

a {
    text-decoration: none; color: inherit;
}

a:hover {
    text-decoration: underline;
}

.fullwidth {
    width: 100%; float: left; clear: both;
}

header, .main {
    width: 968px; margin: 0 auto;
}

.header-wrap {
    background: #666666; /* Old browsers */
    background: -moz-linear-gradient(top,  #666666 20%, #333333 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#666666), color-stop(80%,#333333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #666666 20%,#333333 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #666666 20%,#333333 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #666666 20%,#333333 80%); /* IE10+ */
    background: linear-gradient(to bottom,  #666666 20%,#333333 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}

header {
    height: 40px; 
}


h1 {
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px 1px #000; color: #f0f0f0;
}

nav {
    text-align: right; color: #ffffff; font-size: 13px; margin: 5px 0;
}

h2 {
    font-size: 18px; font-weight: bold; color: #003366;
    margin: 10px 0 5px; padding-bottom: 5px; border-bottom: 1px solid #666;
}

h3 {
    font-size: 13px; font-weight: bold; color: #555555; margin: 4px 0;
}

h4 {
    font-size: 12px; font-style: italic; margin: 4px 0;
}

p {
    font-size: 11px; margin: 4px 0;
}

strong {
    font-weight: bold;
}

.main-wrap {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0f0f0 20%, #ffffff 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#f0f0f0), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* IE10+ */
    background: linear-gradient(to bottom,  #f0f0f0 20%,#ffffff 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

footer {
    margin: 40px 0 20px; padding: 10px 0 0; border-top: 1px solid #666;
}

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

.search-field {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: none; background: #d0e0FF;
    padding: 2px; margin: 2px 0; height: 20px;
    font-size: 13px; width: 210px; float: left;
    line-height: 20px; height: 20px;
}

.search-type {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: none; background: #E0E0E0;
    float: left; width: 100px;
    padding: 2px; margin: 2px 0 0 1px;
    font-size: 13px;
    line-height: 20px; height: 20px;
}

.placeholder {
    background: #d0e0FF;
}

.column {
    float: left; margin: 6px 0 6px 16px;
}

.subcol {
    float: left; margin: 2px 0 4px 12px;
}

.column-third {
    float: left; width: 312px;
}

.column-third:nth-child(3n+1) {
    margin-left: 0; clear: left;
}

.subcol-third-third {
    width: 96px; 
}

.subcol-third-third:nth-child(3n+1) {
    margin-left: 0; clear: left;
}

.column-half {
    width: 476px;
}

.column-half:nth-child(2n+1) {
    margin-left: 0; clear: left;
}

.subcol-half-fourth {
    width: 110px;
}

.subcol-half-fourth:nth-child(4n+1) {
    margin-left: 0; clear: left;
}

.column-full {
    margin-left: 0; width: 968px;
}

.subcol-eighth {
    width: 110px; margin-left: 12px;
}

.subcol-eighth:nth-child(even) {
    margin-left: 13px;
}

.subcol-eighth:nth-child(8n+1) {
    margin-left: 0; clear: left;
}

.center-image {
    text-align: center;
}

.image-and-fragment {
    position: relative; margin: 0 auto; display: inline-block;
}

.center-image img {
    display: inline-block;
}
/*
.image-and-fragment img:after {
    content: "."; display: block; clear: both; width: 0; line-height: 0; visibility: hidden;
}
*/
.image-and-fragment svg, .cutout-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* STYLES SPECIFIQUES A home.html */

.homeviz {
    float: left; width: 968px; height: 400px; margin: 2px 0 4px;
}

/* STYLES SPECIFIQUES A image.html */

.image-metadata {
    width: 100%; margin: 30px 0 0; font-size: 14px;
}

.image-metadata th {
    font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0; vertical-align: top;
}

.image-metadata td {
    width: 314px; padding: 4px 0;
}

.image-metadata input[type=text] {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%; border: 1px solid #6699FF; background: #FFFFFF;
    padding: 2px; margin: 3px 0;
    font-size: 13px;
}

.image-metadata textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%; border: 1px solid #6699FF; background: #FFFFFF;
    padding: 2px; margin: 3px 0; height: 100px;
    font-size: 13px;
    resize: none;
}

.image-keywords {
    width: 100%; margin: 10px 0 0;
}

.image-keywords th {
    font-size: 14px; font-weight: bold; text-align: left; padding: 4px 0 4px 0; width: 33%;
}

.image-keywords tbody tr:nth-child(odd) {
    background: #e0e0e0;
}

.image-keywords td {
    font-size: 13px; text-align: left; padding: 4px 4px 4px 0;
}

.add-button {
    background: #D0E0FF; margin: 5px 0; padding: 6px; border-radius: 4px; color: #003366;
    font-weight: bold; font-size: 13px; float: left;
}

.big-button {
    background: #D0E0FF; margin: 10px 0 10px 16px; padding: 8px; border-radius: 4px; color: #003366;
    font-weight: bold; font-size: 15px; width: 214px; text-align: center; float: left;
}

.big-button:first-child {
    margin-left: 0;
}

.highlight {
    background: #ffff80;
}

/* STYLES SPECIFIQUES A fragment-edit */

.head-button {
    font-weight: bold; float: right; margin: 8px 0 0 2px; font-size: 20px;
}

a.clear-fragment {
    color: #800000;
}