<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Musaib/pen/xOGROY?depth=everything&order=popularity&page=41&q=editable&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css'><link rel='stylesheet prefetch' href='https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
/* Categories -----------
1. Common
2. Header
3. Footer
4. Bio page
5. Media queries
6. Overrides
*/
/* 1. Common */
body {
background: url('https://i.imgsafe.org/8688e8347f.gif') repeat #e4e4e4;
font-family: 'Source Sans Pro', sans-serif;
}
html,
body {
height: 100%;
overflow: hidden;
min-width: 0;
}
.va-wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.shadow {
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
#page {
margin: 15px 0;
}
#page .va-wrap {
background-color: #f2f2f2;
}
header,
footer {
background-color: #333333;
padding: 10px 0;
color: #fff;
}
.left-border-gap {
margin-left: 15px;
border-left: 1px solid #5B5B5B;
padding-left: 15px;
}
.right-border-gap {
margin-right: 18px;
border-right: 1px solid #5B5B5B;
padding-right: 18px;
}
header a,
footer a {
text-decoration: none;
color: #fff;
}
header a:hover,
footer a:hover {
text-decoration: underline;
color: #fff;
}
/* EndOf Common */
/* Header */
.logo {
display: block;
height: 40px;
}
.header-elem-l1 {
margin: 0;
}
.header-elem-l1 li {
padding-top: 5px;
padding-bottom: 5px;
line-height: 1;
}
.header-elem-l2 {
padding: 8px 0;
}
.header-elem-l2 > li {
float: left;
margin-left: 18px;
line-height: 1;
text-transform: uppercase;
position: relative;
}
.header-elem-l2 > li a {
position: relative;
display: inline-block;
}
.header-elem-l2 > li a:focus {
outline: none;
color: #fff;
text-decoration: none;
}
.import {
padding-right: 28px;
}
.add {
padding-right: 24px;
}
.edit {
padding-right: 24px;
}
.logout {
padding-right: 27px;
}
.logout .fa-sign-out {
font-size: 22px;
top: -3px;
}
.fa.fa-1-5x {
font-size: 20px;
}
.header-elem-l2 li:first-child {
margin-left: 0;
}
.greeting-user {
position: relative;
padding-bottom: 13px;
padding-top: 13px;
text-transform: uppercase;
}
.greeting-user p {
margin: 0;
}
.header-elem-l2 p {
margin: 0;
}
.header-elem-l2 a * {
-webkit-transition: .2s ease all;
transition: .2s ease all;
}
.header-elem-l2 a:hover {
text-decoration: none;
}
.header-elem-l2 a:hover * {
color: #fff;
}
.small-title {
color: #757575;
font-size: 11px;
}
.header-elem-l3 {
display: none;
position: absolute;
right: 0;
top: 24px;
width: 120px;
-webkit-box-shadow: 0 3px 10px #C6C6C6;
box-shadow: 0 3px 10px #C6C6C6;
z-index: 5;
}
.header-elem-l3 li {
margin: 0;
padding: 0;
}
.header-elem-l3 li a {
color: #e54b49;
background-color: #fff;
border-bottom: 1px solid #dddddd;
padding: 10px 12px;
line-height: 1;
display: block;
font-size: 11px;
letter-spacing: .25px;
-webkit-transition: .2s ease all;
transition: .2s ease all;
}
.header-elem-l3 li a:hover,
.header-elem-l3 li a:focus {
background-color: #e54b49;
color: #fff;
}
.abs {
position: absolute;
}
.right0 {
right: 0;
}
.icon-abs {
position: absolute;
top: -3px;
right: 0;
font-size: 20px;
}
.edit.edit-mode-on,
.edit.edit-mode-on .small-title {
color: #F8FE90;
}
.header-elem-l2 > li a.edit-mode-on:focus,
.header-elem-l2 > li a.edit-mode-on:hover,
.header-elem-l2 > li a.edit-mode-on:hover * {
color: #F8FE90;
}
/* EndOf Header */
/* 3. Footer */
footer .va-wrap {
padding: 5px 0;
text-transform: uppercase;
}
footer a,
footer a:hover,
footer a:focus,
{
color: #fff;
}
/* End of footer */
/* 4. Bio page */
.details {
position: relative;
}
.pic-box {
position: relative;
width: 35.5%;
max-width: 425px;
height: 454px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.pic-details {
padding: 15px;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: url('https://i.imgsafe.org/dabb0786ef.png') no-repeat 0 0;
background-size: contain;
}
.pic-name {
font-size: 33px;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
}
.pic-title {
font-style: italic;
font-size: 14px;
color: #fff;
line-height: 1;
}
.about-box {
width: 64.5%;
max-width: 775px;
height: auto;
overflow: visible;
padding: 15px 15px 0;
position: relative;
}
.intro {
font-style: italic;
font-size: 15px;
overflow: auto;
}
.intro-text {
height: 64px;
}
.is-editable .intro {
padding: 0 10px;
}
.brief {
margin-top: 20px;
/* background-color: #80DEEA; */
}
.brief ul,
.brief .extra-info > * {
background-color: #fff;
}
.brief .do-edit ul,
.brief .do-edit .extra-info > * {
background-color: #feffef;
}
.important-dates {
width: 31%;
max-width: 227px;
position: relative;
}
.extra-info {
width: 67%;
max-width: 530px;
margin-left: 2.0%;
}
.without-research-check.extra-info .associated {
height: 104px;
padding: 10px;
}
.with-research-check.extra-info .associated {
padding: 5px 10px;
height: 68px;
}
.with-research-check > span {
display: inline-block;
padding: 10px 15px 0 10px;
}
.with-research-check input {
margin: 0;
}
.with-research-check .filled-in ~ label {
margin: 0;
line-height: 1.5;
color: #aaaaaa;
font-weight: normal;
font-style: italic;
font-size: 13px;
padding-left: 30px;
padding-right: 15px;
}
.date-list {
margin: 0;
}
.date-list .date {
position: relative;
padding: 6px;
border-top: 1px solid #f2f2f2;
}
.date-list .date:first-child {
border-top: none;
}
.date:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 6px;
left: 10px;
}
.date-active:before {
background: url('https://i.imgsafe.org/dabce211c6.png') no-repeat center center;
}
.date-birth:before {
background: url('https://i.imgsafe.org/dabda1ea52.png') no-repeat center center;
}
.date-death:before {
background: url('https://i.imgsafe.org/dabc6235b4.png') no-repeat center center;
}
.date-list .date-type {
width: 120px;
padding-left: 35px;
}
.date-type {
font-style: italic;
color: #aaaaaa;
display: inline-block;
font-size: 13px;
font-weight: normal;
padding: 0;
margin: 0;
}
.date-value {
font-style: normal;
color: #000;
font-size: 16px;
}
.research {
margin-top: 20px;
position: relative;
width: 64.5%;
padding: 0 15px;
}
.color-title {
color: #ef5350;
margin: 0 0 0 0;
}
.color-title > h3 {
font-size: 30px;
margin: 0;
line-height: 1;
}
.color-title > p {
font-size: 13px;
font-style: italic;
line-height: 1;
margin: 0;
margin-bottom: 7px;
}
.research-analysis-list {
margin: 0;
}
.research-analysis-list > li {
float: left;
background-color: #fff;
}
.research-col-list > li:hover {
background: rgba(254, 255, 239, .75);
}
.research-analysis-list .col1 {
width: 31.477%;
}
.research-analysis-list .col2 {
width: 40.325%;
}
.research-analysis-list .col3 {
width: 28.2%;
position: relative;
}
.research-analysis-list .col3 ul {
position: relative;
z-index: 1;
}
.research-col-list > li {
border: 0;
border-top: 1px solid #e5e5e5;
line-height: 1;
position: relative;
}
.research-col-list > li:last-child {
border-bottom: 1px solid #e5e5e5;
}
.asset-header {
width: 27.1%;
background-color: #ef5350;
color: #fff;
position: absolute;
right: 15px;
top: 10px;
padding: 10px 15px;
}
.key-type {
font-style: italic;
}
.value-type {
font-size: 22px;
line-height: 1;
font-style: italic;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
.research-col-list .key {
padding-left: 10px;
}
.research-col-list .key {
font-size: 13px;
font-style: italic;
display: inline-block;
line-height: 2.25;
color: #5E5E5E;
}
.research-col-list .value {
font-size: 20px;
display: inline-block;
line-height: 1;
position: absolute;
right: 10px;
top: 5px;
}
.col3 .research-col-list > li:last-child span {
line-height: 1;
}
.col3 .research-col-list > li:last-child span:first-child {
width: 65%;
padding: 6px 0 6px 10px;
line-height: 1.25;
}
.blurred-pic {
display: block;
padding: 15px 20px;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
background-size: contain;
top: 0;
left: 0;
background-repeat: no-repeat;
-webkit-transform: scale(2);
transform: scale(2);
background-position: center;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.highlighted-bg {
background-color: rgba(229, 76, 73, .1);
position: absolute;
width: 64px;
height: 100%;
right: 0;
top: 0;
}
.page-artist .pic-box {
background-size: contain;
background-position: center center;
background: url('https://i.imgsafe.org/00e58f0ec7.jpg') no-repeat;
}
.analytics {
padding: 15px;
}
.table-analytics {
background-color: #fff;
font-size: 13px;
line-height: 1.5;
color: #5E5E5E;
}
.table-analytics th {
font-style: italic;
font-weight: normal;
padding: 7px 0 0 10px;
}
.table-analytics th span {
padding-bottom: 5px;
border-bottom: 1px solid #AFAFAF;
display: inline-block;
width: 100%;
}
.table-analytics th:last-child {
padding-right: 10px;
}
.table-analytics td {
padding: 7px 0 7px 10px;
}
.table-analytics td:last-child {
padding-right: 10px;
}
.table-analytics tr {
border-bottom: 1px solid #e5e5e5;
}
.table-analytics tr:first-child,
.table-analytics tr:last-child {
border-bottom: none;
}
[contenteditable]:focus {
outline: none;
}
.edit-btn-list {
display: none;
position: absolute;
left: -40px;
top: 0;
z-index: 2;
margin: 0;
}
.is-editable .edit-btn-list {
display: block;
background: transparent;
}
.is-editable .do-edit {
position: relative;
overflow: visible;
}
.is-editable .date-list.do-edit {
padding: 0;
}
.edit-btn-list li {
margin-top: 0;
position: relative;
text-align: center;
}
.is-editable .edit-btn-list a {
background: #f8fe90;
color: #333;
font-style: normal;
padding: 7px;
height: auto;
line-height: 1;
font-size: 11px;
text-align: center;
float: right;
}
.edit-btn-list a:hover {
background-color: #F9FF97;
}
.edit-btn-list > li > a {
width: 40px;
text-align: center;
}
.edit-options {
position: absolute;
top: 0;
width: 40px;
display: inline-block;
top: 0;
z-index: 2;
left: 0px;
border-radius: 2px;
overflow: hidden;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.edit-options li {
float: left;
width: 50%;
margin: 0;
}
.edit-options li a {
float: none;
padding: 0;
width: 100%;
color: #fff;
font-weight: normal;
display: inline-block;
text-align: center;
padding: 7px 0 7px;
font-size: 11px;
}
.edit-options a.edit-n-save {
color: #22a84f;
}
.edit-options a.edit-n-cancel {
color: #c62828;
}
.research .edit-btn-list {
top: 50px;
left: -25px;
}
.is-editable .research-analysis-list.do-edit {
padding: 0;
}
.is-editable .research-analysis-list.do-edit > li {
background-color: transparent;
}
.is-editable .research-analysis-list,
.is-editable .date-list,
.is-editable .with-research-check > *,
.is-editable .intro {
background-color: #feffef;
}
body > .mCustomScrollBox > .mCSB_container {
width: 100% !important;
}
.export-analytics{
padding: 7px 30px 7px 10px;
color: #fff;
text-align: left;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
float: right;
font-size: 12px;
letter-spacing: 1px;
background: url('https://i.imgsafe.org/57b3a03ab1.gif') no-repeat 90% center #22a84f;
}
.export-analytics:hover,
.export-analytics:focus{
text-decoration: none;
color: #fff;
}
.analytics .color-title{
margin-bottom: 15px;
}
table.table-analytics label{
font-size: 12px;
font-weight: normal;
color: #5E5E5E;
padding: 0 0 0 28px;
margin: 0;
line-height: 1.75;
height: auto;
}
/* endOf Bio page */
/* Plugin scroller */
#content-2 {
height: 500px;
}
.mCSB_outside+.mCSB_scrollTools {
right: 0;
}
.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
bottom: 0;
}
.mCSB_scrollTools .mCSB_draggerRail {
background-color: transparent;
width: 10px;
border-radius: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 10px;
margin: 0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 10px;
background-color: rgba(0, 0, 0, .25);
border-radius: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
width: 100%;
height: 10px;
margin: 0 auto;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: rgba(0, 0, 0, .5);
}
.mCSB_scrollTools {
width: 10px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
height: 10px;
}
.body > .mCSB_scrollTools {
z-index: 2;
}
boy > .mCSB_outside+.mCSB_scrollTools {
z-index: 10;
}
/* EndOf Plugin scroller */
/* 5. Media queries */
@media screen and (max-width: 800px) {
.header-elem-l1 > li {
width: 100%;
text-align: center;
}
.logo-list {
display: inline-block;
}
.greeting-user .right0 {
left: 0;
text-align: left;
}
.right-border-gap {
border-right: none;
}
.header-elem-l2 > li > a {
padding: 15px 0 5px;
}
.header-elem-l2 > li a > span:first-child {
display: none;
}
.header-elem-l2 {
padding: 0;
}
.header-elem-l2 > li {
padding: 0;
}
.header-elem-l1 > li:last-child,
.right-border-gap ~ li {
float: right !important;
}
.header-elem-l1 li {
padding: 0;
}
.icon-abs {
position: relative;
top: initial;
right: initial;
}
li.left-border-gap {
padding-left: 15px;
}
.header-elem-l3 {
top: 40px;
}
.header-elem-l3 a {
text-align: left;
}
.pic,
.blurred-pic {
display: none;
}
.pic-details {
z-index: 0;
}
}
@media screen and (max-width: 1110px) {
.date .date-value {
padding-left: 35px;
line-height: 1;
display: block;
}
.date:before {
top: 14px;
}
}
@media screen and (min-width: 750px) and (max-width: 1110px) {
.pic-box {
position: relative;
width: 35.5%;
max-width: 425px;
height: 245px;
}
.pic {
width: auto;
height: 100%;
position: relative;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.with-research-check.extra-info .associated {
padding: 5px 10px;
height: 110px;
}
.research {
width: 100%;
}
.research .edit-btn-list {
top: 25px;
left: 140px;
}
.col3 .research-col-list > li:last-child span:first-child {
height: 59px;
}
}
@media screen and (max-width: 1200px) {
header .va-wrap,
footer .va-wrap {
padding: 0 15px;
}
}
@media screen and (max-width: 750px) {
.with-research-check.extra-info .associated {
padding: 5px 10px;
height: 110px;
}
.pic-box {
position: relative;
width: 100%;
max-width: initial;
height: auto;
background: #ccc;
}
.pic-details {
position: relative;
padding: 10px 15px 15px;
background: #e4e4e4;
}
.pic-title {
margin-bottom: 0;
color: #333;
}
.pic-name {
margin-left: -2px;
color: #333;
}
.about-box,
.research {
width: 100%;
}
.brief {
margin-top: 0;
}
.important-dates,
.extra-info,
.research-analysis-list .col1,
.research-analysis-list .col2,
.research-analysis-list .col3 {
width: 100%;
max-width: initial;
margin: 0;
margin-top: 20px;
}
.research-analysis-list .col1 {
margin-top: 0;
}
.research-analysis-list .col3 {
padding-top: 40px;
}
li.left-border-gap {
padding-left: 5px;
margin-left: 5px;
border: 0;
}
/* .header-elem-l1 > li {
text-align: left;
} */
.asset-header {
width: 100%;
top: 455px;
margin-left: -15px;
margin-right: -15px;
padding-left: 25px;
z-index: 2;
}
.value-type {
right: 25px;
}
.edit-btn-list {
left: inital;
top: -25px;
right: 0;
}
.research .edit-btn-list {
top: 25px;
right: 15px;
}
.edit-btn-list > li {
width: 100%;
height: 25px;
}
.edit-options {
left: initial;
right: 0;
}
}
@media screen and (max-width: 1000px) {
table.table-analytics {
overflow-x: auto;
min-width: 1000px;
}
}
/* EndOf Media queries */
/* 6. Overrides */
.va-wrap [type="checkbox"].filled-in:not(:checked)+label:after {
border: 2px solid #aaa;
}
.va-wrap [type="checkbox"].filled-in:checked+label:after {
border: 2px solid #e54c49;
background-color: #e54c49;
}</style></head><body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<!-- image links
Artist - https://i.imgsafe.org/00e58f0ec7.jpg
Events - https://i.imgsafe.org/00e5921d5e.jpg
Location - https://i.imgsafe.org/00e596a9f9.jpg
Shows - https://i.imgsafe.org/00e59bd049.jpg
Talent - https://i.imgsafe.org/00e5a9c9a4.jpg
-->
<body class="content">
<header>
<div class="va-wrap">
<ul class="list-unstyled clearfix header-elem-l1">
<li class="pull-left">
<ul class="list-unstyled clearfix logo-list">
<li class="pull-left">
<a href="javascript:;" class="logo">
<img src="https://i.imgsafe.org/874467e165.png" alt="" />
</a>
</li>
<li class="pull-left left-border-gap">
<a href="javascript:;" class="logo">
<img src="https://i.imgsafe.org/8744c513d3.gif" alt="" />
</a>
</li>
</ul>
</li>
<li class="pull-right">
<ul class="list-unstyled clearfix">
<li class="pull-left right-border-gap">
<div class="greeting-user">
<p><span class="greeting">Hello </span><span class="user">Alexandra</span></p>
<p class="text-right abs right0"><span class="small-title">Admin</span></p>
</div>
</li>
<li class="pull-left">
<ul class="list-unstyled clearfix header-elem-l2">
<!-- <li>
<a href="javascript:;" class="import">
<span class="small-title">Import</span>
<span class="fa fa-cloud-download icon-abs"></span>
</a>
</li> -->
<li id="addPage">
<a href="javascript:;" class="add">
<span class="small-title">Add page</span>
<span class="fa fa-plus-square icon-abs"></span>
</a>
<ul class="list-unstyled header-elem-l3">
<li><a href="javascript:;">Artist</a></li>
<li><a href="javascript:;">Shows</a></li>
<li><a href="javascript:;">Events</a></li>
<li><a href="javascript:;">Location</a></li>
<li><a href="javascript:;">Talent</a></li>
</ul>
</li>
<li>
<a href="javascript:;" class="edit">
<span class="small-title">Edit</span>
<span class="fa fa-pencil icon-abs"></span>
</a>
</li>
<li>
<a href="javascaript:;" class="logout">
<span class="small-title">Logout</span>
<span class="fa fa-sign-out icon-abs"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</header>
<section id="page" class="page-artist">
<div class="va-wrap shadow">
<section class="details clearfix">
<div class="pic-box pull-left">
<div class="pic-details">
<h2 class="pic-name">Beyoncé</h2>
<p class="pic-title">Biography</p>
</div>
<div class="pic" style="background-image: url('https://i.imgsafe.org/dab98d31ce.jpg')"></div>
<div class="blurred-pic" style="background-image: url('https://i.imgsafe.org/dab98d31ce.jpg')"></div>
</div>
<div class="about-box pull-left">
<div class="intro do-edit">
<ul class="list-unstyled clearfix edit-btn-list">
<li class="clearfix">
<a href="javascript:;" class="waves-effect waves-light btn va-btn-edit">Edit</a>
<ul class="list-unstyled clearfix edit-options" style="display: none;">
<li><a class="edit-n-save" href="javascript:;"><i class="fa fa-check"></i></a></li>
<li><a class="edit-n-cancel" href="javascript:;"><i class="fa fa-times"></i></a></li>
</ul>
</li>
</ul>
<div class="intro-text-wrap">
<div class="intro-text content" contenteditable="false">Beyoncé was born in Houston, Texa s. Her father, Mathew Knowles, manages Destiny's Child. Her mother, Tina Knowles (née Celestine Ann Beyincé), designs their glittering costumes. Solange Knowles, her sister (they're about 5 years apart), has released her debut album.</div>
</div>
</div>
<div class="brief do-edit clearfix">
<div class="important-dates pull-left">
<ul class="list-unstyled clearfix edit-btn-list">
<li class="clearfix">
<a href="javascript:;" class="waves-effect waves-light btn va-btn-edit">Edit</a>
<ul class="list-unstyled clearfix edit-options" style="display: none;">
<li><a class="edit-n-save" href="javascript:;"><i class="fa fa-check"></i></a></li>
<li><a class="edit-n-cancel" href="javascript:;"><i class="fa fa-times"></i></a></li>
</ul>
</li>
</ul>
<ul class="clearfix list-unstyled date-list do-edit">
<li class="date date-active">
<span class="date-type">Active Date</span>
<span class="date-value date-active-text" contenteditable="false">05/16/2016</span>
</li>
<li class="date date-birth">
<span class="date-type">Birth Date</span>
<span class="date-value date-birth-text" contenteditable="false">09/04/1981</span>
</li>
<li class="date date-death">
<span class="date-type">Death Date</span>
<span class="date-value date-death-text" contenteditable="false"> - </span>
</li>
</ul>
</div>
<div class="extra-info pull-left with-research-check do-edit">
<span>
<input type="checkbox" class="filled-in" id="researched" checked="checked" />
<label for="researched">Researched</label>
</span>
<div class="associated">
<p class="date-type">Also associated with</p>
<div class="date-value date-type-text" contenteditable="false">Destiny's Child</div>
</div>
</div>
</div>
</div>
<div class="research pull-right">
<div class="color-title">
<h3>Research</h3>
<p>Analysis</p>
</div>
<div class="asset-header">
<span class="key-type">Assets</span>
<span class="value-type">%</span>
</div>
<ul class="list-unstyled clearfix edit-btn-list">
<li class="clearfix">
<a href="javascript:;" class="waves-effect waves-light btn va-btn-edit">Edit</a>
<ul class="list-unstyled clearfix edit-options" style="display: none;">
<li><a class="edit-n-save" href="javascript:;"><i class="fa fa-check"></i></a></li>
<li><a class="edit-n-cancel" href="javascript:;"><i class="fa fa-times"></i></a></li>
</ul>
</li>
</ul>
<ul class="clearfix list-unstyled research-analysis-list do-edit">
<li class="col1">
<ul class="list-unstyled clearfix research-col-list">
<li>
<span class="key">Songs Performed</span>
<span class="value songs-performed-text" contenteditable="false">54</span>
</li>
<li>
<span class="key">Events</span>
<span class="value events-text" contenteditable="false">17</span>
</li>
<li>
<span class="key">Date Range</span>
<span class="value date-text" contenteditable="false">1991-2013</span>
</li>
<li>
<span class="key">Viacom Programs</span>
<span class="value viacom-programs-text" contenteditable="false">11</span>
</li>
<li>
<span class="key">Physical</span>
<span class="value physical-text" contenteditable="false">57.58%</span>
</li>
<li>
<span class="key">Digital</span>
<span class="value digital-text" contenteditable="false">42.42%</span>
</li>
</ul>
</li>
<li class="col2">
<ul class="list-unstyled clearfix research-col-list">
<li>
<span class="key">Year Range</span>
<span class="value year-range-text" contenteditable="false">2011-2012</span>
</li>
<li>
<span class="key">No. of Viacom Programming</span>
<span class="value viacom-programming-text" contenteditable="false">54</span>
</li>
<li>
<span class="key">No. of Interviews</span>
<span class="value interview-text" contenteditable="false">29</span>
</li>
<li>
<span class="key">No. of Performances</span>
<span class="value performance-text" contenteditable="false">650</span>
</li>
<li>
<span class="key">No. of B-Roll</span>
<span class="value b-roll-text" contenteditable="false">965</span>
</li>
<li>
<span class="key">No. of Audio Assets</span>
<span class="value audio-assets-text" contenteditable="false">1685</span>
</li>
</ul>
</li>
<li class="col3">
<ul class="list-unstyled clearfix research-col-list">
<li>
<span class="key">HD Digital</span>
<span class="value hd-digital-text" contenteditable="false">12.22</span>
</li>
<li>
<span class="key">SD Digital</span>
<span class="value sd-digital-text" contenteditable="false">45.58</span>
</li>
<li>
<span class="key">HD Physical</span>
<span class="value hd-physical-text" contenteditable="false">87.98</span>
</li>
<li>
<span class="key">SD Physical</span>
<span class="value sd-physical-text" contenteditable="false">58.63</span>
</li>
<li>
<span class="key">Physical assets without format information</span>
<span class="value without-info-physical-text" contenteditable="false">32.21</span>
</li>
</ul>
<div class="highlighted-bg"></div>
</li>
</ul>
</div>
</section>
<section class="analytics clearfix">
<div class="color-title clearfix">
<h3 class="pull-left">Analytics</h3>
<a href="javascript:;" class="export-analytics">Export</a>
</div>
<div class="wrap-table-analytics" data-mcs-theme="dark">
<div id="content-2" class="content nested">
<table class="table-analytics display datatable" cellspacing="0" width="100%">
<tr>
<th><span>Year</span></th>
<th><span>Record Date</span></th>
<th><span>Show/Event</span></th>
<th><span>Episode No.</span></th>
<th><span>Artist(s)</span></th>
<th><span>Content Type</span></th>
<th><span>Song/Interview</span></th>
<th><span>Talent</span></th>
<th><span>Location</span></th>
<th><span>Publish row</span></th>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p1" />
<label for="p1">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p2" />
<label for="p2">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p3" />
<label for="p3">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p4" />
<label for="p4">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p5" />
<label for="p5">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p6" />
<label for="p6">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p7" />
<label for="p7">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p8" />
<label for="p8">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p9" />
<label for="p9">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p10" />
<label for="p10">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p11" />
<label for="p11">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p12" />
<label for="p12">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p13" />
<label for="p13">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p14" />
<label for="p14">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p15" />
<label for="p15">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p16" />
<label for="p16">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p17" />
<label for="p17">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p18" />
<label for="p18">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p19" />
<label for="p19">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p20" />
<label for="p20">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p21" />
<label for="p21">Publish</label>
</td>
</tr>
<tr>
<td>2003</td>
<td>12/22/2003</td>
<td>Wembley Stadium</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Single Ladies</td>
<td>Host</td>
<td>Wembley, London, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p22" />
<label for="p22">Publish</label>
</td>
</tr>
<tr>
<td>2004</td>
<td>5/27/2004</td>
<td>Stadium Of Light</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Daddy Lessons</td>
<td>VJ</td>
<td>Cardiff, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p23" />
<label for="p23">Publish</label>
</td>
</tr>
<tr>
<td>2005</td>
<td>8/2/2005</td>
<td>Principality Stadium Cardiff</td>
<td>NA</td>
<td>Beyoncé</td>
<td>Performance</td>
<td>Sandcastles</td>
<td>Host</td>
<td>Manchester, GB</td>
<td>
<input type="checkbox" class="filled-in" id="p24" />
<label for="p24">Publish</label>
</td>
</tr>
</table>
</div>
</div>
</section>
</div>
</section>
<footer>
<div class="va-wrap clearfix">
<span class="pull-left">©2016 VM&E | vault Analytics</span>
<a href="javascript:;" class="pull-right">Site Terms</a>
</div>
</footer>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script><script src='https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js'></script>
<script >$(document).click(function() {
$('#addPage').find('ul').fadeOut("fast");
});
$('#addPage').on('click', function(){
$(this).find('ul').fadeIn("fast");
return false;
});
(function($){
// scroller initialisation
$(window).load(function(){
$(".content, body").mCustomScrollbar({
axis:"yx",
scrollInertia: 550,
scrollbarPosition: "outside",
liveSelector: "string"
});
});
// edit mode
var modeOnClick = false;
page = $('#page');
$('a.edit').on('click', function(){
$this = $(this);
if(modeOnClick === false){
page.addClass('is-editable');
$this.addClass('edit-mode-on');
modeOnClick = true;
}else if(modeOnClick === true){
page.removeClass('is-editable');
$this.removeClass('edit-mode-on');
modeOnClick = false;
}
});
//edit click
$('.va-btn-edit').on('click', function(){
var editableArea = $(this).parents("ul.edit-btn-list").siblings(); //.siblings('[class*="text"]')
editableArea.find('[contenteditable]').attr("contenteditable", true);
editableArea.find('[class*="text"]').eq(0).focus();
$(this).fadeOut("fast");
$(this).siblings('.edit-options').fadeIn("fast");
});
//editoptions click
$('.edit-options a').on('click', function(){
//$(this).parents(".do-edit").removeClass('do-edit');
$(this).parents("ul.edit-options").fadeOut("fast");
$('.va-btn-edit').fadeIn("fast");
$(this).closest('.edit-btn-list').siblings().find('[contenteditable]').attr('contenteditable', false)
});
})(jQuery);
//# sourceURL=pen.js
</script>
</body></html>
