body{
        margin:0px;
        padding:0px;
        font-family: 'Roboto Condensed', sans-serif;
        color:#333;
    }
    p {
        font-family: 'Roboto Condensed', sans-serif;
        margin:0px;
        padding:0px;
        font-size:12px;
        
    }
    
    ul {
        list-style-type: none;
    }
    
    h1 {
        font-family: 'Roboto Condensed', sans-serif;
        padding:10px;
        color:#333;
    }
    
    
    
    .alignleft {
        width:20%;
        display:inline-block;
        vertical-align:top;
        padding-top:30px;
        
    }
    
    .alignleft1 {
        display:inline-block;
        vertical-align:top;
        padding-top:30px;
        
    }
    
    
    #page {
	width:100%;
	
    }
    
    .text-input {
        width:60%;
        height:40px;
        background-color: #ccc;
        font-size: 40px;
        display:inline-block;
        padding:0px;
        margin:0px;
        vertical-align: top;
    }
    
    .form-button {
        width:10%;
        height:40px;
        background-color: #666;
        font-size: 20px;
        margin:0px 0px 0px 10px;
        display:inline-block;
        padding:0px;
        vertical-align: top;
    }
    
    .highlight-color {
       /*border: 5px solid red;
       background-color: red;  */
       box-shadow: 0px 0px 20px #000;
    }
    
    
    .bgcolor {
        background-color: #666;
    }
	
	.color-box-body, .color-box-eye, .color-box-left-arm, .color-box-right-arm, .color-box-left-foot, .color-box-right-foot {
	display:inline-block;
	vertical-align:middle;
	width:20px;
	height:20px;
	margin:5px;
	border: 1px solid #fff;
	
}

 #help-popup1 {
    position: absolute;
    z-index:20;
    top:220px;
    left:0px;
    width:245px;
    height:231px;
    background-image: url('../images/help-popup1.png');
    background-repeat: no-repeat;
 }
 
 #help-popup1 div {
    padding:0px;
    margin:50px 0px 0px 110px;
    width:120px;
    line-height: 21px;
    font-size: 18px;
 }
 
   #help-popup2 {
    position: absolute;
    z-index:20;
    top:100px;
    right:0px;
    width:245px;
    height:231px;
    background-image: url('../images/help-popup2.png');
    background-repeat: no-repeat;
 }
 
 #help-popup2 div {
    padding:0px;
    margin:60px 0px 0px 30px;
    width:100px;
    line-height: 21px;
    font-size: 18px;
 }
 
.border1 {
	border:0px solid #333;
}


a {
	font-size: 20px;
	color:red;
	text-decoration:none;	
}
 
 a:hover {
	color:#da860e;
	text-decoration:none;	
}
   
/*ui connceting color 
-----------------------------------*/

.ui-color1 {
	color:#F60;
}
.ui-color2 {
	color:#b50511;
}
.ui-color3 {
	color:#058ab5;
}
.ui-color4 {
	color:#057417;
}



	
    
/*the monster
-----------------------------------*/
    
    #the-monster-animate {
        position: absolute;
    left:0px;
    bottom:0px;
    padding-left:0px;
	width:550px;
	overflow:hidden;
	
	z-index: 10;
	
}
    
                                      
    #the-monster {
        position: relative;
    width:476px;
    bottom:0px;
    margin:20px auto 0px auto;
    padding-left:0px;
   
   min-height:570px;
    display:block;
}


.monster-body {
    position: absolute;
    top:114px;
    left:132px;
    z-index:10;
    width:217px;
    height:333px;
    background-color: #fff;
}

.monster-eye {
    position: absolute;
    top:16px;
    left:180px;
    z-index:8;
    width:145px;
    height:97px;
   
}

.monster-emotion {
    position: absolute;
    top:205px;
    left:180px;
    z-index:12;
    width:111px;
    height:81px;
   
}


.monster-left-arm {
    position: absolute;
    top:246px;
    left:34px;
    z-index:9;
    width:117px;
    height:193px;

}


.monster-right-arm {
    position: absolute;
    top:241px;
    left:315px;
    z-index:9;
    width:133px;
    height:186px;
    
}


