@font-face {
    font-family: 'cantarellbold';
    src: url('fonts/cantarell-bold-webfont.eot');
    src: url('fonts/cantarell-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cantarell-bold-webfont.woff') format('woff'),
         url('fonts/cantarell-bold-webfont.ttf') format('truetype'),
         url('fonts/cantarell-bold-webfont.svg#cantarellbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'the_mix_bold-bold';
    src: url('fonts/themix_bold_plain-webfont.eot');
    src: url('fonts/themix_bold_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/themix_bold_plain-webfont.woff') format('woff'),
         url('fonts/themix_bold_plain-webfont.ttf') format('truetype'),
         url('fonts/themix_bold_plain-webfont.svg#the_mix_bold-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

#app_container {
	font-family: "the_mix_bold-bold", Arial, Verdana, Helvetica, serif;
	font-weight: normal;
	position: relative;
	display: block;
	width: 440px;
	height: 465px; 
	margin-left: auto;
	margin-right: auto;
  	margin: 30px auto 30px auto;	
}

#app_container form {
	position: absolute;
	bottom: 0px;
	left: 50px;
	width: 340px;
}

#addNameBox, #editNameBox{
	//display: none;	
	position: absolute;
	top: 175px;
	left: 35px;

}

#addNameBox form, #editNameBox form{
	display: none;
	-webkit-box-shadow:  3px 3px 3px 4px rgba(173, 169, 169, 0.5);
	box-shadow:  3px 3px 3px 4px rgba(173, 169, 169, 0.5);
}

#app_container #addNameForm, #app_container #editNameForm {
	width: 225px;
	border-radius: 3px;
	background-color: #FFF;
	padding: 15px 15px;
}

#controls {
	margin-right: 50px;
	width: 400px;
}

#controls a {
	text-decoration: none;
}

#selectBrown {
	color: brown;
}

#addName {
	width: 111px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: white;
	border-radius: 3px;
	border: 0px;
	background: #0066A1; 
}

#canvasWide #addName { 
	background: #ED8424;	
}

#addName:hover {
	background: #343434; /* Old browsers */
	cursor: pointer;
}

#canvasWide #addName:hover{
	background: #343434;
}


#clear {
	width: 111px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: white;
	border-radius: 3px;
	background: #666666; 
	border: 0px;
}

#clear:hover {
	background: #343434; /* Old browsers */
	cursor: pointer;
}

#generateImage {
	width: 111px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: white;
	border-radius: 3px;
	background: #0066A1;
	border: 0px; 
}

#canvasWide #generateImage{
	background:#ED8424;
}

#addName, #clear, #generateImage {
	font-family: "the_mix_bold-bold", Arial, Verdana, Helvetica, serif;
	font-weight: normal;
}

#generateImage:hover {
	cursor: pointer;
	background: #343434; 
}

#canvasWide #generateImage:hover {
	background: #343434; 
}

#name, #newName {
	width: 90px;
	float: left;
	margin-right: 5px;
	height: 19px;
}

#canvasWide #name, #canvasWide #newName {
	height: 15px;
}

#strokeStyleSelect, #newStrokeStyleSelect {
	float: left;
	width: 71px;
	height: 21px;
	margin-right: 5px;
}

#nameSubmit, #editNameBox #nameEdit {
	float: left;
	width: 44px;
	color: white;
	font-weight: bold;
	border-color: #b4ddb4;
	border-radius: 3px;
	border: 0px;
	background: #0066A1; 
	font-family: "the_mix_bold-bold", Arial, Verdana, Helvetica, serif;
	font-weight: normal;
	font-size: 11px;
}

#canvasWide #nameSubmit, #canvasWide #editNameBox #nameEdit {
	background: #ED8424;
}

#nameSubmit:hover, #editNameBox #nameEdit:hover {
	cursor: pointer;
	background: #343434; 
}

#canvasWide #nameSubmit:hover, #canvasWide #editNameBox #nameEdit:hover {
	background: #343434;
}

#exitAddName, #exitEdit {
	background-image: url("plp_public_login_sprite1.png");
    background-position: -151px -376px;
    cursor: pointer;
    display: block;
    height: 37px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 37px;
}

#canvasWide #exitAddName, #canvasWide #exitEdit{
	/*background-image: url("plp_public_login_sprite.png");*/
    background-position: -144px -221px;
   /* cursor: pointer;
    display: block;
    height: 37px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 37px;*/
}

#canvasWide #exitAddName:hover,  #canvasWide #exitEdit:hover {
	background-position: -144px -258px;
}

#select_red, #edit_red {
	color: red;
}

#select_green, #edit_green {
	color: green;
}

#select_orange, #edit_orange {
	color: orange;
}

#testP {
	display: none;
}

#dot_tip {
   	position: absolute; 
   	top:  23px;
   	left: 70px;
   	color: darkgreen;
}

#dloader html body{
	font-family: "the_mix_bold-bold", Arial, Verdana, Helvetica, serif;
	font-weight: normal;
}