@import url(reset.css);
@import url(my.vex.css);
body { font-family: sans-serif; padding: 0; margin: 0; }
img { border: none; margin: 0; }
h1, h2 { text-align: center; margin: .5em; }
h1 { font-weight: bold; font-size: 2em; }
h2 { font-size: 1.2em; }
table { width: 100%; margin: 1em auto; min-width: 520px; max-width: 800px;}
td { text-align: center; }
h1, h2 { text-align: center; }
tr.i td { height: 280px; }
tr.i td a { display: block; width: 256px; text-align: center; margin: 0 auto; padding: 0; }
tr.i td a img { width: 220px; height: 220px; }
tr.i td a:hover img { width: 256px; height: 256px; }
tr.i img { transition: all .5s; }
#footer { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%;  background-color : #eee; border-top: solid 1px #ccc; padding: 2px 0; }
#footer p { margin: 4px; padding: 0; text-align: center; font-size: 12px; }
a[onclick], acronym[onclick] { text-decoration: underline; cursor: pointer; }
acronym[onmouseover] {  text-decoration: underline; }
#footer acronym { font-weight: bold; }
#footer acronym:hover { color: #00c; }
.abouttemplate { overflow: auto; }
.abouttemplate p { padding: 0; margin: 6px 0; font-size: 13px; line-height: 14px; font-family: font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; }
#preview { bottom: 80px; box-shadow: 0 0 12px #666; display: block; left: 10%; margin: 0 auto; opacity: .5; padding: 0; position: absolute; right: 10%; top: 440px; }
#preview h1 { background-color : #333; color: #fff; font-size: 12px; margin: 0; padding: 2px 8px; text-align: left; font-weight: normal; }

/* vex */
body .vex .vex-content { box-shadow: 0 0 12px 0 #666; }
body .vex .vex-content.largeForm, body .vex .vex-content.width800 { width: 800px; }
body .vex .vex-content.width600 { width: 600px; }
body .vex .vex-content.width700 { width: 600px; }
body .vex .vex-content.widthmax { width: 90%; }