.monster-right-foot {
    position: absolute;
    top:430px;
    left:235px;
    z-index:8;
    width:188px;
    height:117px;

}

.monster-left-foot {
    position: absolute;
    top:430px;
    left:80px;
    z-index:8;
    width:138px;
    height:103px;
    
}


/* skin parts
 * -------------------------------------*/

 
 .skin-css-container {
    width:98%;
    height:80px;
    padding:0px;
    margin:0px 0px 10px 5px;
    background-color:#333;
    overflow: hidden;
 }
 .skin-css-title-container {
    width:30%;
    height:70px;
    padding:0px;
    margin:0px;
    float:left;
 }
 
 
 .skin-css-title {
    font-size:15px;
    padding:10px;
    margin-bottom:0px;
    background-color:#fff;
 }
 
 .skin-css-property {
    width:65%;
    min-height:20px;
    margin: 0px 0px 0px 0px;
    padding:5px;
    color:#fff;
   float:right;
 }
 
 .skin-color {
	background-color:#fff; 
 }
 
 .option-button {
    display:inline-block;
    padding:0px;
    margin:0px;
    
 }
 
 .option-button li {
    display:inline-block;
    padding:3px;
    margin:0px 0px 0px 5px;
	border:1px solid #fff;
    
 }
 
 .option-button li a {
   
   color:#fff;
	text-decoration:none;
    
 }
 
 .option-button li a:hover {
   
   color:#ccc;
	text-decoration:none;
    
 }
  /*load the monster
----------------------------------------*/

#load-monster {
    width:300px;
    height:100px;
    position: absolute;
    top:100px;
    left:50%;
    margin:0px auto auto -150px;
    padding:20px;
    z-index:999;
    box-shadow: 0px 0px 18px #000;
    border:0px solid #333;
    border-radius:20px; 
	background-color:#fff;
}
 
 #load-monster div {
    width:200px;
    height:50px;
    position: relative;
    top:20px;
    left:50%;
    margin:0px auto auto -100px;
    padding:0px;
    z-index:999;
	text-align:center;
}

 #load-monster a {
	 font-size:24px;
	 text-decoration: none;
    color:red;
    padding:0px;

}
 
 /*build the brain components
----------------------------------------*/

#the-brain {
    width:100%;
    height:500px;
    position: absolute;
    top:130px;
    left:0px;
    
    padding:0px;
    z-index:999;
    box-shadow: 0px 0px 18px #000;
    border:0px solid #333;
    border-radius:0px; 
background-image: url('../images/brain-background-popup.png');
background-repeat: no-repeat;
background-position: top center;
}

.brain-inner-wrapper {
    position: relative;
    
}
.faded-background {
    background-color: #ccc;
    position: absolute;
    width:100%;
    opacity: 0.6;
    z-index: 1;
}


.mouth {
    width:111px;
    height:81px;
    position:absolute;
    top:92px;
    left:50%;
    margin:0px auto auto -62px;
    z-index: 2;
    
}

.brain-close-button {
    
    width:170px;
    position:absolute;
    top:430px;
    left:50%;
    margin:0px auto auto -310px;
    z-index: 2;
    font-size:16px;
    font-weight: 700;
    padding:10px;
    background-color:#e1b109;
	border:0px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #888888; 
	
	
}

.brain-close-button a {
    
    color: #333;
	text-decoration:none;
	
	
}

.brain-text1a {
    
    width:250px;
    position:absolute;
    top:110px;
    left:50%;
    margin:0px auto auto -310px;
    z-index: 2;
    font-size: 40px;
    font-weight: 700;
}

.brain-text1b {
    
    width:350px;
    position:absolute;
    top:110px;
    left:50%;
    margin:0px auto auto 90px;
    z-index: 2;
    font-size: 40px;
    font-weight: 700;
}

.brain-text2 {
    
    width:800px;
    position:absolute;
    top:210px;
    left:50%;
    margin:0px auto auto -310px;
    z-index: 2;
    font-size: 30px;
    font-weight: 700;
}


.brain-text3{
    
    width:800px;
    position:absolute;
    top:280px;
    left:50%;
    margin:0px auto auto -310px;
    z-index: 2;
    font-size: 30px;
    font-weight: 700;
}


