/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
	box-sizing:border-box;
}

/* Plugin Styles */
body{
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	line-height:1em;
}

#ccp-bar{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ccp-iframe{
	width:calc(100% - 420px);
	height:100%;
	position:fixed;
	left:420px;
	top:0;
	border-width:0;
}

#ccp-section{
	position:fixed;
	left:0;
	top:0;
	width:420px;
	background-color:#272727;
	height:100%;
	z-index:99999999;
	-webkit-box-shadow: 0 0 50px 30px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 50px 30px rgba(0,0,0,0.4);
	box-shadow: 0 0 50px 30px rgba(0,0,0,0.4);
}

#ccp-bar{
	position:relative;
	height:48px;
	background-color:#171814;
	line-height:48px;
	text-align: right;
	padding:0 15px;
	font-size:0;
	border-bottom:1px solid #3C3D39;
}

#ccp-data{
	height: -webkit-calc(100% - 48px);
	height: -moz-calc(100% - 48px);
	height: -o-calc(100% - 48px);
	height: calc(100% - 48px);
}

.ccp-btn{
	text-transform:uppercase;
	font-weight:600;
	font-size:11px;
	padding:6px 12px;
	cursor:pointer;
	border: 1px solid #1D1D1D;
	color: #A7A7A7;
	background: #474747;

	background-color: #00729F;
	border-color: #001018;
	color: rgba(255, 255, 255, 0.79);
}

.active{
	background-color: #2C8DB4;
	border-color: #001018;
	color: rgba(255, 255, 255, 0.79);
}

.ccp-close{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px auto;
	background-image: url(../img/left.png);
	position:absolute;
	left:0;
	top:0;
	width:43px;
	height:100%;
	cursor:pointer;
}

.ace_editor{
	background-color:transparent !important;
}

#ccp-bg{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:100000001;
	background-color:#272727;
}

#ccp-loading{
	background-image:url(../img/cog.png);
	width:48px;
	height:48px;
	background-size:48px;
	z-index:100000002;
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-24px;
	margin-left:-24px;
	animation-name: spin;
    animation-duration: 4s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.ccp-bg-panel #ccp-loading{
	-webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}

@-moz-keyframes spin{
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.ccp-visual-editor{
	display: inline-block;
	margin-right:15px;
	line-height: 27px;
	padding: 0px 10px;
	text-decoration: none;
	color: #b7b7b7;
	background-color: #393937;
}