@charset "UTF-8"; 
@namespace "http://www.w3.org/1999/xhtml";

/* //////////////////////////////////////////////////////////////////////////
* Application definitions
*/
body {
	font:13px/19px Arial, sans-serif;
	color:#333;
	margin:0;
	padding:0;
	height:100%;
}
html {
	height:100%;
}

a:focus {
	overflow: hidden;
}
:focus {
	-moz-outline-style: none;
	outline-style: none;
}
select:focus {
   overflow: visible;
}

a:link,
a:active,
a:visited {
	color:#c20852;
	text-decoration:none;
}
a:hover {
	color:#fff;
	background-color:#c20852;
}

.wrapper {
	width:100%;
	height:100%;
	display:block;
}

button {
	cursor:pointer;
}

.intro {
	padding-bottom:5px;
}

.canvas-wrapper {
	position:absolute;
	width:100%;
	overflow:hidden;
	height:100%;
}

.canvas-holder {
	position:absolute;
	top:50%;
	left:50%;
}

.canvas-bg {
	position:fixed;
	background-color:black;
	opacity:0;
	width:100%;
	height:100%;
}

canvas {
	position:fixed;
}

/**
* ///////////////////////////////////////////////////
*/

.setVal{
	padding:5px;
	position:relative;
	top:-5px;
	margin:3px;
}

