Updating DNP

Update to changes as of 6b32916b32

Exalted2e/exalted2e.css

@@ -1,37 +1,106 @@
-.charsheet label {
-    display: inline-block;
-width: 75px;
-text-align: right;
+.charsheet
+{
+    background-color: White;
 }
 
-.charsheet input {
-display: inline-block;
-width: 165px;
-}
-
-.sheet-col strong.sheet-dee {
-font-size: 1.4em;
-font-weight: bold;
-padding-right: 4px;
-}
-
-.charsheet input.sheet-short {
-width: 3.5em;
-}
-
-.charsheet {
-background-color: White;
-}
-
-.charsheet table td, .charsheet table th {
-    font-size: 1.2em;
-    font-weight: bold;
+.sheet-center,
+h3.sheet-ability
+{
     text-align: center;
 }
 
-select.sheet-dtype {
-    width: 60px;
-    vertical-align: top;
+h1.sheet-separator
+{
+    width: 100%;
+    text-align: center;
+    background-image: url('http://i.imgur.com/TwZ84rO.jpg');
+    background-repeat: repeat-x;
+    background-size: auto 10px;
+    background-position: left 50%;
+}
+
+h1.sheet-separator span
+{
+    background: white;
+    padding: 0 5px 0 5px;
+}
+
+img.sheet-banner
+{
+    max-height: 100px;
+}
+
+span.sheet-attribute,
+span.sheet-ability
+{
+    display: inline-block;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+span.sheet-attribute + div,
+span.sheet-ability + div
+{
+    display: inline-block;
+}
+
+div.sheet-attribute div,
+div.sheet-ability div
+{
+    float: right;
+}
+
+div.sheet-attribute,
+div.sheet-ability
+{
+    clear: right;
+}
+
+/* Align labels and input boxes */
+label
+{
+    display: -webkit-flex;
+    display: flex;
+}
+
+label input[type="text"],
+label select
+{
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+label span
+{
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
+    margin-right: 20px;
+}
+
+div.sheet-ability input[type="text"]
+{
+    max-width: 170px;
+}
+
+/* Style boxes */
+label input[type="text"],
+label select,
+div.sheet-ability input[type="text"]
+{
+    border: 0px;
+    background: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-radius: 0px;
+    
+    border-bottom: 1px solid #000;
+}
+
+label input[type="text"]:focus,
+div.sheet-ability input[type="text"]:focus
+{
+    box-shadow: rgba(83, 167, 235, 0.466667) 0px 0px 6px 0px;
 }
 
 /* Hide actual dot/checkbox */
@@ -39,7 +108,12 @@ input[type="radio"],
 input[type="checkbox"]
 {
     opacity: 0;
-    position: absolute;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 5px;
+    left: 6px;
+    margin: -10px;
     cursor: pointer;
     z-index: 1;
 }
@@ -58,7 +132,7 @@ input[type="checkbox"] + span::before
     -moz-box-shadow: 0 0 2px #ccc;
     -webkit-box-shadow: 0 0 2px #ccc;
     box-shadow: 0 0 2px #ccc;
-     
+    
     background: #f6f6f6;
     background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
     background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
@@ -84,7 +158,6 @@ input[type="radio"] + span::before
 input[type="checkbox"] + span::before
 {
     content: "";
-    opacity: 0.3;
     width: 14px;
     height: 14px;
     font-size: 12px;
@@ -94,8 +167,35 @@ input[type="checkbox"] + span::before
     border-radius: 3px;
 }
 
+div.sheet-ability input[type="checkbox"]:first-child + span::before
+{
+    opacity: 1;
+}
+
+div.sheet-dots input[type="checkbox"]:first-child + span::before
+{
+    opacity: 0.3;
+}
+
 /* Styles unique to fake checkbox (checked) */
-input[type="checkbox"]:checked + span::before
+div.sheet-ability input[type="checkbox"]:first-child:checked + span::before
+{
+    content: "✓";
+    color: #bea000;
+    
+    -moz-box-shadow: 0 0 2px #ccc;
+    -webkit-box-shadow: 0 0 2px #ccc;
+    box-shadow: 0 0 2px #ccc;
+    
+    background: #f6f6f6;
+    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
+    background: radial-gradient(#f6f6f6, #dfdfdf);
+}
+
+div.sheet-dots input[type="checkbox"]:first-child:checked + span::before
 {
     border: solid 1px transparent;
     background: transparent;
@@ -107,7 +207,8 @@ input[type="checkbox"]:checked + span::before
     box-shadow: 0 0 2px transparent;
 }
 
-input[type="checkbox"]:hover:checked + span::before
+div.sheet-dots input[type="checkbox"]:first-child:hover:checked + span::before,
+div.sheet-ability input[type="checkbox"]:first-child + span::before
 {
     -moz-box-shadow: 0 0 2px #ccc;
     -webkit-box-shadow: 0 0 2px #ccc;
@@ -124,20 +225,20 @@ input[type="radio"]:checked ~ input[type="radio"] + span::before
 }
 
 /* Show checkbox when hovering or when it's checked */
-input[type="checkbox"]:hover + span::before,
-input[type="checkbox"]:checked + span::before
+div.sheet-dots input[type="checkbox"]:first-child:hover + span::before,
+div.sheet-dots input[type="checkbox"]:first-child:checked + span::before
 {
     opacity: 1;
 }
 
 /* Fade out dots when checkbox is checked */
-input[type="checkbox"]:checked ~ input[type="radio"] + span
+div.sheet-dots input[type="checkbox"]:checked ~ input[type="radio"] + span
 {
     opacity: 0.5;
 }
 
 /* Hide checked dots when checkbox is checked */
-input[type="checkbox"]:checked ~ input[type="radio"] + span::before
+div.sheet-dots input[type="checkbox"]:checked ~ input[type="radio"] + span::before
 {
     content: "";
-}
+}