/* global styles */
html,body {

        height:100%;
        min-height:100%;
      }

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
     position:fixed;
     width:100%;
    height:100%;
}

   body{
        margin:0px;
        padding:0px;
        font-family: 'Lato', sans-serif;
        color:#333;
	font-size:18px;
          overflow:hidden;
    }
	
	
    p {
        font-family: 'Lato', sans-serif;
        margin:0px;
        padding:0px;
        font-size:14px;
        
    }
    
    ul {
        list-style-type: none;
    }
    
    h1 {
        font-family: 'Lato', 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;
        
    }
    
    
    
    .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;
    }
    
   
     

 
input, textarea, select, button {
  width : 170px;
  margin: 0;
background-color:#ccc;
font-size:25px;
vertical-align: middle;
font-weight: 700;

}
 
     #page    {
        width:100%;
		height:100%;
        margin:0px auto 0px auto;
        padding:0px;
		overflow:hidden;
    }



/* links */

a {
	color:red;
	text-decoration:none;	
}
 
 a:hover {
	color:#333;
	text-decoration:none;	
}
   

/* ----------------------------------
THE HOME PAGE elements 
-------------------------------------*/

 .home-image{
	position:absolute;
	bottom:0px;
	left:0px;
	margin:0px;
	padding:0px;
	  
  }
  
  .home-build-button {
	width:225px;
	height:100px;  
	box-shadow:5px 5px 10px #333;
	position:absolute;
	bottom:450px;
	left:620px;
	margin:0px;
	padding:0px;
	background-color:#a2f8d5;
  }
  
  .home-button-text {
	font-size:34px;
	text-align:center;
	padding-top:30px;  
  }
  
  
  
/* ----------------------------------
THE BUILD PAGE elements 
-------------------------------------*/

.start-build-button {

width:30%;
font-size:50px;
text-align:center;
background-color:#333;
padding:40px;
margin:100px auto 0px auto;
    box-shadow: 0px 0px 15px #000;
    position: relative;
    
}


.click-left {
    
    position: absolute;
    left:0px;
    top:100px;
    
    display: none;
    
    
}
.click-right {
    
    position: absolute;
    right:0px;
    top:100px;
    display: none;
    
}

.click-colour {
    
    position: absolute;
    bottom:0px;
    left:50%;
    transform: translateX(-50%);
    display: none;
    
}

.start-build-button a {
    
    color:#fff;
    
}
 


.next-page-button {
    display: none;
position:absolute;
right:0px;
bottom:0px;
width:150px;
min-height:20px;
background-color:#333;
padding:30px;
margin:0px auto 0px auto;
box-shadow: 0px 0px 15px #000;
z-index: 999;
}

.next-page-button a { 
    color:white;
}
	
/* build the monster container elements */
    .col-secondary {
         width:100%;
          height: 15%;
        float:left;
        vertical-align:top;
		background-color:#a2f8d5;
        border-top: 1px solid #333;
		overflow:auto;
		color:#333;
		
    }
	
	.col-secondary-padding {
		padding:20px;	
	}
    
	.col-secondary-middle {
         width:50%;
          height: 15%;
        display: inline-block;
        vertical-align:top;
		
		overflow:auto;
	
    }
	
	.margin-fix {
		margin:0px 0px 0px -4px;
	}
    
    .col-main {
        width:100%;
        height: 85%;
        vertical-align:top;
        display: block;
        margin:0px 0px 0px 0px;
	position: relative;
	background-color:#FFF;
    }
	
	.col-right {
		position:absolute;
		right:0px;
		width:85px;
		max-width:15%;
		background-color:#FFF;
		top:0px;
	
			
	}
    
	.col-left {
		position:absolute;
		left:0px;
		width:85px;
		max-width:15%;
		background-color:#FFF;
		top:0px;
		
			
	}
    


/*build the monster ui components */

.drag-block {
	
	min-width:10px;
    margin:0px 0px 0px 0px;
    padding:0px;
 
    display:block;
	top:0px;
    position: absolute;
    
}

#rotatable-part {
	border:0px solid #333;
}