.brain-text4{
    width:800px;
    position:absolute;
    top:350px;
    left:50%;
    margin:0px auto auto -310px;
    z-index: 2;
    font-size: 30px;
    font-weight: 700;
}


.brain-buttons {
    position:absolute;
    top:40px;
    left:50%;
    margin:0px auto auto -74px;
  
}

 .option-brain-button {
    display:inline-block;
    padding:0px;
    margin:0px;
    
 }
 
 .option-brain-button li {
    display:inline-block;
    padding:0px;
    margin:0px 0px 0px 0px;
	border:1px solid #333;
    height:41px;
    vertical-align: middle;
 }
 
 .option-brain-button li a {
   
   color:#fff;
	text-decoration:none;
    
 }
 
 .option-brain-button li a:hover {
   
   color:#ccc;
	text-decoration:none;
    
 }
 
 form {
    display: inline-block;
    vertical-align: top;
 }
 
input, textarea, select, button {
  width : 170px;
  margin: 0;
background-color:#ccc;
font-size:25px;
vertical-align: middle;
font-weight: 700;

}
 
 #brain-popup-button {
    position: absolute;
    z-index:20;
    top:20px;
    left:50%;
    margin:0px auto auto -22px;
    width:245px;
    height:231px;
    background-image: url('../images/brain-popup-button.png');
    background-repeat: no-repeat;
 }
 
 
 #brain-popup-button div {
    padding:8px;
    margin:20px 0px 0px 100px;
    width:100px;

 }
 
 #brain-popup-button a {
    font-size:16px;
    font-weight: 700;
	line-height: 21px;
    padding:0px;
	color:red;
	text-decoration:none;
 }
 
 .red-highlight {
	color:red;
 }
    
/* skeleton parts
 * -------------------------------------*/

 
 .skeleton-bar {
    font-size: 15px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:5px 0px 5px 20px;
    
 }
 .skeleton-bar img, .skeleton-bar-body img {
    vertical-align: middle;
    
 }
 
  .skeleton-bar-body {
    font-size: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:10px 0px 5px 10px;
    
 }
 
 
 
 .draggable-skeleton-parts {
    margin-left:10px;
    
 }
 
 
    
/*---------------------------------------
container elements
 ----------------------------------------*/
    #page    {
        width:100%;
        margin:0px auto 0px auto;
        padding:0px;
    }
    
    .col-20 {
         width:25%;
          
        display: inline-block;
        margin:0px 0px 0px -4px;
        vertical-align:top;
    }
    
    
    .col-60 {
        width:50%;
        min-height: 700px;
        vertical-align:top;
        display: inline-block;
        margin:0px 0px 0px -4px;
        border-left:1px solid #333;
        border-right:1px solid #333;
	position: relative;
    }
    

    


/*build the monster components
----------------------------------------*/

#draggable-body, #draggable-eye1, #draggable-eye2, #draggable-arms1, #draggable-arms2, #draggable-foot1, #draggable-foot2 {

    margin:0px 0px 2px 0px;
    padding:0px;
    border:1px solid #333;
    display:inline-block;
    vertical-align:top;
    position: relative;
    z-index:99;
}

.build-skeleton {
    width:100%;
    background-color:#fff;
    margin:0px 0px 10px 0px;
    padding:0px;
}

.add-skeleton-body {
        background-color:#fff;
        width:100%;
     padding-left:0px;
     min-height:50px;
    margin:0px 0px 0px 0px;
		border-bottom:1px solid #333;
    display:block;
}

.add-skeleton-eye {
    width:100%;
    min-height:35px;
    padding-left:0px;
    margin:0px 0px 0px 0px;
  background-color:#fff;
	border-bottom:1px solid #333;
		
    display:block;
}

.add-skeleton-left-arm, .add-skeleton-right-arm, .add-skeleton-right-foot, .add-skeleton-left-foot {
    width:100%;
    min-height:35px;
    padding:0px;
    margin:0px 0px 0px 0px;
    background-color:#fff;
	border-bottom:1px solid #333;
    display:block;
}




.ui-droppable {
	padding:0px;
	margin:0px;	
}
.ui-state-hover {
    background-color:#ccc;
	padding:0px;
	margin:0px;
}
.ui-state-default {
    background-color:blue;
}

