Character Sheet CSS

* { box-sizing: border-box; } .sheet-rolltemplate-dscreen .sheet-in{ position: relative; padding: 7px; color: rgba(255,255,255,.57); border: 10px solid transparent; border-image-source: url(<a href="http://i166.photobucket.com/albums/u108/Ninty_07/border2.png" rel="nofollow">http://i166.photobucket.com/albums/u108/Ninty_07/border2.png</a>); border-image-slice: 9; /*background: url(<a href="http://i166.photobucket.com/albums/u108/Ninty_07/border2.png" rel="nofollow">http://i166.photobucket.com/albums/u108/Ninty_07/border2.png</a>) top left; background-size: 100% 100%;*/ background: url(<a href="https://s-media-cache-ak0.pinimg.com/originals/2c/e2/e0/2ce2e0d8e2eeb0f8bfedf5503a346d4f.gif" rel="nofollow">https://s-media-cache-ak0.pinimg.com/originals/2c/e2/e0/2ce2e0d8e2eeb0f8bfedf5503a346d4f.gif</a>); background-size: 100% 100%; /*228px 143px; */ background-repeat: no-repeat; box-shadow: 4px 10px silver; overflow: hidden; min-height: 200px; height:100%; width: 530px; } .sheet-rolltemplate-dscreen h1{ font-size:16px; color: Bisque; } .sheet-rolltemplate-msg .sheet-circle{ float:left; width:20px; height: 20px; background: red; border-radius: 10px; } .sheet-rolltemplate-msg .sheet-charname{ clear:both; font-family: 'Impact' 'Arial Black' 'Arial'; font-size:20px; color: White; text-indent:20px; padding: 0px; width: 240px; height: 80px; overflow: hidden; background: silver; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(silver, black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(silver, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(silver, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(7deg, DarkOrange 10%,rgba(0,0,0,.9) 100%); /*linear-gradient(to top right, silver, black); Standard syntax */ box-shadow: 10px 10px silver; transform: rotate(-2deg); transition-property: height; transition-timing-function: cubic-bezier(1,1,1,1); transition-duration:1s; transition-delay:0s; } .sheet-rolltemplate-msg .sheet-charname:hover{ min-height: 200px; height:100%; } .sheet-rolltemplate-msg .sheet-bubble{ font-family: 'Futura'; font-size: 14px; color: black; margin: 10px 25px; width: 200px; min-height: 80px; height: 85%; background: gold; background: linear-gradient(7deg, rgba(254,252,234,.1) 0%,rgba(241,218,54,1) 100%); border-radius: 14px; padding: 2px 5px; transform: rotate(-4deg); box-shadow: 10px 10px; text-overflow: ellipsis; } .sheet-rolltemplate-msg .sheet-bubble:before{ content:""; position: absolute; right: 100%; top: 20px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 26px solid rgba(241,218,54,1); /* linear-gradient(7deg, rgba(254,252,234,.1) 0%,rgba(241,218,54,1) 100%);*/ /*solid gold*/ border-bottom: 13px solid transparent; } .charsheet { background-color: #bdd2f7; background: linear-gradient(75deg, rgba(254,252,234,.1) 25%,rgba(44, 80, 84, 0.95) 90%); font-size: 10px; /*mostly labels. Does not handle inputs.*/ } .charsheet .sheet-headertitle{ font-family: Buda, Rockwell, Fantacy; font-family: "Lucida Console", Monaco, monospace; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size:48px; color:gold; text-align: center; } .charsheet .sheet-headertitle:hover{ font-family: Buda, Rockwell, Fantacy; font-family: "Lucida Console", Monaco, monospace; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size:52px; color:gold; text-align: center; } .charsheet .sheet-galaxy{ position: absolute; right: 0; top: 15px; z-index:1; height:100px; width:100px; border-radius: 50px; animation-name: kingdoms, king2; animation-duration: 4s, 7s; animation-iteration-count: infinate; animation-direction: reverse; } @keyframes kingdoms { 100% { border-radius: 20px;} /* 0% {transform: rotate(360deg)}; 25% {transform: rotate(90deg)}; 50% {transform: rotate(90deg)}; 75% {transform: rotate(90deg)}; 100% {transform: rotate(90deg)}; */ } @keyframes king2 { 100% { border-radius: 30px; } /* 0% {transform: rotate(360deg)}; 25% {transform: rotate(90deg)}; 50% {transform: rotate(90deg)}; 75% {transform: rotate(90deg)}; 100% {transform: rotate(90deg)}; */ } .charsheet .sheet-coatofarms { animation-name: coat1, coat2; animation-delay: 1s, 2s; animation-duration: 4s, 7s; animation-iteration-count:2; } @keyframes coat1 { /* 100% {height: 120px; width: 100px; transform: rotateY(360deg);}*/ 100% {transform: rotateY(360deg);} } @keyframes coat2 { 100% {transform: rotateY(-720deg);} } .charsheet table{ border-collapse:separate; border-spacing:10px; } .charsheet textarea{ resize:vertical; } .charsheet .sheet-section{ border-top: 5px solid #505050; padding-top:10px; padding-bottom:10px; display:none; } .charsheet .sheet-vehiclesection{ border-top: 10px solid #dd1111; padding-top:20px; padding-bottom:10px; display:none; background-color: #828fa5; } input.sheet-character:checked ~ div.sheet-section { display:inline; } input.sheet-vehicle:checked ~ div.sheet-vehiclesection { display:inline; } .charsheet input { font-size:9px; } .charsheet button { background-color: #4CAF50 !important; /* Green */ border: none; padding: 8px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; color: Bisque !important; /* color: Navy;*/ border-radius:70%; font-size:8px; background: url(<a href="https://mir-s3-cdn-cf.behance.net/project_modules/disp/4e56c419367077.562d98d173698.gif" rel="nofollow">https://mir-s3-cdn-cf.behance.net/project_modules/disp/4e56c419367077.562d98d173698.gif</a>); background-size:50%; /*228px 143px; */ background-repeat: no-repeat; } .charsheet button:hover { background-color: #4CAF50 !important; /* Green */ border: double; padding: 8px; text-align: center; text-decoration: bold; display: inline-block; margin: 8px 4px; cursor: pointer; color: Bisque !important; /* color: Navy;*/ border-radius:70%; font-size:16px; background: url(<a href="https://mir-s3-cdn-cf.behance.net/project_modules/disp/4e56c419367077.562d98d173698.gif" rel="nofollow">https://mir-s3-cdn-cf.behance.net/project_modules/disp/4e56c419367077.562d98d173698.gif</a>); background-size:100%; /*228px 143px; */ background-repeat: no-repeat; } .charsheet input[type=number].sheet-smallnumber{ width:40px; } .charsheet input[type=text].sheet-smalltext{ width:60px; height: 18px; margin:0px; } .charsheet input[type=text].sheet-shorttext{ padding-top:2px; padding-bottom:2px; } .charsheet input[type=text].sheet-skilltext{ width:200px; padding:2px; margin-left:3px; } .charsheet .sheet-right{ float:right; } .charsheet .sheet-bold{ /* font-size: 11pt;*/ margin-bottom: 10px; } .charsheet .sheet-border{ border: 2px solid white; vertical-align:top; width:100%; padding: 2px; margin: 2px; } .charsheet input[type=number].sheet-smallshortnumber{ font-size: 8pt width:10px; padding-top:1px; padding-bottom:1px; display: inline-block; float:right; } .charsheet input[type=number].sheet-shortnumber{ padding-top:2px; padding-bottom:2px; } .charsheet label.sheet-areaLabel{ margin:5px; }