html
{
background-color : #F5F5F6;
background-image : none;
background-attachment:fixed;
}

body
{
background-attachment:fixed;padding-top:35px;
background-color : transparent;
width:100vw;
height:100vh;
}
body#kp_record #main {
display:block;
}

body>.shadow:first-child
{

background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0) 100%); /* W3C */
height:0px;
width:100%;
position:static;
position:fixed;
top:0px;
left:0px;
opacity:0;
filter:Alpha(opacity=0);
}


.wrapper
{
width:auto;
margin : 0 auto;

background-color:#FFFFFF;
position:absolute;
top:0px;
bottom:0px;
left:50%;
margin-left:-0px;
right:auto;
transition-property:right, width;
-webkit-transition-property:right, width;
}
.wrapper:after
{
display:none;
content:'';
}

.wrapper.wide
{
width:auto;
right:0px;
}

.wrapper.fullHeight
{
bottom:auto;
display:table;
}
.wrapper>div
{
display:inline-block;
vertical-align:middle;
overflow:auto;
height:100%;
position:relative;
box-sizing:border-box;
}
.wrapper.fullHeight>div
{
display:table-cell;
vertical-align:top;
}
.wrapper, .wrapper>div,.wrapper>div *
{
transition-duration:.5s;
-webkit-transition-duration:.5s;
transition-property:none;
-webkit-transition-property:none;
}
 #icon-bar
{
width:39px;
background-color:#2F77B7;
color:#FFFFFF;
text-align:center;
overflow:visible;
}
 #icon-bar>.kent-ico
{
color:#FFFFFF;
font-size:24px;
line-height:50px;
display:block;
}
 #icon-bar .kent-ico.opener, #bar-list .kent-ico.opener, #icon-bar .kent-ico.home
{
font-size:24px;
line-height:30px;
margin-bottom:10px;
display:block;
text-align:center;
text-decoration:none;
}
 #icon-bar .popup
{
display:none;
position:absolute;
top:0px;
bottom:0px;
left:39px;
width:232px;
background-color:#FFFFFF;
box-shadow:0px 0px 30px -5px #000000;
}
 #icon-bar .popup .arrow
{
position:absolute;
top:10px;
left:-12px;
font-size:18px;
margin:0px;
line-height:50px;
}
 #icon-bar .popup .contents
{
border:none;
background-color:transparent;
border-radius:0px;
margin-top:14px;
padding:0px 14px;
box-sizing:border-box;
-moz-box-sizing:border-box;
top:20px;
bottom:0px;
left:0px;
right:0px;
position:absolute;
overflow-y:auto;
}
 #icon-bar .popup .close
{
position:absolute;
top:9px;
right:9px;
font-size:16px;
color:#505050;
}
 #icon-bar .popup .close:hover
{
color:#E8CE6A;
}
 #icon-bar .popup h1
{
margin:5px 10px;
}
 #icon-bar .popup .header, #icon-bar .popup h1
{
color:#3C3C3B !important;
font-size:16px !important;
font-family:Raleway, Source Sans, Arial, sans-serif;
font-weight:bold;
}
 #icon-bar .popup ul
{
overflow-x:hidden;
overflow-y:auto;
width:100%;
margin-bottom:20px !important;
}
 #icon-bar .popup ul li
{
padding:3px 0px !important;
text-align:left;
}
 #icon-bar .popup ul li a
{
color:#2F77B7 !important;
font-weight:bold;
text-decoration:none;
font-size:11px !important;
}
 #icon-bar .popup ul li.sublist
{
font-size:11px !important;
color:#3C3C3B !important;
font-weight:bold;
}
 #icon-bar .popup ul li.sublist ul
{
margin-bottom:0px !important;
margin-left:10px !important;
}

 #icon-bar .popup ul li a:hover, #icon-bar .popup ul li a.active
{
color:#3C3C3B !important;
} 

 #bar-list
{
width:180px;
color:#FFFFFF;
background: #4D4D4D; /* Old browsers */
background: -moz-linear-gradient(left,  #4D4D4D 0%, #595959 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4D4D4D), color-stop(100%,#595959)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #4D4D4D 0%,#595959 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #4D4D4D 0%,#595959 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #4D4D4D 0%,#595959 100%); /* IE10+ */
background: linear-gradient(to right,  #4D4D4D 0%,#595959 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#595959',GradientType=1 ); /* IE6-9 */
overflow-x:hidden;
overflow-y:hidden;
transition-property:width;
-webkit-transition-property:width;
}
 #bar-list.closed
{
overflow-y:hidden;
width:39px;
}

 #bar-list>.kent-ico
{
color:#BFBFBF;
display:block;
width:39px;
position:absolute;
right:0px;
}
 #bar-list.closed .kent-ico
{
color:#FFFFFF;
}
 #bar-list .contents
{
position:absolute;
top:40px;
bottom:0px;
text-align:left;
overflow-y:auto;
width:180px;
transition-property:opacity;
-webkit-transition-property:opacity;
}
 #bar-list.closed .contents
{
opacity:0;
}
 #bar-list .contents>.header
{
padding:0px 7px;
margin-bottom:15px;
}
 #bar-list .contents>.header h1
{
color:#BFBFBF;
font-size:18px;
margin:0px;
}
 #bar-list .contents>.header .subtitle
{
color:#BFBFBF;
text-align:right;
font-size:11px;
margin:0px;
}
 #bar-list .contents ul
{
margin:0px;
padding:0px 7px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
 #bar-list .contents ul h2
{
color:#BFBFBF;
font-size:14px;
margin:0px;
border-top:1px solid #BFBFBF;
}
/* #bar-list .contents ul h2:first-child
{
border-top-width:0px;
}*/
 #bar-list .contents ul li
{
list-style-type:none;
margin-bottom:15px;
}
 #bar-list .contents ul li a
{
color:#FFFFFF;
font-size:11px;
text-decoration:none;
}
 #bar-list .contents ul li a.active p, #bar-list .contents ul li a:hover p
{
color:#FF9D1F !important;
}
 #bar-list .contents ul li a p
{
margin:0px;
}
 #bar-list .contents ul li a p.subtitle
{
font-style:italic;
color:#BFBFBF;
}
 #bar-list .contents ul li a.active, #bar-list .contents ul li a:hover
{
color:#FF9D1F;
}
 #bar-list .contents .otherLink
{
margin-left:20px;
margin-top:-15px;
}
 .wrapper>div .loader
{
position:absolute;
top:50%;
margin-top:-8px;
left:0px;
right:0px;
text-align:center;
}
 #listrecord, #viewer
{
position:absolute;
left:calc(39px + 180px);
right:0;
top:0;
bottom:0;
transition-property:left, top, bottom, height,width;
-webkit-transition-property:left, top, bottom, height,width;
min-width:400px;
display:block;
}
 #bar-list.closed+#listrecord, #bar-list.closed+#listrecord+#viewer
{
left:calc(2 * 39px);
}
.fullHeight #listrecord,.fullHeight #viewer
{
bottom:auto;
height:auto;
position:relative;
left:0;
}
 #listrecord
{
overflow-y:auto;
}
 #listrecord.closed
{
bottom:100%;
height:0;
overflow-y:hidden;
}
 #listrecord .header
{
position:relative;
padding-left:83px;
}
 #listrecord .header p
{
margin:0px;
}
 #listrecord .header .nb
{
width:55px;
background-color:#911A16;
color:#FFFFFF;
position:absolute;
top:0px;
left:13px;
line-height:46px;
height:52px;
text-align:center;
font-size:16px;
font-weight:bold;
}
 #listrecord .header .nb .kent-ico
{
position:absolute;
bottom:-1px;
left:50%;
margin-left:-29px;
color:#FFFFFF;
font-size:58px;
line-height:58px;
}
 #listrecord .header div
{
float:left;
}
 #listrecord .header h1
{
font-family:Raleway, Source Sans, Arial, sans-serif;
font-size:22px;
color:#888888;
margin:16px 0px 0px 0px;
font-weight:bold;
}
 #listrecord .header .subtitle
{
font-size:10px;
color:#656E7E;
font-weight:bold;
text-align:right;
margin-left:15px;
}
 #listrecord .header .logo
{
max-height:60px;
margin-left:50px;
margin-top:5px;
float:left;
}
 #listrecord .info
{
text-align:center;
font-style:italic;
position:absolute;
top:40%;
width:100%;
}
 #listrecord ul
{
clear:left;
margin:0px 20px 30px 11px;
padding-top:10px;
}
 #listrecord ul h2, .record h2
{
color:#B6B7B6;
font-size:18px;
line-height:1.2em;
border-bottom: 1px solid #F1F1F0;
margin-bottom:8px;
margin-top:15px;
clear:both;
}
 #listrecord ul li
{
list-style-type:none;
margin:16px 0px 6px 0px;
min-height:112px;
padding:10px 10px 26px 10px;
box-sizing:border-box;
border-bottom: 1px solid #F1F1F0;
display:block;
position:relative;
}
 #listrecord ul li.pri3 
{
background-color:#e0e0e0;
}
 #listrecord ul .edito:first-child
{
padding-top:20px;
}
 #listrecord ul .edito
{
font-size:14px;
}
 #listrecord ul .edito p
{
margin:auto;
}
 #listrecord ul li.pri1
{
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
float:left;
padding-right:15px;
clear:left;
min-height:162px;
}
 #listrecord ul li.pri1.odd
{
padding-left:15px;
clear:none;
}
 #listrecord ul li.pri1  .marker
{
right:-10px;
}
 #listrecord ul li.pri1.odd  .marker
{
right:-20px;
}

 #listrecord ul li .marker
{
display:none;
position:absolute;
right:-20px;
top:50%;
margin-top:-60px;
font-size:120px;
line-height:120px;
height:120px;
color:#2F77B7;
}
 #listrecord ul li a
{
text-decoration:none;
}
 #listrecord ul li a.active .marker, #listrecord ul li a:hover .marker
{
display:block;
}
 #listrecord ul li .icon
{
width:148px;
height:97px;
position:absolute;
left:10px;
text-align:center;
}
 #listrecord ul li .pri1
{
display:none;
}
 #listrecord ul li.pri1 .pri1
{
display:block !important;
}
 #listrecord ul li .icon img
{
max-height:100%;
max-width:100%;
}
 #listrecord ul li .header
{
margin-left:148px;
padding-left:15px;
font-size:18px;
color:#2F77B7;
margin-bottom:0px;
}
 #listrecord ul li.pri3 .header
{
font-size:22px;
}
 #listrecord ul li.pri1 .header
{
font-size:14px;
margin-left:0px;
padding-left:0px;
display:none;
font-weight:bold;
}
 #listrecord ul li a:hover .header
{
color:#3C3C3B;
}
 #listrecord ul li .subtitle
{
margin-left:148px;
padding-left:15px;
color:#656E7E;
font-size:10px;
margin-bottom:0px;
}
 #listrecord ul li.pri1 .subtitle
{
font-size:14px;
margin-left:0px;
padding-left:0px;
display:none;
padding-bottom:5px;
}
 #listrecord ul li .comment
{
margin-left:148px;
padding-left:15px;
color:#4a4a49;
font-size:14px;
margin-bottom:0px;
}
 #listrecord ul li.pri1 .comment
{
font-size:11px;
min-height:97px;
}
 #listrecord ul li .tags
{
margin:0px;
margin-left:148px;
padding-left:15px;
position:absolute;
bottom:12px;
color:#2F77B7;
font-size:10px;
height:15px;
overflow:hidden;
}

 #viewer
{
background-image:url('/kent-img/bg-transp/kent-trans-bg-22.png');
background-color:#323232;
}
 #viewer.closed
{
top:100%;
height:0;
overflow-y:hidden;
}
 #viewer #menuBar
{
height:32px;
line-height:32px;
padding:0px 12px;
position:absolute;
top:23px;
left:18px;
right:18px;
background-color:#595959;
box-sizing:border-box;
-moz-box-sizing:border-box;
text-align:center;
color:#FFFFFF;
font-size:12px;
}
 #viewer  #menuBar .kent-ico
{
font-size:20px;
color:#737373;
margin:0px;
text-decoration:none;
vertical-align:middle;
}
 #viewer #menuBar .kent-ico:hover
{
color:#a6a6a6;
}
 #viewer #menuBar .inactive, #viewer #menuBar .inactive:hover
{
color:#626262;
}
 #viewer #menuBar a[href="#prev"], #viewer #menuBar a[href="#next"]
{
font-size:24px;
}
 #viewer #menuBar .num
{
margin-right:4px;
text-decoration:none;
}
 #viewer #menuBar .num.first
{
margin-left:25px;
margin-right:15px;
}
 #viewer #menuBar .num.kent-ico:hover, #viewer #menuBar .num.kent-ico.active
{
color:#a6a6a6;
}
 #viewer #menuBar .left
{
float:left;
margin-right:4px;
}
 #viewer #menuBar .right
{
float:right;
margin-left:18px;
}
 #viewer #menuBar .popupMenu {
text-align:left;
}
 #viewer #menuBar .popupMenu ul {
list-style-type:none;
}
 #viewer #menuBar .basket-add .add input {
width:calc(100% - 28px)
}
 #viewer #menuBar .rating.kent-ico
{
height:32px;
line-height:24px;
position:relative;
display:inline-block;
margin-right:80px;
}
 #viewer #menuBar .rating.kent-ico span
{
padding:0px 3px;
font-size:14px;
}
 #viewer #menuBar .rating.kent-ico a
{
color:#737373;
text-decoration:none;
}
 #viewer #menuBar .rating.kent-ico span.active.jsnotactive a
{
color:#737373;
}
 #viewer #menuBar .rating.kent-ico span.active a,  #viewer #menuBar .rating.kent-ico span.jsactive a
{
color : #32374A;
}
 #viewer #iframe-wrapper
{
position:absolute;
top:55px;
bottom:23px;
left:18px;
right:18px;
overflow:auto;
-webkit-overlow-scrolling:touch;
}
.fullHeight #viewer #iframe-wrapper
{
height:auto;
position:relative;
left:18px;
right:0;
bottom:0;
}
 #viewer #urlbar
{
height:1.5em;
line-height:1.5em;
border-top:1px solid #737373;
}
 #viewer #urlbar input
{
width:100%;
height:1.5em;
line-height:1.5em;
box-sizing:border-box;
padding:0 20px;
border:none;
font-size:1em;
font-style:italic;
color:#a6a6a6;
background-color:#595959;
}
 #viewer iframe
{
width:100%;
height:calc(100% - 1.5em - 1px);
display:block;
border-width:0px;
transition-property:height;
-webkit-transition-property:height;
background-color:#ffffff;
overflow:auto;
}
 #viewer #urlbar.hide~iframe:not(.closed)
{
height:100%;
}
 #viewer iframe.closed
{
height:0;
overflow:hidden;
}
 #viewer #iframeLoader
{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(255,255,255,.7);
}

/* --------------- Record -------------- */
.record
{
background-color:#FFFFFF;
color:#000000;
padding:20px;
}
.record h2
{
margin-top:0px;
}
.record .date
{
color:#6F7381;
font-size:10px;
margin:20px 0px;
}
.record h1
{
color:#2F77B7;
font-size:24px;
font-family:Raleway, Source Sans, Arial, sans-serif;
font-weight:bold;
}