.ui-state-highlight{
    background-color:purple;
}

.ui-state-active {
    background-color:#909090;
    
}
  
.ui-selected {
    background-color:#e1b109;
    
}


/* landscape 
-----------------------------------*/


.landscape-popup {
     position: relative;
     width:180px;
     height:106px;
     z-index:50;
     padding:50px;
     background-image: url('../landscape/landscape-popup.png');
     background-repeat: no-repeat;
     
}

.warning-popup {
     position: relative;
	 margin:0px auto auto -180px;
	 left:50%;
	 top:40px;
     width:180px;
     height:106px;
     z-index:50;
     padding:50px;
     background-image: url('../landscape/landscape-popup.png');
     background-repeat: no-repeat;
     
}


.popup-text {
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
     margin:0px;
     padding:0px;
     
}

.grass1 {
     position: absolute;
     bottom:5px;
     left:0px;
     width:640px;
     height:161px;
     z-index:20;
     
}

.tree1 {
     position: absolute;
     bottom:5px;
     right: 0px;
     width:405px;
     height:573px;
     z-index:19;
     
}

.apple1 {
     position: absolute;
    
     bottom:250px;
     right: 275px;
     width:40px;
     height:62px;
     z-index:20;
     
}

.bird {
     position: absolute;
     bottom:5px;
     left: 435px;
     width:106px;
     height:97px;
     z-index:21;
     
}


.bush {
     position: absolute;
     bottom:5px;
     left: 435px;
     width:130px;
     height:143px;
     z-index:21;
     
}

.bee1 {
     position: absolute;
     bottom:400px;
     left: 500px;
     width:34px;
     height:64px;
     z-index:21;
     -webkit-animation-name:bee1;
	-webkit-animation-duration:1s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
     
}
.bee2 {
     position: absolute;
     bottom:420px;
     left: 540px;
     width:34px;
     height:64px;
     z-index:21;
     -webkit-animation-name:bee2;
	-webkit-animation-duration:2s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
     
}
.bee3 {
     position: absolute;
     bottom:480px;
     left: 510px;
     width:34px;
     height:64px;
     z-index:21;
          -webkit-animation-name:bee3;
	-webkit-animation-duration:1s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
     
}

/* animation parts
 * --------------------------------------*/



@-webkit-keyframes bee1 {
 0%   {bottom:400px; left:500px;}
 25% {bottom:420px; left:520px;}
 50% {bottom:440px; left:520px;}
100%   {bottom:400px; left:500px;}
}

@-webkit-keyframes bee2 {
 0%   {bottom:420px; left:540px;}
 25% {bottom:460px; left:580px;}
 50% {bottom:460px; left:500px;}
100%   {bottom:bottom:420px; left:540px;}
}  

@-webkit-keyframes bee3 {
 0%   {bottom:480px; left:510px;}
 25% {bottom:470px; left:500px;}
 50% {bottom:470px; left:520px;}
100%   {bottom:480px; left:510px;}
}
   