.setVal input{
	background:#fff;
	position:relative;
	top:5px;
	left:-20px;
	display:inline-block;
	text-indent:4px;
	width:35px;
	height:18px;
	color:#666;
	border:1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.setValWide {
	padding-left:0;
}
.setValWide input{
	background:#fff;
	position:relative;
	display:inline-block;
	text-indent:4px;
	width:185px;
	height:18px;
	top:5px;
	left:0;
	border:1px solid #ccc;
	color:#666;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.setVal input:focus {
	-moz-outline-radius: 4px;
	-webkit-outline-radius: 4px;
	outline-radius: 4px;
	outline-color:#df1c50;
}
ul {
	clear:both;
	list-style:none;
	margin-left:20px;
	padding:0;
}

.bgcolor-controls {
	margin-bottom:13px;
}

.option-controls,
.slider-controls {
	margin-top:30px;
}

.option-controls {
	margin-bottom:25px;
}

.option-controls li,
.select-controls li,
.color-controls li,
.bgcolor-controls li {
	display:inline-block;
}

.select-controls li {
	margin-right:25px;
	margin-bottom:15px;
}
.option-controls li,
.slider-controls li,
.bgcolor-controls li {
	margin-bottom:8px;
}
.option-controls li {
	width:223px;
	height:60px;
}

.slider-controls li {
	width:100%;
	height:38px;
}

.select-controls span,
.bgcolor-controls span {
	margin-bottom:5px;
}

.option-label {
	font-size:15px;
	display:block;
	font-weight:bold;
	margin-bottom:10px;
}

.slider-option-label {
	float:left;
	display:inline-block;
	width:80px;
}

.select {
	width:190px;
	border:1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.select:focus {
	-moz-outline-radius: 4px;
	-webkit-outline-radius: 4px;
	outline-radius: 4px;
	outline-color:#df1c50;
}

.intro p,
.settings p {
	margin:0 15px 15px 20px;
}

hr {
	border:none;
	border-top:1px solid #e3e3e3;
	border-bottom:1px solid #fcfcfc;
}
.hr-strong {
	border:none;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #c9c9c9;
	margin:0;
	padding:0;
}
.hr-header {
	border:none;
	border-top:1px solid #030303;
	border-bottom:1px solid #c9c9c9;
	margin:0;
	padding:0;
}
.hr-footer {
	border:none;
	border-top:1px solid #c9c9c9;
	border-bottom:1px solid #030303;
	margin:0;
	padding:0;
}

h4 {
	margin-left:15px;
	margin-bottom:10px;
}

.advantage-list {
	margin:0 30px 30px 40px;
	list-style-image:url('../img/heartcode-canvasloader-bullet.gif');
}

/**
* Browser chart list
*/
.browser-chart {
	display:inline-table;
	margin-left:15px;
	margin-bottom:40px;
}
.browser-chart li {
	display:inline-block;
	position:relative;
}
.browser-firefox-versions li,
.browser-safari-versions li,
.browser-opera-versions li {
	display:block;
}
.browser-chart-item {
	background-image: url('../img/browserchart.png');
	background-repeat:no-repeat;
}
.browser-chart-item span {
	font-size:10px;
}
.browser-version-level1,
.browser-version-level2 {
	position:absolute;
	margin:0;
	padding:0;
	left:45px;
	top:22px;
}
.browser-version-level2 {
	top:4px;
}
.browser-version-level1 {
	font-weight:bold;
}
.browser-firefox-versions,
.browser-safari-versions,
.browser-opera-versions {
	margin:0;
	padding:0;
}
.browser-ie {
	width:157px;
	height:42px;
	padding-right:4px;
}
.browser-chrome {
	width:152px;
	height:42px;
	background-position:0 -44px;
	padding-right:4px;
}
.browser-android {
	width:110px;
	height:42px;
	background-position:0 -88px;
}
.browser-firefox {
	width:138px;
	height:42px;
	background-position:0 -132px;
	padding-right:4px;
}
.browser-safari {
	width:151px;
	height:42px;
	background-position:0 -176px;
	padding-right:4px;
}
.browser-opera {
	width:141px;
	height:56px;
	background-position:0 -220px;
	margin-top:10px;
}
.browser-opera-versions span {
	position:absolute;
	margin:0;
	padding:0;
	left:45px;
}
.browser-opera-version-mini span {
	top:18px;
}
.browser-opera-version-desktop span {
	top:36px;
}
/**
* End of Browser chart list
*/

pre {
	font-size:11px;
	line-height:12px;
	margin: 0 0 20px 15px;
}

.custom-code {
	clear:both;
	margin:25px 0 10px 0;
}
h3 {
	margin:2px 2px 2px 10px;
	padding:0;
	color:#fff;
	font-size:130%;
}
.sidebar  {
	width:520px;
	height:100%;
	position:absolute;
	right:0;
	z-index:3;
	overflow-y: hidden;
}

.sidebar-shadow {
	position:fixed;
	width:32px;
	top:102px;
	background:url("../img/app-shadow-side.png");
	background-repeat:repeat-y;
}

.sidebar-wrapper {
	position:absolute;
	left:32px;
	top:102px;
	display:block;
	background-color:#efefef;
	border-left:1px solid #070707;
	border-top:1px solid #070707;
	border-bottom:1px solid #070707;
	
	overflow: -moz-scrollbars-vertical;
	overflow: -webkit-scrollbars-vertical; 
	overflow-y: scroll;
}

.sidebar-section {
	position:relative;
	background-color:#efefef;
}

.sidebar-h3-block {
	clear:left;
	display:block;
	padding:5px;
	margin-top: 0;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #999;
	background-color: #000;
	background-image: url("../img/AccordionTab0.gif");	
}
.sidebar-h3-block-first {
	display:block;
	padding:8px 5px 5px 5px;
	margin-top: 0;
	border-top: none;
	border-bottom: none;
	background-color: #000;
	background-image: url("../img/AccordionTab0.gif");	
}

.sidebar p {
	margin-left:15px;
	width:90%;
}

.p-sidebar-first {
	margin-top:25px;
	margin-left:15px;
	width:90%;
}
.p-sidebar-last {
	margin-bottom:32px;
}

.changelog-list {
	list-style-image:url('../img/heartcode-canvasloader-bullet.gif');
	margin-left:40px;
	margin-bottom:20px;
}

.changelog-list h4 {
	margin:0;
	padding:0;
}

.download-list {
	margin:30px 0 30px 15px;
}
.download-list li {
	margin:0;
	padding:0;
}
.download-button {
	margin:0;
	padding:0;
	position:relative;
	border:none;
	width:253px;
	height:34px;
	padding:0 0 34px;
	background:url('../img/downloadlibrary.png');
	background-repeat:no-repeat;
	background-position:0 0;
	color:white;
}
.code-button {
	position:relative;
	margin:15px;
	border:none;
	width:253px;
	height:34px;
	padding:0 0 34px;
	background:url('../img/downloadlibrary.png');
	background-repeat:no-repeat;
	background-position:0 0;
	color:white;
}

.library-button {
	margin:15px;
	border:none;
	width:253px;
	height:34px;
	background:url('../img/downloadlibrary.png');
	background-repeat:no-repeat;
	background-position:0 0;
	color:white;
}

.clipboard-tick {
	position:relative;
	display:inline-block;
	width:26px;
	height:21px;
	margin-left:4px;

	-webkit-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	   -moz-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	     -o-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	        transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.clipboard-tick-active {
	top:-8px;
	opacity:1;
	
}
.clipboard-tick-hidden {
	opacity:0;
	top:0;
}
.clipboard-button-wrapper {
	position:relative;
}

.code-button:hover,
.library-button:hover,
.download-button:hover {
	background-position:0 -34px;
}

.code-button-active {
	background-position:0 -34px;
}

.code-button span,
.library-button span,
.download-button span {
	position:relative;
	top:6px;
}
.bgcolor-toggle-button {
	position:relative;
	text-align:left;
	top:1px;
	width:68px;
	height:24px;
	background:url("../img/togglebutton.png");
	background-repeat:no-repeat;
	background-position:0 0;
	border:none;
	color:#ffffff;
}

.bgcolor-toggle-button span {
	position:relative;
	top:-2px;
	left:32px;
}
.bgcolor-toggle-button-on span {
	position:relative;
	top:-2px;
	left:4px;
}

.bgcolor-toggle-button-on {	
	background-position:0 -24px;
}

.app-footer {
	position:fixed;
	min-width:510px;
	overflow:hidden;
	width:100%;
	z-index:2;
	bottom:0;
}

.footer-info {
	float:left;
	min-width:970px;
	font-size:12px;
	line-height:16px;
	margin-top:-1px;
}

.issue-button {
	position:relative;
	margin:25px 15px 30px 15px;
	border:none;
	width:253px;
	height:34px;
	background:url('../img/downloadlibrary.png');
	background-repeat:no-repeat;
	background-position:0 0;
	color:white;
	text-align:center;
}
.issue-button:hover {
	background-position:0 -34px;
}
.issue-button span {
	position:relative;
	top:8px;
}

.app-header {
	width:100%;
	min-width:800px;
	overflow:hidden;
	position:fixed;
	z-index:1;
}
.app-header-shadow {
	width:100%;
	height:128px;
	background-image:url("../img/app-shadow.png");
	background-repeat:repeat-x;
}
.app-header-wrapper {
	position:relative;
	background:url('../img/demo-main-bg-pattern.png');
	background-attachment:fixed;
	background-color:#ffffff;
	height:90px;
	padding-left:10px;
	padding-top:12px;
}

.paypal-donate-button {
	position:relative;
	top:4px;
}
.paypal-donate-image {
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	border:1px solid #f2f2f2;
	background:#ddd;
	padding:2px;
}

.app-footer-wrapper {
	position:relative;
	background:url('../img/demo-main-bg-pattern.png');
	background-attachment:fixed;
	background-color:#ffffff;
	height:24px;
	padding-left:15px;
	padding-top:12px;
}
.app-footer-shadow {
	width:100%;
	height:32px;
	background-image:url("../img/app-shadow-invert.png");
	background-repeat:repeat-x;
}

h1 {
	float:left;
	margin:10px 0 16px 0;
	padding:0;
	color:#333;
	font-size:31px;
}
.branding {
	margin:0 15px 0 0;
	padding:0;
	border:none;
	float:left;
}
.title-h2 {
	color:#000;
	font-size:17px;
}

.social-sharing-ul {
	position:absolute;
	list-style:none;
	top:62px;
	left:90px;
	margin:0;
	padding:0;
}
.social-sharing-ul li {
	display:table-cell;
}
.social-sharing-ul li span{
	clear:both;
	margin:0;
	padding:0;
}

.twitter {
  max-width:102px;
	padding-left:10px;
}
.facebook {
	padding-left:0;
}

.googleplus {
	padding-left:10px;
	width:38px;
}

.social-nav {
	margin-top:8px;
	display:inline-block;
}

/* 
* End of Application definitions
/* //////////////////////////////////////////////////////////////////////////

/* //////////////////////////////////////////////////////////////////////////
* Colorpicker definitions
*/

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(../img/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
	z-index:3;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(../img/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(../img/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(../img/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(../img/colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(../img/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(../img/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(../img/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(../img/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(../img/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(../img/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(../img/colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}
/* 
* End of Colorpicker definitions
/* //////////////////////////////////////////////////////////////////////////
*/

/* 
* FD Slider definitions
/* //////////////////////////////////////////////////////////////////////////
*/

#fd-slider-describedby {
	padding:1em;
	border:3px solid #a84444;
	background:#fff;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}
input[type="range"] {
	display:inline-block;
	float:left;
}
.range-input-wrapper {
	display:inline-block;
	width:350px;
	float:left;
	left:-5px;
}
.slider-range-label {
	float:left;
	margin:0;
	padding:0;
	margin-top:2px;
	font-size:12px;
	width:20px;
}
.rangeSliderInput {
	position:relative;
	top:0;
	left:0;
	background:#fff;
	text-indent:4px;
	width:100%;
	height:18px;
	color:#666;
	border:1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* 
* End of FDSlider definitions
/* //////////////////////////////////////////////////////////////////////////
*/

/* 
* Sharing modal window definitions
/* //////////////////////////////////////////////////////////////////////////
*/

#fade { 
	display: none;
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
*html #fade {
	position: absolute;
}
*html .sharing-modal {
	position: absolute;
}

.sharing-modal{
	display: none;
	background: #efefef;
	border: 2px solid #070707;
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	width:550px;
	height:590px;
	-webkit-box-shadow: 0 0 20px #000;
	-moz-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.sharing-modal-header {
	background-color:#000000;
	width:100%;
	height:47px;
	margin:0;
	padding:0;
	background-image:url("../img/modal-header.png");
	background-repeat:repeat-x;
}
.sharing-modal-title-h2 {
	color:white;
	padding:15px 0 0 15px;
	margin:0;
	font-size:17px;
	font-weight:bold;
}

.sharing-modal-section-h3 {
	font-size:18px;
	font-weight:bold;
	color:#bf113f;
	margin:28px 0 0 15px;
	padding:0;
}

.sharing-modal-form {
	margin:22px 0 20px 15px;
	padding:0;
}
.sharing-modal-form li {
	display:inline-block;
	width:256px;
	margin:0 0 15px;
	padding:0;
}

.sharing-input {
	display:block;
	width:236px;
	height:11px;
	background-image:url("../img/modal-input.png");
	background-repeat:repeat-x;
	border:1px solid #cccccc;
	padding:8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:#ccc 0 0 5px;
	-webkit-box-shadow:#ccc 0 0 3px;
	box-shadow:#ccc 0 0 3px;
}
.sharing-input-incorrect {
	display:block;
	width:236px;
	height:11px;
	background-image:url("../img/modal-input.png");
	background-repeat:repeat-x;
	border:1px solid #ff0000;
	padding:8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:#ccc 0 0 5px;
	-webkit-box-shadow:#ccc 0 0 3px;
	box-shadow:#ccc 0 0 3px;
}

.sharing-textarea {
	width:502px;
	height:62px;
	resize:none;
	white-space: pre-wrap;
	word-wrap: break-word;
	padding:8px;
	font:inherit;
}

.sharing-label {
	display:block;
	color:#333333;
	font-size:15px;
	/*font-weight:bold;*/
	margin:0 0 5px;
	padding:0;
}

.sharing-modal-social-form {
	margin:21px 0 0 15px;
	padding:0;
}
.sharing-modal-social-form li{
	display:inline-block;
	margin:0;
	padding:0;
}

.sharing-send-button {
float:left;
	width:133px;
	height:34px;
	border:none;
	margin:0 0 20px 15px;
	padding:0;
	color:white;
	text-align:left;
	font-size:13px;
	text-indent:51px;
	background-image:url("../img/send-email.png");
	background-repeat:no-repeat;
	background-position:0 0;
}
.sharing-send-button:hover {
	background-position:0 -36px;
}

.modal-button-label {
	position:relative;
	top:-2px;
}

.modal-close {
	position:absolute;
	right:8px;
	top:10px;
	margin:0;
	padding:0;
	border:none;
	background:none;
	background-image:url("../img/modal-close.png");
	background-repeat:no-repeat;
	background-position:0 0;
	width:28px;
	height:29px;
}

.modal-close:hover {
	background-position:0 -31px;
}

.sharing-social-button {
	border:none;
	display:inline-block;
	height:34px;
	margin:0;
	padding:0;
	color:white;
	text-align:left;
	font-size:13px;
	text-indent:51px;
	background-repeat:no-repeat;
	background-position:0 -36px;
}
.sharing-social-button:hover {
	background-position:0 0;
}
.sharing-twitter-button {
	width:163px;
	background-image:url("../img/twitter.png");
	margin-right:1px;
}
.sharing-facebook-button {
	width:172px;
	text-indent:44px;
	background-image:url("../img/facebook.png");
	margin-right:3px;
}
.sharing-linkedin-button {
	width:170px;
	text-indent:50px;
	background-image:url("../img/linkedin.png");
}

.sharing-modal-hr {
	clear:left;
	margin:0 15px 0 15px;
}

.sharing-modal-feedbackboard {
	float:left;
	width:372px;
	height:26px;
	border:2px solid white;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:#ccc 0 0 5px;
	-webkit-box-shadow:#ccc 0 0 3px;
	box-shadow:#ccc 0 0 3px;
	background-color:white;
	color:#a40731;
	font-size:13px;
	line-height:26px;
	font-weight:bold;
	margin:0 0 0 9px;
	padding:0;
	text-indent:8px;
	display:none;
}

.sharing-modal-button {
	position:relative;
}

.sharing-modal-button span {
	position:relative;
	top:-3px;
	left:-2px;
	font-size:12px;
}

.sharing-modal-inside-fade {
	display: none;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .30;
	z-index: 9998;
}

.sharing-modal-status {
	display:none;
	clear:both;
	opacity: 1;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-26px;
	height:51px;
	background-repeat:no-repeat;
	z-index: 9999;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	padding-left:62px;
	padding-top:16px;
}

.sharing-modal-status-error {
	margin-left:-158px;
	width:317px;
	background-image:url("../img/modal-status-error.png");
}
.sharing-modal-status-success {
	margin-left:-147px;
	width:294px;
	background-image:url("../img/modal-status-success.png");
}
.sharing-modal-status-progress {
	margin-left:-104px;
	width:209px;
	background-image:url("../img/modal-status-progress.png");
}

.signup-box {
	width:502px;
	height:32px;
	margin-left:15px;
	padding-bottom:8px;
}
.signup-box input,
.signup-box label {
  cursor:pointer;
}

/* 
* End of Sharing modal window definitions
/* //////////////////////////////////////////////////////////////////////////
*/