#clickable-part {
	width:100%;

    margin:0px 0px 0px 0px;
    padding:0px;
    border:0px solid #333;
    display:block;
    position: relative;
    z-index:99;
}

#clickable-part img {

    width:100%;
	height:auto;
}

#monster-body {
	width:217px;
    margin:0px 0px 0px 0px;
    padding:0px;
    /*border:1px solid #333;*/
    display:block;
	top:100px;
	left:50%;
	margin:0px auto auto -108px;
    position: absolute;
    z-index:1;
}

#build-monster {
    width:700px;
	height:100%;
    border-left:1px solid #666;
     border-right:1px solid #666;
    margin:0px auto 0px auto;
    padding:0px;
	position:relative;
	overflow:hidden;
}



   
/*build ui selected, drag, rotate, click components  
-----------------------------------*/

 .red-highlight {
	color:red;
 }
    
	 .highlight-color {
       /*border: 5px solid red;
       background-color: red;  */
       box-shadow: 0px 0px 20px #000;
    }
	
.border1 {
	border:0px solid #333;
}

.ui-selected { border:1px solid #333; }

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

.ui-cssmenu {
    height: 110px;
    width: 105px;

	z-index:999;
	position: absolute; 
	left:-90px; 
	bottom: 36px;
	 visibility:hidden;
         background-color:#fff;
         padding:10px;
         border:1px solid #666;

}

.ui-cssmenu-below {
    min-height: 60px;
    width: 100%;
    
     overflow: hidden;
     padding:0px;
     margin:1% 0px 0px 0px;

}

.ui-cssmenu-below ul {
    text-align: center;

}

.ui-cssmenu-below li {
    height: 70px;
    width: 70px;
    cursor: pointer;
    display:inline-block;
    margin:0px 0px 0px 5px;
    padding:0px 0px 0px 0px;
    border:1px solid #333;
}

.layerBelow {
     z-index:900;
}

.layerAbove {
     z-index:999;
}

.on {
    visibility:visible;
    

}

.ui-cssmenu-button {
    height: 45px;
    width: 45px;
    cursor: pointer;
    background-color:#fff;
    display:inline-block;
    margin:0px 5px 0px 0px;
    padding:0px;
     box-shadow: inset 0px 0px 15px #888888;
     background-image: url(../images/cssmenu-btn.png);
     background-repeat:no-repeat;
     vertical-align:bottom;
	  opacity:0.4;
		-webkit-transition: opacity 0.5s linear; /* For Safari 3.1 to 6.0 */
   		transition: opacity 0.5s linear;
    /*position:absolute;
    z-index:10;
    top:0px;*/
}

.ui-cssmenu-button:hover {
	opacity:1.0;
}


.ui-delete-button {
    height: 45px;
    width: 45px;
    cursor: pointer;
    background-color:#fff;
    display:inline-block;
    margin:0px 5px 0px 0px;
    padding:0px;
     box-shadow: inset 0px 0px 15px #888888;
     background-image: url(../images/delete-btn.png);
     background-repeat:no-repeat;
     vertical-align:bottom;
	 
	 opacity:0.4;
		-webkit-transition: opacity 0.5s linear; /* For Safari 3.1 to 6.0 */
   		transition: opacity 0.5s linear;
    /*position:absolute;
    z-index:10;
    top:0px;*/
}

.ui-delete-button:hover {
	opacity:1.0;
}


.ui-cssmenu-close {
    height: 55px;
    width: 55px;
    cursor: pointer;
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:#d9d9d9;
    background-image: url(../images/delete-btn.png);
     background-repeat:no-repeat;
     position:50% 50%;
}

.ui-cssmenu-skin1, .ui-cssmenu-skin2 {
    height: 55px;
    width: 55px;
    cursor: pointer;
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:#d9d9d9;
}



.ui-cssmenu-color1 {
    background-color:yellow;
}
.ui-cssmenu-color2 {
    background-color:orange;
}

.ui-cssmenu-color3 {
    background-color:#e22323;
}

.ui-cssmenu-color4 {
    background-color:#d723e2;
}
.ui-cssmenu-color5 {
    background-color:#23aae2;
}

.ui-cssmenu-color6 {
    background-color:green;
}


.ui-cssmenu-skin1 {
    background-image: url(../images/skin-fur-btn.png);
     background-repeat:no-repeat;
}

.ui-cssmenu-skin2 {
    background-image: url(../images/skin-scale-btn.png);
     background-repeat:no-repeat;
}



.ui-rotatable-handle {
    height: 45px;
    width: 45px;
    cursor: pointer;
    background-image: url(../images/rotate-btn.png);
     background-repeat:no-repeat;
     box-shadow: inset 0px 0px 15px #888888;
    /*background-size: 100%;
    left: 2px;
    bottom: 2px;*/
	display:inline-block;
	vertical-align:bottom;
	
	opacity:0.4;
		-webkit-transition: opacity 0.5s linear; /* For Safari 3.1 to 6.0 */
   		transition: opacity 0.5s linear;
}

.ui-rotatable-handle:hover {
	opacity:1.0;
}


.ui-widget-content, .ui-draggable {
	padding:0px;
	margin:0px;	
}

.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;
    animation-name: pulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {background-color: #eaeaea;}
    50% {background-color: #999999;}
    100% {background-color: #eaeaea;}
}

-webkit-@keyframes pulse {
    0% {background-color: #eaeaea;}
    50% {background-color: #999999;}
    100% {background-color: #eaeaea;}
}

/* ----------------------------------
THE BRAIN PAGE elements 
-------------------------------------*/


#page-brain {
	width:100%;
	height:100%;
	position: absolute;
	padding:0px;
	margin:0px;
	overflow: hidden;
}

.container-brain {
	width:100%;
	padding:0px;
	margin:0px;
	overflow:hidden;
	position:relative;
	display:block;
}


.nav-next {
	width:20%;

	background-color:#fff;
	position:fixed;
	top:250px;
	right:0px;
	margin: 0px;
	padding:30px;
	z-index:10;
	font-size:30px;
	box-shadow: 0px 0px 10px #333;
}

.night-day-text {
	width:30%;

	background-color:#fff;
	position:absolute;
	top:30px;
	left:50%;
	margin: 0px auto auto -18%;
	text-align:center;
	padding:30px;
	z-index:10;
	font-size:30px;
}

.nighttime-choice {
float:right;
width:50%;
min-height:600px;
position:relative;
background-color:#105d68;	
padding:0px;
margin:0px;
}

.daytime-choice {
float:left;
width:50%;
min-height:600px;
position:relative;
background-color:#4cddf3;	
padding:0px;
margin:0px;
}

.moon {
 width:100%;
 text-align:center;
 height:170px;
 padding:0px;
margin:0px;
position:absolute;
bottom:0px;
left:0px;
}


.sun {
 width:100%;
 text-align:center;
 height:200px;
 padding:0px;
margin:0px;
position:absolute;
bottom:0px;
left:0px;
}

.col {
width:32.6%;
min-height:700px;
position:relative;
background-color:#a2f8d5;	
padding:0px;
margin:0px;
}

.col-flex {
	margin:10px 0px 0px 0px;
	display: -webkit-flex;
        display: -moz-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
}


.content-pos {
position:absolute;
top:150px;
left:0px;
width:100%;
min-height:300px;

}

.row {
	display:block;
	width:100%;
	padding:0px 0px 0px 0px;
	margin:0px 0px 20px 0px;
	overflow:hidden;
}

.choice-button {
	width:78px;
	height:77px;
	float:left;
	padding:4px;
	
}

.choice-button img {
	width:100%;
	height:auto;
	
}

/*type*/

.top-text {
 font-size:22px;
 margin-bottom:10px;
        padding: 0px 30px;
 font-weight:900;
        text-align: center;
}

.text-large {
 font-size:38px;
font-weight:900;
        text-align: center;
}
.padding1{
padding-left:0px;

}
.padding2{
padding-left:0px;

}
.red-bold {
 color:red;
 font-weight:bold;	
}

.yellow-bold {
 color:#e09d1b;
 font-weight:bold;	
}


#nav1, #nav2, #nav3 {
    
    font-size: 0em; /* fix the inline spacing */
    text-align: center;
}

#nav1 a, #nav2 a, #nav3 a {
    
    display: inline-block;
}

#the-build-part {
    
    cursor:move;
    
}

/* ----------------------------------
THE FINAL PAGE elements 
-------------------------------------*/
.top-nav {
   position:absolute;
right:0px;
top:0px;
width:400px;
min-height:20px;
background-color:#fff;
padding:0px;
margin:0px;
box-shadow: 0px 0px 15px #000;
z-index: 999;  
     
}
 
 .build-another {
     background-color:red;
     padding:20px;
     margin:0px;
     display: inline-block;
     vertical-align: top;
 }
  .build-another:active {
     background-color:#ccc;
 }
 
 .build-another a {
     color:#fff;
 }
  .add-apple {
    
     display: inline-block;
     vertical-align: top;
 }

.add-apple-padding{
	 padding-top:5px;
}


 .daytime {
    overflow:hidden;
      background-image: url(../landscape/background-sky-day.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: top left;
  }
  
  .nighttime {
    overflow:hidden;
      background-image: url(../landscape/background-sky-night.jpg);
    background-repeat: repeat;
  }
  
#newPart {
  position:absolute;
  z-index:20;
}
.container-final {
  width:700px;
    margin:0px auto;
    position:absolute;
    height:530px;
    bottom:-10px;
    overflow:hidden;
    z-index:11;
transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  animation: walk-animate linear 5s infinite;
  -webkit-animation: walk-animate linear 5s infinite;
}


.monster-mouth {
  width:111px;
  height:81px;
  margin:0px auto;
  position:absolute;
  top:220px;
  left:290px;
  z-index:999;
}
.move-btn {
  width:80px;
  height:80px;

  position: absolute;
  left:700px;
  bottom:10px;
  z-index: 999;
    cursor: default;
}

.move-btn1 {
  width:80px;
  height:80px;

  position: absolute;
  left:610px;
  bottom:10px;
  z-index: 999;
    cursor: default;
}

.move-btn1 img {
  transform: rotate(180deg);
}

.move-btn img, .move-btn1 img {
    cursor:pointer;
    width:100%;
    height: auto;
    
    
}

.moon-sun-container {
  width:220px;
  height:210px;
  position: fixed;
  top:20px;
  left:20px;
  z-index: 1;

}


/*day*/

.background {
  height:328px;
  position: absolute;
  left:0px;
  bottom:0px;
  z-index: 5;
}

.middle {
  height:440px;
  position: absolute;
  left:0px;
  bottom:0px;
  z-index: 10;

}

.foreground {
  height:593px;
  position: absolute;
  left:0px;
  bottom:0px;
  z-index: 15;

}


/*type*/

#speech-area {
  position: absolute;
  left:450px;
  top:100px;
  z-index: 15;
  width:100px;
  height:100px;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 80px;
  color:#fff;
  
}

/*objects*/

#apple1 {
  width:53px;
  height:53px;
  position: absolute;
  left:855px;
  top:260px;
  z-index: 15;
    cursor: pointer;
  /*transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: apple1-animate ease-in 3s infinite;
  -webkit-animation: apple1-animate ease-in 3s infinite;*/
}

