/******************** Circles */
#canvas {
  float:none;
	margin:auto;
	padding:0;
}
#canvas svg {
	position:absolute;
}
#canvas .circles {
	position:absolute;
}
.circles {
	margin:0;
	padding:0;
	background-image: url(../img/sprite.png);
}
a.circles {
	height: 36px;
	width: 36px;
	background-size: 64px 1472px;
	display:inline-block;
	position:relative;
	vertical-align:middle;
	border-width:2px;
	border-style:solid;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	border-color: #DDD;
	background-color: #FFF;
}
span.circles:hover { cursor: pointer; cursor: hand; }
/******************** wtf? */
.mainspot .ui-mobile-viewport.ui-overlay-a{
    margin-top:-100px;
    overflow: visible !important;
}
/******************** Fix jQuery inside Joomla framework */
.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
	position: relative;
}
#wrapper > .mainspot {
	padding-bottom: 0px;
}
.ui-page > .ui-content {
	margin-bottom:40px; margin-top:60px;
	margin-left:-15px; margin-right:-15px;
}
.ui-page > .ui-footer { 
	position: absolute !important; 
	bottom: 0; 
	width: 100%;
}
/******************** This CSS is used for the Show/Hide functionality. */
.more {display: none;}
a.showLink {}
a.hideLink { display: none;}
a.showLink:hover {}
a.hideLink:hover {}

/******************** Custom corners */
.custom-corners .ui-bar {
  -webkit-border-top-left-radius: inherit;
  border-top-left-radius: inherit;
  -webkit-border-top-right-radius: inherit;
  border-top-right-radius: inherit;
}
.custom-corners .ui-body {
  border-top-width: 0;
  -webkit-border-bottom-left-radius: inherit;
  border-bottom-left-radius: inherit;
  -webkit-border-bottom-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
/******************** ... */
.ui-btn.my-tooltip-btn,
.ui-btn.my-tooltip-btn:hover,
.ui-btn.my-tooltip-btn:active {
    background: none !important;
    border: 0;
}
/******************** Class to color input fields */
.badInput  {border: 1px solid red !important;}
.goodInput {border: 1px solid green !important;}
/******************** infoBox */
.infoBox {background-color: #ffffe9;}
/******************** Customgrid */
/* Stack all blocks to start */
.customgrid .ui-block-a,
.customgrid .ui-block-b,
.customgrid .ui-block-c,
.customgrid .ui-block-d {
    width: 100%;
    float: none;
}
@media all and (min-width: 35em) {
    .customgrid .ui-block-a,
    .customgrid .ui-block-b,
    .customgrid .ui-block-c,
    .customgrid .ui-block-d {
      float: left;
      width: 25%;
    }
}
/******************** ... */