/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */
/* #Activity Styles
================================================== */


/* Common Page Styles
================================================== */
body {
	background-image:url("../images/tree-intro-dd.jpg");
				background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover; 

		
	}


#container{
	margin:0;
	padding:0;
	position:relative;
}


.arrow-up {
	margin-left:auto;
	margin-right:auto;
	width:70%;
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 40px solid #00B2AD;
	
}




footer{
	font-size:.85em; 
	color:#F0F; 
	height:230px;
	padding:0px 0px 0px 0px; 
	background-image:url("../images/footer.png"); 
	background-position:center; background-size:cover;
	position:fixed;
	bottom:0;
	width:100%;
}
h1{
	line-height: 35px;
	margin-bottom: 0px;
}

#title {

	color: #fff;
}

	/* Start
	================================================== */

	
	
	#introductionText{
		color:#fff;
		padding:10px;
		background-color:#00B2AD;
	}
	

	
	/* Activity
	================================================== */

	

	#activityArea {
		
	}
	
	#treeTrunk{
		
	background-image:url(../images/tree.png);
		background-repeat: no-repeat;
		background-size:100%;
		
		}
	
	#activityInfo{

		display: none;
		padding:0;
		top:0;
	}
	
	

	#startButton{
		margin-top:60px;
	}


	#question {
		background-color: #00B2AD ;
		color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	/* drag and drop specific*/


/*	.dragObject {
		margin:10px;
		background-color: #555460;
		width: 200px;
		height: 20px;
		cursor: pointer;
		color: #ffffff;
		font-family: Verdana;
		font-size: 15px;
		padding: 5px 30px;
		text-decoration: none;
		border: 1px solid #ee519b;
		position: relative;
	}*/
	
	

	
	#dropObjectArea1{
	padding-top:20px;
	
	}
	
	
	
	#drop2{
		margin-top:80px;
		}
		
	#drop6{
		margin-top:20px;
		}
		
	#drop3{
	
		}
		
	#drop7{
		margin-top:-40px;
		
		}
		
	#drop4{
	margin-top:115px;
		margin-left:-10px;
		/*background-color:#000;*/
		}
	
	#dragObjectArea{
		margin-top:0px;
	display:block;
	width:100%;
	height:auto;
	}


	#dragObjectList {
		background-color: #ffffff;		
		height: 410px;
		color: #555460;
		border: 1px dashed #555460;
	}
	

	
.dragObject{
	display: inline-block;
	cursor: pointer;
	margin:0 10px 10px 10px;
	
	
	-moz-box-shadow:inset 4px 29px 7px -6px #ffffff;
	-webkit-box-shadow:inset 4px 29px 7px -6px #ffffff;
	box-shadow:inset 4px 29px 7px -6px #ffffff;

	background-color:#f9f9f9;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:0;
	border:2px solid #dcdcdc;
		color:#666666;
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:18px;
	font-weight:normal;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:160px;
	text-decoration:none;
	text-align:center;
}

.ui-draggable-helper{
	display: inline-block;
	cursor: pointer;
	margin:10px;
	
	
	-moz-box-shadow:inset 4px 29px 7px -6px #ffffff;
	-webkit-box-shadow:inset 4px 29px 7px -6px #ffffff;
	box-shadow:inset 4px 29px 7px -6px #ffffff;

	background-color:#000;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:0;
	border:2px solid #dcdcdc;
	
	color:#666666;
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:18px;
	font-weight:normal;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:160px;
	text-decoration:none;
	text-align:center;
}


	.dropObject {

	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);

	background-color:#f9f9f9;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px dashed #000;
	
	color:#666666;
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:18px;
	font-weight:normal;
	font-style:normal;
	height:52px;
	line-height:50px;
	width:164px;
	text-decoration:none;
	text-align:center;
	}
	
	
	


	


	.dropObject-hover {
background-color: #000;		
	}
	
	
	

	



	/* end drag and drop specific*/
	
	/* Results
	================================================== */

	



/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	
	#drop2{
		margin-left:-20px;
		margin-top:40px;
		}
		
		#drop6{
		
		margin-top:-10px;
		}
		
	
		
	#drop3{
		margin-top:2px;
	margin-left:-20px;
		}
		
	
	#drop4{
	margin-top:50px;
		
		/*background-color:#000;*/
		}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	body {
	background-image:url("../images/tree-intro-dd-portrait.jpg");
				background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover; 

		
	}
		

}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {


		/* Common Page Styles
		================================================== */
		
	





/* Start
================================================== */



/* Activity
================================================== */


	
	



	/* Results
	===================;=============================== */
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	
	}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/