.jump-left-arm{
-webkit-animation-name:jump-left-arm;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
    
.jump-right-arm{
-webkit-animation-name:jump-right-arm;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
.jump-left-foot{
-webkit-animation-name:jump-left-foot;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
    
.jump-right-foot{
-webkit-animation-name:jump-right-foot;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.jump-body{
-webkit-animation-name:jump-body;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.jump-eye {
-webkit-animation-name:jump-eye;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.jump-mouth {
-webkit-animation-name:jump-mouth;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes jump-left-arm {
 0%   {top:246px; left:34px; -webkit-transform: rotate(0deg);}
 50% {top:170px; left:0px; -webkit-transform: rotate(60deg);}
100%   {top:246px; left:34px; -webkit-transform: rotate(0deg);}
}


@-webkit-keyframes jump-right-arm {
 0%   {top:241px; left:315px; -webkit-transform: rotate(0deg);}
 50% {top:150px; left:355px; -webkit-transform: rotate(-60deg);}
100%   {top:241px; left:315px; -webkit-transform: rotate(0deg);}
}

@-webkit-keyframes jump-left-foot {
 0%   {top:430px; left:80px;}
 50% {top:410px; left:80px;}
100%   {top:430px; left:80px;}
}

@-webkit-keyframes jump-right-foot {
 0%   {top:430px; left:235px;}
 50% {top:390px; left:235px;}
100%   {top:430px; left:235px;}
}

@-webkit-keyframes jump-body {
 0%   {top:114px; left:132px;}
 50% {top:84px; left:132px;}
100%   {top:114px; left:132px;}
}

@-webkit-keyframes jump-eye {
 0%   {top:16px; left:180px; -webkit-transform: rotate(0deg);}
 50% {top:-15px; left:180px; -webkit-transform: rotate(10deg);}
100%   {top:16px; left:180px; -webkit-transform: rotate(0deg);}
}

@-webkit-keyframes jump-mouth {
 0%   {top:205px; left:180px;}
 50% {top:175px; left:180px;}
100%   {top:205px; left:180px;}
}




.dance-left-arm{
-webkit-animation-name:dance-left-arm;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
    
.dance-right-arm{
-webkit-animation-name:dance-right-arm;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
.dance-left-foot{
-webkit-animation-name:dance-left-foot;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}
   
    
.dance-right-foot{
-webkit-animation-name:dance-right-foot;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.dance-body{
-webkit-animation-name:dance-body;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.dance-eye {
-webkit-animation-name:dance-eye;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

.dance-mouth {
-webkit-animation-name:dance-mouth;
-webkit-animation-duration:3s;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes dance-left-arm {
 0%   {top:246px; left:34px; -webkit-transform: rotate(0deg);}
 25% {top:226px; left:20px; -webkit-transform: rotate(35deg);}
 50%   {top:246px; left:34px; -webkit-transform: rotate(0deg);}
 75% {top:246px; left:30px; -webkit-transform: rotate(-10deg);}
100%   {top:246px; left:34px; -webkit-transform: rotate(0deg);}
}


@-webkit-keyframes dance-right-arm {
 0%   {top:241px; left:315px; -webkit-transform: rotate(0deg);}
 25% {top:241px; left:290px; -webkit-transform: rotate(25deg);}
50%   {top:241px; left:315px; -webkit-transform: rotate(0deg);}
75% {top:180px; left:355px; -webkit-transform: rotate(-45deg);}
100%   {top:241px; left:315px; -webkit-transform: rotate(0deg);}
}

@-webkit-keyframes dance-left-foot {
 0%   {top:430px; left:80px;}
 25% {top:410px; left:90px;}
 50%   {top:430px; left:80px;}
  75% {top:440px; left:60px;}
100%   {top:430px; left:80px;}
}

@-webkit-keyframes dance-right-foot {
 0%   {top:430px; left:235px;}
 25% {top:440px; left:225px;}
  50%   {top:430px; left:235px;}
75%   {top:430px; left:255px;}
100%   {top:430px; left:235px;}
}

@-webkit-keyframes dance-body {
 0%   {top:114px; left:132px;}
 25% {top:105px; left:140px;}
 50%   {top:114px; left:132px;}
  75% {top:105px; left:120px;}
100%   {top:114px; left:132px;}
}

@-webkit-keyframes dance-eye {
 0%   {top:16px; left:180px; -webkit-transform: rotate(0deg);}
 25%   {top:-5px; left:170px; -webkit-transform: rotate(-5deg);}
 50% {top:16px; left:180px; -webkit-transform: rotate(0deg);}
 75%   {top:-5px; left:160px; -webkit-transform: rotate(5deg);}
100%   {top:16px; left:180px; -webkit-transform: rotate(0deg);}
}

@-webkit-keyframes dance-mouth {
 0%   {top:205px; left:180px;}
 25% {top:185px; left:190px;}
 50% {top:205px; left:180px;}
 75% {top:185px; left:165px;}
100%   {top:205px; left:180px;}
}

/*
 *
 *top:205px;
    left:180px;
 *
 *  top:114px;
    left:132px;
    
 *.monster-right-foot {
    position: absolute;
    top:430px;
    left:235px;
    z-index:8;
    width:188px;
    height:107px;

}

.monster-left-foot {
    position: absolute;
    top:430px;
    left:80px;
    z-index:8;
    width:138px;
    height:103px;
    */