#apple2 {
  width:53px;
  height:53px;
  position: absolute;
  left:2850px;
  top:215px;
  z-index: 15;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: apple2-animate ease-in 3s infinite;
  -webkit-animation: apple2-animate ease-in 3s infinite;
}

#apple3 {
  width:49px;
  height:33px;
  position: absolute;
  top:320px;
  left:90px;
  z-index: 15;
    cursor: pointer;
}

#balloon {
  
  width:238px;
  height:394px;
  position: absolute;
  left:1750px;
  top:-300px;
  z-index: 12;
transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: balloon-animate linear 5s infinite;
  -webkit-animation: balloon-animate linear 5s infinite;
  
}


#bee1 {
  
  width:43px;
  height:40px;
  position: absolute;
  left:1700px;
  top:350px;
  z-index: 12;
  cursor: pointer;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: bee1-animate ease-in 2s infinite;
  -webkit-animation: bee1-animate ease-in 2s infinite;
  
}


#bee2 {
  cursor: pointer;
  width:43px;
  height:40px;
  position: absolute;
  left:2300px;
  top:0px;
  z-index: 12;
  

   transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: bee2-animate linear 1s infinite;
  -webkit-animation: bee2-animate linear 1s infinite;
  
}

@keyframes walk-animate {
 0%   { transform: rotate(5deg);}
 50% {transform: rotate(-5deg);}
100%   {transform: rotate(5deg);}
}

