@font-face {
  font-family: handlee;
  src: url(../libraries/handleeregular.ttf);
}

body,html {
	padding:0px;
  margin: 0px;
	font-family: handlee;
	font-size:14pt;
	color : #666666;
	background : #ffffff;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    background-color: #ffffff;
    overflow: auto;
		background-image: url('../page_dreamcatcher/header_stoneblue.png');
		background-position:left top;
		background-repeat: no-repeat;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
		padding:0px;
		color : #666666;
    background-color: #7aa3cc;
}
#content {
    position: fixed;
    top: 260px;
    bottom: 40px;
    left: 0;
    right: 0;
		padding:20px;
		padding-left: 40px;
		padding-right: 40px;
		border-top: 1px solid #3e5267;
		border-bottom: 1px solid #3e5267;
    background-color: #999999;
    overflow: auto;
}

#footer_left {
	margin:7px;
	margin-left:20px;
	float:left;
}
#footer_right {
	float:right;
	margin:7px;
	margin-right:20px;
}

#title {
	position:absolute;
	top:30px;
	left:80px;
	padding-top:10px;
	padding-left:20px;
	padding-right:10px;
	width:230px;
	height:200px;
	color: #3e5267;
	background-color: #ffffff99;
	border-radius: 25px;
}
#commands{
	position: absolute;
	top: 20px;
	padding: 0px;
	margin-left: 10px;
	left:418px;
	width:300px;
	height:220px;
	color: #222222;
	font-size: 11pt;
  overflow: auto;
	border-radius: 25px;
}
ul {
	padding-top:0px;
	padding-left:30px;
	list-style: none;
}
li {
	padding-left: -10px;
	min-height:36px;
	vertical-align: text-bottom;
}

a {
	text-decoration : bold;
	color : #666666;
}
a:Hover {
	text-decoration : bold underline;
	color : #3e5267;
}

h3,p{
	margin:0;
	padding:0;
}

h3 {
	font-style: bold;
	font-size: 16pt;
	color: #3e5267;
}
input.inputText {
	height:15pt;
	width:50px;
	font-family: handlee;
	font-size:12pt;
	text-align: center;
	border: black 1px solid;
	margin-bottom: 2px;
}
button {
	height:40px;
	width: 200px;
	font-family: handlee;
	font-size:15pt;
	text-align: center;
	margin-bottom: 4px;
}
canvas {
	background: #ffffff;
}

#downloadButtons {
	float:left;
	margin-right: 10px;
	color:white;
}
#mainCanvas {
	float:left;
}

#divCM {
	background:aqua;
	width:1cm;
}


.customRadio input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.horiz{}
.verti{}

.customRadio input:active +.myRadioLabel{ }
.customRadio input:checked +.myRadioLabel{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.myRadioLabel{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:290px;height:63px;
		width:145px;
		width:90px;height:18pt;
		margin-left: -10px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
}

.myRadioLabel:hover{
}

.popup-kelly-color-custom {
	position : absolute;
	display : none;
	background-color : rgb(225, 225, 225);
	border : 1px solid rgb(191, 191, 191);
	box-shadow : rgba(0, 0, 0, 0.24) 7px 7px 14px -3px;
	border-radius : 4px;
	padding : 12px;
	box-sizing : content-box;
	left : 0px;
	bottom : 0px;
	border-radius: 110px;
	margin-left: -30px;
	margin-top: -10px;
}

#dotColor, #numberColor, #circleColor, #lineColor, #outerCircleColor {
	height:15pt;
	width:75px;
	font-family: handlee;
	font-size:12pt;
	text-align: center;
	border: black 1px solid;
	margin-bottom: 2px;
}
#mainImages {
	clear: both; 
	float: none;	
	display: block; 
	position: relative;
	padding-left:75px;
}
.extras{
	color:#3e5267;
	margin-bottom: 10px;
}

.extrasHeaders{
	color:#0b59a5;
	margin-left: -10px;
}
.helpers {
color : #3e5267;
}

li.imgs {
	color:#3e5267;
	margin-top:20px;
	height:auto;
}
img {
	border:black solid 1px;
	max-width: 600px;
	max-height: 600px;
}

img.img_small {
	border:black solid 1px;
	max-width: 200px;
	max-height: 200px;
}

div.rangeInputBox {
	width:100px;
	height: 100px;
	border: 1px black solid;
	overflow: hidden;
	background-color: #F2F2F2;
	background-image: url('boxRangeBackground.png');
	cursor: pointer;
	margin:10px;
}
img.rangeInputDot {
	background: none;
	border: none;
	margin: 0px;
	padding: 0px;
	width:10px;
	height:10px;
	position: relative;
	transition: left .2s cubic-bezier(.42,-0.3,.78,1.25), 
				top .2s cubic-bezier(.42,-0.3,.78,1.25);
}
li.rangeInputBox {
	height:120px;
	vertical-align: text-top;
}