Add files via upload

index_files/remodal-default-theme.css

+.remodal-bg.remodal-is-opened,.remodal-bg.remodal-is-opening{-webkit-filter:blur(3px);filter:blur(3px)}.remodal-overlay{background:rgba(43,46,56,.9)}.remodal-overlay.remodal-is-closing,.remodal-overlay.remodal-is-opening{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.remodal-overlay.remodal-is-opening{-webkit-animation-name:remodal-overlay-opening-keyframes;animation-name:remodal-overlay-opening-keyframes}.remodal-overlay.remodal-is-closing{-webkit-animation-name:remodal-overlay-closing-keyframes;animation-name:remodal-overlay-closing-keyframes}.remodal-wrapper{padding:10px 10px 0}.remodal{box-sizing:border-box;width:100%;margin-bottom:10px;padding:35px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);color:#2b2e38;background:#fff}.remodal-close,.remodal-close:before{position:absolute;top:0;left:0;display:block;width:35px}.remodal-cancel,.remodal-close,.remodal-confirm{overflow:visible;margin:0;cursor:pointer;text-decoration:none;outline:0;border:0}.remodal.remodal-is-closing,.remodal.remodal-is-opening{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.remodal.remodal-is-opening{-webkit-animation-name:remodal-opening-keyframes;animation-name:remodal-opening-keyframes}.remodal.remodal-is-closing{-webkit-animation-name:remodal-closing-keyframes;animation-name:remodal-closing-keyframes}.remodal,.remodal-wrapper:after{vertical-align:middle}.remodal-close{height:35px;padding:0;-webkit-transition:color .2s;transition:color .2s;color:#95979c;background:0 0}.remodal-close:focus,.remodal-close:hover{color:#2b2e38}.remodal-close:before{font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif!important;font-size:25px;line-height:35px;content:"\00d7";text-align:center}.remodal-cancel,.remodal-confirm{font:inherit;display:inline-block;min-width:110px;padding:12px 0;-webkit-transition:background .2s;transition:background .2s;text-align:center;vertical-align:middle}.remodal-confirm{color:#fff;background:#81c784}.remodal-confirm:focus,.remodal-confirm:hover{background:#66bb6a}.remodal-cancel{color:#fff;background:#e57373}.remodal-cancel:focus,.remodal-cancel:hover{background:#ef5350}.remodal-cancel::-moz-focus-inner,.remodal-close::-moz-focus-inner,.remodal-confirm::-moz-focus-inner{padding:0;border:0}@-webkit-keyframes remodal-opening-keyframes{from{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes remodal-opening-keyframes{from{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes remodal-closing-keyframes{from{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}}@keyframes remodal-closing-keyframes{from{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}}@-webkit-keyframes remodal-overlay-opening-keyframes{from{opacity:0}to{opacity:1}}@keyframes remodal-overlay-opening-keyframes{from{opacity:0}to{opacity:1}}@-webkit-keyframes remodal-overlay-closing-keyframes{from{opacity:1}to{opacity:0}}@keyframes remodal-overlay-closing-keyframes{from{opacity:1}to{opacity:0}}@media only screen and (min-width:641px){.remodal{max-width:700px}}.lt-ie9 .remodal-overlay{background:#2b2e38}.lt-ie9 .remodal{width:700px}/*# sourceMappingURL=remodal-default-theme.min.css.map */
\ No newline at end of file

index_files/remodal.css

+/*
+ *  Remodal - v1.1.0
+ *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
+ *  http://vodkabears.github.io/remodal/
+ *
+ *  Made by Ilya Makarov
+ *  Under MIT License
+ */
+
+/* ==========================================================================
+   Remodal's necessary styles
+   ========================================================================== */
+
+/* Hide scroll bar */
+
+html.remodal-is-locked {
+  overflow: hidden;
+
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+/* Anti FOUC */
+
+.remodal,
+[data-remodal-id] {
+  display: none;
+}
+
+/* Necessary styles of the overlay */
+
+.remodal-overlay {
+  position: fixed;
+  z-index: 9999;
+  top: -5000px;
+  right: -5000px;
+  bottom: -5000px;
+  left: -5000px;
+
+  display: none;
+}
+
+/* Necessary styles of the wrapper */
+
+.remodal-wrapper {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: none;
+  overflow: auto;
+
+  text-align: center;
+
+  -webkit-overflow-scrolling: touch;
+}
+
+.remodal-wrapper:after {
+  display: inline-block;
+
+  height: 100%;
+  margin-left: -0.05em;
+
+  content: "";
+}
+
+/* Fix iPad, iPhone glitches */
+
+.remodal-overlay,
+.remodal-wrapper {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* Necessary styles of the modal dialog */
+
+.remodal {
+  position: relative;
+
+  outline: none;
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.remodal-is-initialized {
+  /* Disable Anti-FOUC */
+  display: inline-block;
+}

index_files/remodal.js

+/*
+ *  Remodal - v1.1.0
+ *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
+ *  http://vodkabears.github.io/remodal/
+ *
+ *  Made by Ilya Makarov
+ *  Under MIT License
+ */
+
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(a){if(w&&"none"===a.css("animation-name")&&"none"===a.css("-webkit-animation-name")&&"none"===a.css("-moz-animation-name")&&"none"===a.css("-o-animation-name")&&"none"===a.css("-ms-animation-name"))return 0;var b,c,d,e,f=a.css("animation-duration")||a.css("-webkit-animation-duration")||a.css("-moz-animation-duration")||a.css("-o-animation-duration")||a.css("-ms-animation-duration")||"0s",g=a.css("animation-delay")||a.css("-webkit-animation-delay")||a.css("-moz-animation-delay")||a.css("-o-animation-delay")||a.css("-ms-animation-delay")||"0s",h=a.css("animation-iteration-count")||a.css("-webkit-animation-iteration-count")||a.css("-moz-animation-iteration-count")||a.css("-o-animation-iteration-count")||a.css("-ms-animation-iteration-count")||"1";for(f=f.split(", "),g=g.split(", "),h=h.split(", "),e=0,c=f.length,b=Number.NEGATIVE_INFINITY;e<c;e++)d=parseFloat(f[e])*parseInt(h[e],10)+parseFloat(g[e]),d>b&&(b=d);return b}function d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){if(!x){var a,c,e=b("html"),f=k("is-locked");e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}}function f(){if(!x){var a,c,e=b("html"),f=k("is-locked");e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}}function g(a,b,c,d){var e=k("is",b),f=[k("is",u.CLOSING),k("is",u.OPENING),k("is",u.CLOSED),k("is",u.OPENED)].join(" ");a.$bg.removeClass(f).addClass(e),a.$overlay.removeClass(f).addClass(e),a.$wrapper.removeClass(f).addClass(e),a.$modal.removeClass(f).addClass(e),a.state=b,!c&&a.$modal.trigger({type:b,reason:d},[{reason:d}])}function h(a,d,e){var f=0,g=function(a){a.target===this&&f++},h=function(a){a.target===this&&0===--f&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].off(r+" "+s)}),d())};b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].on(r,g).on(s,h)}),a(),0===c(e.$bg)&&0===c(e.$overlay)&&0===c(e.$wrapper)&&0===c(e.$modal)&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].off(r+" "+s)}),d())}function i(a){a.state!==u.CLOSED&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(b,c){a[c].off(r+" "+s)}),a.$bg.removeClass(a.settings.modifier),a.$overlay.removeClass(a.settings.modifier).hide(),a.$wrapper.hide(),f(),g(a,u.CLOSED,!0))}function j(a){var b,c,d,e,f={};for(a=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,","),b=a.split(","),e=0,c=b.length;e<c;e++)b[e]=b[e].split(":"),d=b[e][1],("string"==typeof d||d instanceof String)&&(d="true"===d||"false"!==d&&d),("string"==typeof d||d instanceof String)&&(d=isNaN(d)?d:+d),f[b[e][0]]=d;return f}function k(){for(var a=q,b=0;b<arguments.length;++b)a+="-"+arguments[b];return a}function l(){var a,c,d=location.hash.replace("#","");if(d){try{c=b('[data-remodal-id="'+d+'"]')}catch(e){}c&&c.length&&(a=b[p].lookup[c.data(p)],a&&a.settings.hashTracking&&a.open())}else n&&n.state===u.OPENED&&n.settings.hashTracking&&n.close()}function m(a,c){var d=b(document.body),e=d,f=this;f.settings=b.extend({},t,c),f.index=b[p].lookup.push(f)-1,f.state=u.CLOSED,f.$overlay=b("."+k("overlay")),null!==f.settings.appendTo&&f.settings.appendTo.length&&(e=b(f.settings.appendTo)),f.$overlay.length||(f.$overlay=b("<div>").addClass(k("overlay")+" "+k("is",u.CLOSED)).hide(),e.append(f.$overlay)),f.$bg=b("."+k("bg")).addClass(k("is",u.CLOSED)),f.$modal=a.addClass(q+" "+k("is-initialized")+" "+f.settings.modifier+" "+k("is",u.CLOSED)).attr("tabindex","-1"),f.$wrapper=b("<div>").addClass(k("wrapper")+" "+f.settings.modifier+" "+k("is",u.CLOSED)).hide().append(f.$modal),e.append(f.$wrapper),f.$wrapper.on("click."+q,'[data-remodal-action="close"]',function(a){a.preventDefault(),f.close()}),f.$wrapper.on("click."+q,'[data-remodal-action="cancel"]',function(a){a.preventDefault(),f.$modal.trigger(v.CANCELLATION),f.settings.closeOnCancel&&f.close(v.CANCELLATION)}),f.$wrapper.on("click."+q,'[data-remodal-action="confirm"]',function(a){a.preventDefault(),f.$modal.trigger(v.CONFIRMATION),f.settings.closeOnConfirm&&f.close(v.CONFIRMATION)}),f.$wrapper.on("click."+q,function(a){var c=b(a.target);c.hasClass(k("wrapper"))&&f.settings.closeOnOutsideClick&&f.close()})}var n,o,p="remodal",q=a.REMODAL_GLOBALS&&a.REMODAL_GLOBALS.NAMESPACE||p,r=b.map(["animationstart","webkitAnimationStart","MSAnimationStart","oAnimationStart"],function(a){return a+"."+q}).join(" "),s=b.map(["animationend","webkitAnimationEnd","MSAnimationEnd","oAnimationEnd"],function(a){return a+"."+q}).join(" "),t=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnOutsideClick:!0,modifier:"",appendTo:null},a.REMODAL_GLOBALS&&a.REMODAL_GLOBALS.DEFAULTS),u={CLOSING:"closing",CLOSED:"closed",OPENING:"opening",OPENED:"opened"},v={CONFIRMATION:"confirmation",CANCELLATION:"cancellation"},w=function(){var a=document.createElement("div").style;return void 0!==a.animationName||void 0!==a.WebkitAnimationName||void 0!==a.MozAnimationName||void 0!==a.msAnimationName||void 0!==a.OAnimationName}(),x=/iPad|iPhone|iPod/.test(navigator.platform);m.prototype.open=function(){var a,c=this;c.state!==u.OPENING&&c.state!==u.CLOSING&&(a=c.$modal.attr("data-remodal-id"),a&&c.settings.hashTracking&&(o=b(window).scrollTop(),location.hash=a),n&&n!==c&&i(n),n=c,e(),c.$bg.addClass(c.settings.modifier),c.$overlay.addClass(c.settings.modifier).show(),c.$wrapper.show().scrollTop(0),c.$modal.focus(),h(function(){g(c,u.OPENING)},function(){g(c,u.OPENED)},c))},m.prototype.close=function(a){var c=this;c.state!==u.OPENING&&c.state!==u.CLOSING&&(c.settings.hashTracking&&c.$modal.attr("data-remodal-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(o)),h(function(){g(c,u.CLOSING,!1,a)},function(){c.$bg.removeClass(c.settings.modifier),c.$overlay.removeClass(c.settings.modifier).hide(),c.$wrapper.hide(),f(),g(c,u.CLOSED,!1,a)},c))},m.prototype.getState=function(){return this.state},m.prototype.destroy=function(){var a,c=b[p].lookup;i(this),this.$wrapper.remove(),delete c[this.index],a=b.grep(c,function(a){return!!a}).length,0===a&&(this.$overlay.remove(),this.$bg.removeClass(k("is",u.CLOSING)+" "+k("is",u.OPENING)+" "+k("is",u.CLOSED)+" "+k("is",u.OPENED)))},b[p]={lookup:[]},b.fn[p]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(p)?(c=new m(d,a),d.data(p,c.index),c.settings.hashTracking&&d.attr("data-remodal-id")===location.hash.substr(1)&&c.open()):c=b[p].lookup[d.data(p)]}),c},b(document).ready(function(){b(document).on("click","[data-remodal-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-remodal-target"),e=b('[data-remodal-id="'+d+'"]');b[p].lookup[e.data(p)].open()}),b(document).find("."+q).each(function(a,c){var d=b(c),e=d.data("remodal-options");e?("string"==typeof e||e instanceof String)&&(e=j(e)):e={},d[p](e)}),b(document).on("keydown."+q,function(a){n&&n.settings.closeOnEscape&&n.state===u.OPENED&&27===a.keyCode&&n.close()}),b(window).on("hashchange."+q,l)})});
\ No newline at end of file

index_files/script.js

+// First, checks if it isn't implemented yet.
+if (!String.prototype.format) {
+  String.prototype.format = function() {
+    var args = arguments;
+    return this.replace(/{(\d+)}/g, function(match, number) { 
+      return typeof args[number] != 'undefined'
+        ? args[number]
+        : match
+      ;
+    });
+  };
+}
+
+
+jQuery(document).ready(function($) {
+    $(".left-label").attr('contenteditable', 'true');
+    $(".label-value").attr('contenteditable', 'true');
+    $(".info-title").attr('contenteditable', 'true');
+    $("h3").attr('contenteditable', 'true');
+    $("p").attr('contenteditable', 'true');
+    $(".right-paragraph p").attr('contenteditable', 'true');
+    $("#username").attr('contenteditable', 'true');
+    $("#persona-tag").attr('contenteditable', 'true');
+    $(".info-unit ul li").append('<span class="item-remove"><i class="iconfont icon-delete"></i></span>');
+    
+    $(".info-unit").filter(function(index) {
+        return ($(this).children('ul').length);
+    }).children("h2").append('<span class="item-add"><i class="iconfont icon-playlistadd"></i></span>');
+
+    $(".info-unit h2").append('<span class="unit-remove"><i class="iconfont icon-delete"></i></span>');
+    
+
+    var portrait_modal = $('[data-remodal-id=portrait-modal]').remodal();
+    $(".portrait").click(function(event) {
+        portrait_modal.open();
+    });
+    $('[data-remodal-id=portrait-modal] button').click(function(event) {
+        $(".portrait").css('background-image', 'url("{0}")'.format($("#avatar-url").val()));
+    });
+    var weixin_modal = $('[data-remodal-id=weixin-modal]').remodal();
+    $(".weixin").click(function(event) {
+        weixin_modal.open();
+    });
+    $('[data-remodal-id=weixin-modal] button').click(function(event) {
+        $(".weixin img").attr('src', $("#weixin-url").val());
+    });
+
+    $('.info-header').hover(function() {
+        /* Stuff to do when the mouse enters the element */
+        $(this).children('.unit-remove').css('visibility', 'visible');
+        $(this).children('.item-add').css('visibility', 'visible');
+
+    }, function() {
+        /* Stuff to do when the mouse leaves the element */
+        $(this).children('.unit-remove').css('visibility', 'hidden');
+        $(this).children('.item-add').css('visibility', 'hidden');
+    });
+
+    $('.info-unit ul li').hover(function() {
+        /* Stuff to do when the mouse enters the element */
+        $(this).children('.item-remove').css('visibility', 'visible');
+
+    }, function() {
+        /* Stuff to do when the mouse leaves the element */
+        $(this).children('.item-remove').css('visibility', 'hidden');
+    });
+
+    $('.unit-remove').click(function(event) {
+        $(this).closest(".info-unit").remove();
+    });
+
+    $('.item-remove').click(function(event) {
+        $(this).closest("li").remove();
+    });
+
+    $('.item-add').click(function(event) {
+        var unit = $(this).closest(".info-unit");
+        if (unit.children('ul')){
+            var list = unit.children('ul');
+            var clone = list.children('li:first-child').clone(true);
+            list.append(clone);
+        }
+
+    });
+    $("progress").click(function(event) {
+        $(this).attr("value", event.offsetX/$(this).width()/0.8 * $(this).attr("max"));
+    });
+    // $("*").removeAttr('contenteditable');
+
+});
\ No newline at end of file

index_files/style.css

+@font-face {font-family: 'iconfont';
+    src: url('../fonts/iconfont.eot'); /* IE9*/
+    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
+    url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+    url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+
+.icon-work:before { content: "\eac9"; }
+.icon-project:before { content: "\eaf4"; }
+.icon-phone:before { content: "\ec7a"; }
+.icon-stars:before { content: "\ed32"; }
+.icon-star:before { content: "\ed1d"; }
+.icon-person:before { content: "\ec88"; }
+.icon-librarybooks:before { content: "\ebf9"; }
+.icon-education:before { content: "\ebca"; }
+.icon-create:before { content: "\eaf8"; }
+.icon-call:before { content: "\eab6"; }
+.icon-weixin:before { content: "\3488"; }
+.icon-build:before { content: "\eaa2"; }
+.icon-edit:before { content: "\eb31"; }
+.icon-flower:before { content: "\ec0a"; }
+.icon-playlistadd:before { content: "\ecae"; }
+.icon-delete:before { content: "\e61b"; }
+.icon-trophy:before { content: "\e80b"; }
+
+span {
+    display: inline-block;
+}
+
+.label-value{
+    width: 200px;
+    vertical-align: top;
+}
+
+.iconfont {
+    font-family:"iconfont" !important;
+    font-size:1.1em;font-style:normal;
+    color:inherit;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0; 
+}
+
+h1, h2, h3, h4, h5 {
+    font-weight: 500;
+    color: #607d8b;
+    line-height: 1.5;
+}
+
+.progress-list div {
+    width: 100%;
+    margin-left: 200px;
+}
+
+.info-list, .progress-list{
+    list-style: none;
+    padding-left: 0px;
+    font-size: 16px;
+    line-height: 2;
+}
+
+.stack-list {
+    list-style: none;
+    padding-left: 0px;
+    line-height: 1.5;
+}
+
+.stack-list li {
+    margin-bottom: 12px;
+}
+
+.right-list li {
+    margin-bottom: 12px;
+}
+
+
+hr {
+    margin-bottom: 8px;
+}
+
+.info-unit {
+    color: #666;
+    margin-bottom: 20px;
+}
+
+.remodal-img h3 {
+    float: left;
+    margin-bottom: 10px;
+}
+
+.remodal-img input {
+    float: left;
+    width: 480px;
+    height: 42px;
+    font-size: 20px;
+    padding: 6px;
+    color: #666;
+    
+}
+
+.remodal-img button {
+    float: right;
+    background: #607d8b;
+
+}
+
+.remodal-img button:hover{
+    float: right;
+    background: #607d8b;
+
+}
+
+
+body {
+    background-color: lightslategray;
+    font-family: sans-serif, Microsoft Yahei, Helvetica Neue;
+    zoom: 80%;
+}
+
+footer {
+}
+
+p {
+    line-height: 1.5;
+}
+
+progress {
+    background-color: #f6f6f6;
+    display: inline;
+    /*width: 195px;*/
+    height: 1em;
+
+}
+
+progress::-webkit-progress-bar {
+    background-color: #e0eaf0;
+}
+
+progress::-webkit-progress-value {
+    background-color: #708d9b;
+}
+
+progress::-moz-progress-bar {
+    background-color: #e0eaf0;
+
+}
+
+progress::-moz-progress-value {
+    background-color: #708d9b;
+}
+
+.progress-list {
+    line-height: 2;
+}
+
+
+
+.me {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.weixin{
+    margin-top: 20px;
+    background-color: #e0eaf0;   
+    position: relative;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    text-align: center;
+}
+
+.weixin img{
+    width: 200px;
+}
+
+.left-label {
+    display: inline-block;
+    width: 120px;
+}
+
+.portrait {
+    margin: 0 auto;
+    margin-top:20px;
+    margin-bottom: 10px;
+    background-image:url('https://avatars0.githubusercontent.com/u/21081491?v=3&s=460');
+    background-size: 120%;
+    background-position:center;
+    border-radius:50%;
+    border:5px solid #607d8b;
+    width:160px;
+    height:160px;
+}
+
+
+.container {
+    position: relative;
+    margin: 0 auto;
+
+    width: 1050px;
+    height: 1550px;
+    background-color: white;
+
+}
+
+.side {
+    position: absolute;
+    width: 360px;
+    height: 100%;
+    background-color: whitesmoke;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.main {
+    
+    position: relative;;
+    margin-left: 360px;
+    min-height: 100%;
+    padding: 20px;
+
+}
+
+.info-header:hover {
+    background-color: #d4dee4;
+}
+
+.info-unit ul li:hover {
+    background-color: #d4dee4;
+}
+
+.info-header .unit-remove {
+    float: right;
+    margin-left: 20px;
+    visibility: hidden;
+    cursor: pointer;
+
+}
+
+.info-header .item-add {
+    float: right;
+    margin-left: 20px;
+    margin-right: 2px;
+    visibility: hidden;
+    cursor: pointer;
+    
+}
+
+ .item-remove {
+    position: absolute;
+    right: 2px;
+    margin-right: 2px;
+    visibility: hidden;
+    cursor: pointer;
+    
+}
+
+ul li{
+    position: relative;
+}
+
+ .experience-list .item-remove {
+    position: absolute;
+    right: 2px;
+    top: 0px;
+    margin-right: 2px;
+    visibility: hidden;
+    cursor: pointer;
+    
+}
+
+ .stack-list .item-remove {
+    position: absolute;
+    right: 2px;
+    top: 0px;
+    margin-right: 2px;
+    visibility: hidden;
+    cursor: pointer;
+    
+}
+
+