@-webkit-keyframes walk-animate {
 0%   { -webkit-transform: rotate(5deg);}
 50% {-webkit-transform: rotate(-5deg);}
100%   {-webkit-transform: rotate(5deg);}
}

@keyframes apple1-animate {
 0%   { transform: rotate(0deg);}
 30% {transform: rotate(10deg);}
 60% {transform: rotate(-10deg);}
100%   {transform: rotate(0deg);}
}

@-webkit-keyframes apple1-animate {
 0%   { -webkit-transform: rotate(0deg);}
 30% {-webkit-transform: rotate(10deg);}
 60% {-webkit-transform: rotate(-10deg);}
100%   {-webkit-transform: rotate(0deg);}
}

@keyframes apple2-animate {
 0%   {transform: rotate(0deg); left:2850px; top:215px;}
 30% {transform: rotate(10deg); left:2870px; top:205px;}
 60% {transform: rotate(-10deg); left:2840px; top:225px;}
100%   {transform: rotate(0deg); left:2850px; top:215px;}
}
 
@-webkit-keyframes apple2-animate {
 0%   {-webkit-transform: rotate(0deg); left:2850px; top:215px;}
 30% {-webkit-transform: rotate(10deg); left:2870px; top:205px;}
 60% {-webkit-transform: rotate(-10deg); left:2840px; top:225px;}
100%   {-webkit-transform: rotate(0deg); left:2850px; top:215px;}
}
 
 
@keyframes balloon-animate {
 0%   {left:1750px; top:-300px;}
 25% {left:1775px;top:-320px;}
 50% { left:1680px;top:-320px;}
75% {left:1700px; top:-280px;}
100%   { left:1750px; top:-300px;}
 }
 
 @-webkit-keyframes balloon-animate {
 0%   {left:1750px; top:-300px;}
 25% {left:1775px;top:-320px;}
 50% { left:1680px;top:-320px;}
75% {left:1700px; top:-280px;}
100%   { left:1750px; top:-300px;}
 }
 
 @keyframes bee1-animate {
 0%   {transform: rotate(0deg); left:1700px; top:350px;}
 25% { transform: rotate(10deg); left:1705px; top:350px;}
 50% {transform: rotate(-10deg); left:1705px; top:355px;}
75% {transform: rotate(15deg); left:1700px; top:355px;}
100%   {transform: rotate(0deg); left:1700px; top:350px;}
 }
 
  @-webkit-keyframes bee1-animate {
 0%   {-webkit-transform: rotate(0deg); left:1700px; top:350px;}
 25% { -webkit-transform: rotate(10deg); left:1705px; top:350px;}
 50% {-webkit-transform: rotate(-10deg); left:1705px; top:355px;}
75% {-webkit-transform: rotate(15deg); left:1700px; top:355px;}
100%   {-webkit-transform: rotate(0deg); left:1700px; top:350px;}
 }
 
 
  @keyframes bee2-animate {
 0%   {transform: rotate(0deg); left:2700px; top:0px; }
 25% {transform: rotate(10deg); left:2705px; top:5px;}
 50% {transform: rotate(-10deg); left:2705px; top:0px;}
75% {transform: rotate(15deg); left:2700px; top:5px;}
100%   { transform: rotate(0deg); left:2700px; top:0px;}
 }
 
 @-webkit-keyframes bee2-animate {
 0%   {-webkit-transform: rotate(0deg); left:2700px; top:0px; }
 25% {-webkit-transform: rotate(10deg); left:2705px; top:5px;}
 50% {-webkit-transform: rotate(-10deg); left:2705px; top:0px;}
75% {-webkit-transform: rotate(15deg); left:2700px; top:5px;}
100%   { -webkit-transform: rotate(0deg); left:2700px; top:0px;}
 }