@charset "UTF-8";
/* CSS Document */

*{
	border: 0;
	margin: 0;
	padding: 0;
}
body{
		font-size: 100.01%;
		font-family: "Trebuchet MS", Helvetica, sans-serif;
		background-image:url(../Images/background2.png);
		text align: center;
}
		
.cloud
{
width:280px;
height:200px;
position:relative;
animation:myfirst 10s;
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}

.cloud2
{
width:280px;
height:200px;
position:relative;
animation:myfirst2 6s;
-webkit-animation:myfirst2 8s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}

#cloud{
	height: 200px;
	width: 280px;
	margin-top: -190px;
	margin-left: 980px;
	
}
#cloud2{
	height: 200px;
	width: 280px;
	margin-top: -430px;
	margin-left:1000px;
	
}

@keyframes myfirst
{
0%   {right:0px; top:0px;}
100%  { right:200px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  { right:245px; top:0px;}

}

@keyframes myfirst2
{
0%   {right:0px; top:0px;}
100%  { right:100px; top:0px;}
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  { right:100px; top:0px;}

}


#bee{
	height: 12px;
	width: 12px;
	margin-top: -100px;
	margin-left:380px;
	
}
	
.bee
{
width:12px;
height:12px;
position:relative;
animation:bee 10s;
-webkit-animation:bee 10s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}


@keyframes bee
{
0%   {left:0px; top:0px;}
100%  { left:50px; top:50px;}
}

@-webkit-keyframes bee /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  { left:50px; top:50px;}

}
	
#bee2{
	height: 12px;
	width: 12px;
	margin-top: -20px;
	margin-left:380px;
	
}
	
.bee2
{
width:12px;
height:12px;
position:relative;
animation:bee2 6s;
-webkit-animation:bee2 6s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}


@keyframes bee2
{
0%   {left:0px; top:0px;}
100%  { left:50px; top:0px;}
}

@-webkit-keyframes bee2 /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  { left:65px; top:0px;}

}

#bee3{
	height: 12px;
	width: 12px;
	margin-top: -20px;
	margin-left:380px;
	
}
	
.bee3
{
width:12px;
height:12px;
position:relative;
animation:bee3 5s;
-webkit-animation:bee3 5s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}


@keyframes bee3
{
0%   {right:0px; top:0px;}
100%  {right:110px; top:0px;}
}

@-webkit-keyframes bee3 /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  {right:110px; top:0px;}

}

#bee4{
	height: 12px;
	width: 12px;
	margin-top: 20px;
	margin-left:110px;
	
}
	
.bee4
{
width:12px;
height:12px;
position:relative;
animation:bee4 14s;
-webkit-animation:bee4 10s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
z-index: 100;
}


@keyframes bee4
{
0%   {right:0px; top:0px;}
100%  {right:20px; top:80px;}
}

@-webkit-keyframes bee4 /* Safari and Chrome */
{
0%   {right:0px; top:0px;}
100%  {right:20px; top:80px;}

}
#wrapper {
	width: 1295px;
	margin: 15px auto;
	position: static;
	top: 0px;

	
}

#banner {
	height: 400px;
	width: 1250px;
	position: relative;
	top: 0px;
	left: 5px;
	z-index: 100;
	
}
#blank1 {
	width: 167px;
	height: 1034px;
	top: 50px;
	float: right;

}

#blank2 {
	width: 147px;
	height: 1034px;
	top: 50px;
	float: left;

}
	
	
	
nav ul ul {
		display: none;
}

	nav ul li:hover> ul {
			display:block;
	}
	
	
nav ul ul {
	background: #693; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	width: 208px;
}
	nav ul ul li {
		float: none; 
		border-bottom: 2px solid #FC0;
		position: relative;
		margin-left: -0px;
		
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #663;
			}
	
nav ul {
	background: #835016; 
	background: linear-gradient(top, #835016 0%, #9A5817 100%);  
	background: -moz-linear-gradient(top, #835016 0%, #9A5817 100%); 
	background: -webkit-linear-gradient(top, #835016 0%,#9A5817 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
	top: -40px;
	width: 920px;
	z-index: 99;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}	
	
nav ul li {
	float: left;
	margin-left: 30px;
}
	nav ul li:hover {
		background: #660;
		background: linear-gradient(top, #660 0%, #690 40%);
		background: -moz-linear-gradient(top, #660 0%, #690  40%);
		background: -webkit-linear-gradient(top, #660 0%,#690  40%); 
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
	display: block;
	padding: 25px 40px;
	color: #FC0;
	text-decoration: none;
	font-size: 18px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	position: relative;
	
	}
	
	
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

#container{
		float: left;
		width: 961px;
		height: 980px;
		background-image:url(../Images/Seasonalfoodfinal.gif);		
		margin-top: 300px;
}

.containerdiv{
	float: left;
	position: relative;
	top: 345px;
	left: -15px;	
	
}

.cornerimage1{
	position: absolute;
	top: 0;
	right: 0;
	
}

.cornerimage2{
	position: absolute;
	top: 0;
	right: 0;
}

.cornerimage3{
	position: absolute;
	top: 0;
	right: 0;
	
}
		
		
#img{
	float: left;
	border: 2px;
	border:#0F6;
	
}

.lefting {
		float: left;
		margin-right: 16px;
		border-style: solid;
		border-width: 5px;
		border-color: #90C;	
		
}

.righting {
	float: right;
	margin-right: 16px;
	margin-top: 16px;
	margin-left: 16px;
	border-style: solid;
	border-width: 5px;
	color: #933;		
}

#footer{
		width: 1172px;
		height: 300px;
		float: left;
		position: relative;
		margin-top: -25px;	
		left: 20px;	
}

footer p {
		font-size: .7em;
		padding: 4px;
		
}

/* CSS needed for tree seasonal animation
	---------------------------------------------------- */
.cornerimage1{
	opacity:0;
	-webkit-animation:fadeIn ease-out 1;
	-moz-animation:fadeIn ease-out 1;
	-o-animation:fadeIn ease-out 1;
	animation:fadeIn ease-out 1;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	-o-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
	-webkit-animation-duration:60s;
	-moz-animation-duration:60s;
	-o-animation-duration:60s;
	animation-duration:60s;
	-webkit-animation-delay:3s;
	-moz-animation-delay:3s;
	-o-animation-delay:3s;
	animation-delay:3s;
}

.cornerimage3{
		opacity:0;
	-webkit-animation:fadeIn ease 1;
	-moz-animation:fadeIn ease 1;
	-o-animation:fadeIn ease 1;
	animation:fadeIn ease 1;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	-o-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
		-webkit-animation-duration:25s;
	-moz-animation-duration:25s;
	-o-animation-duration:25s;
	animation-duration:25s;
		-webkit-animation-delay:30s;
	-moz-animation-delay:30s;
	-o-animation-delay:30s;
	animation-delay:30s;
	
}
	
.cornerimage2{
opacity:0;
	-webkit-animation:fadeIn ease 1;
	-moz-animation:fadeIn ease 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	-o-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
	-webkit-animation-duration:25s;
	-moz-animation-duration:25s;
	-o-animation-duration:25s;
	animation-duration:25s;
		-webkit-animation-delay:20s;
	-moz-animation-delay: 20s;
	-o-animation-delay:20s;
	animation-delay:20s;
}










/* Key Frames for tree
---------------------------------------------------- */
@-webkit-keyframes fadeIn { 

0% { opacity:0; } 
50% { opacity:1; } 
100% { opacity:0; }
}
@-moz-keyframes fadeIn { 0% { opacity:0; } 
50% { opacity:1; } 
100% { opacity:0; } }
@-o-keyframes fadeIn { 0% { opacity:0; } 
50% { opacity:1; } 
100% { opacity:0; } }
@keyframes fadeIn { 0% { opacity:0; } 
50% { opacity:1; } 
100% { opacity:0; } }





/* REcipes:
---------------------------------------------------- */
.recipes {
  margin:0 auto;
  text-align:center;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 10px;
  float: right;
  position: relative;
  top: 455px;
  right: -15px;



}
h1, h2, h3, h4, h5, h6 {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size:8px;
  color: #900;
}

ul#index_cards {
  margin-top:2px;
  text-align:center;

}
   
ul#index_cards li {
  background:white;
  background-image:url(../Images/linedpaper.gif);
  height:350px;
  width:80px;
  display:block;
  float:left;
  border:2px solid #630;
  padding:5.6px 5px;
  position:relative;
  -moz-border-radius: 2.5px;
  -webkit-border-radius: 2.5px;
  -moz-box-shadow: 1px 1px 5px #000;
  -webkit-box-shadow: 1px 1px 5px #000;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;

}

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  z-index:1;
  left:75px;
  top:20px;
  
}
   
#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  z-index:2;
  left:35px;
  top:5px;
}
   
#card-3 {
  background-color:#69732B;
  z-index:3;
}
   
#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  z-index:2;
  right:35px;
  top:5px;
}
   
#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  z-index:1;
  right:75px;
  top:20px;
}

/* Hover States */
   
ul#index_cards li:hover {
  z-index:4;
}
   
#card-1:hover {
  -moz-transform: scale(1.1) rotate(-18deg);
     -webkit-transform: scale(1.1) rotate(-18deg);
}
     
#card-2:hover {
  -moz-transform: scale(1.1) rotate(-8deg);
   -webkit-transform: scale(1.1) rotate(-8deg);
}
   
#card-3:hover {
  -moz-transform: scale(1.1) rotate(2deg);
   -webkit-transform: scale(1.1) rotate(2deg);
}
   
#card-4:hover {
  -moz-transform: scale(1.1) rotate(12deg);
   -webkit-transform: scale(1.1) rotate(12deg);
}
   
#card-5:hover {
  -moz-transform: scale(1.1) rotate(22deg);
   -webkit-transform: scale(1.1) rotate(22deg);
}

/* Carbon footprint quiz ---------------------*/



#slickQuiz {
    width: 600px;
	height: auto;
    margin-top: 20px;
	margin-left:150px;
    border: 4px solid #F93;
    background: #fff;
	background-color: #DFF2CC;
    padding: 20px;
    font-family: Trebuchet, Arial,Helvetica,sans-serif;
    font-size: 16px;
    color: #353535;
    line-height: 1.5em;
}

h1,h2,h3,h4,h5,h6 {font-weight: bold;}

h1 {
	font-size: 22px;
	margin: 0 0 20px;
	color: #0C4569;
}
h2 {
    font-size: 22px;
    margin: 15px 0;
}
h3 {
    font-size: 18px;
    margin: 15px 0 10px;
}
h4 {
    font-size: 16px;
    margin: 10px 0;
}
h5 {
    font-size: 14px;
    margin: 10px 0 5px;
}
h6 {
    font-size: 12px;
    margin: 5px 0;
}

strong { font-weight: bold; }
em { font-style: italic; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol li { list-style-type: decimal; margin-left: 20px; }

.button {
    float: left;
    width: auto;
    padding: 5px 15px;
    color:#ffffff;
    background-color:darkcyan;
    border: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	text-decoration: none;
}
.button:hover {
    background-color:darkslategray;
}

.startQuiz {
    margin-top: 40px;
}

/* clearfix */
.quizArea, .quizResults {
    zoom: 1;
}
.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}
.quizArea:after, .quizResults:after {
    clear: both;
}

.questionCount {
    font-size: 14px;
    font-style: italic;
}
.questionCount span {
    font-weight: bold;
}

ol.questions {
    margin-top: 20px;
    margin-left: 0;
}
ol.questions li {
    margin-left: 0;
}

ul.answers {
    margin-left: 20px;
    margin-bottom: 20px;
}

ul.responses li {
    margin: 10px 20px 20px;
}
ul.responses li p span {
    display: block;
    font-weight: bold;
    font-size: 18px;
}
ul.responses li.correct p span {
    color: #6C9F2E;
}ul.responses li.incorrect p span {
    color: #B5121B;
}

.quizResults h3 {
    margin: 0;
}
.quizResults h3 span {
    font-weight: normal;
    font-style: italic;
}
.quizResultsCopy {
    margin-top: 20px;
}

/*---------------Seasonal Turnwheel -----------------*/


section, footer, nav {
  display: block;
}

body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	-webkit-text-size-adjust: none;
	color: #630;
}

a {
  color: blue;
  color: hsl( 220, 90%, 40% );
  text-decoration: none;
}

a:hover {
	color: #003;
}

#options {
  position: relative;
  z-index: 100;
  margin-bottom: 40px;
  left: 75px;
  padding: 5px;
  button-shadow: 10px 10px 5px #888888;
  
}
#options2 {
  position: relative;
  z-index: 100;
  margin-bottom: 40px;
  left: 75px;
  padding: 5px;
    button-shadow: 10px 10px 5px #888888;
  

  }

button {
  font-size: 20px;
  -webkit-appearance: push-button;
  color: #FC0;
  button-shadow: 10px 10px 5px #888888;
  width: 90px;
}

  
#previous{
	padding: 5px;
	background-color: #909;
	border: 2px solid #333;
	position: relative;
	margin: 5px;
	box-shadow: 10px 10px 5px #888888;
	left: -30px;
	top: px;
	
	
}
	
#next{
		padding: 5px;
	background-color: #909;
	border: 2px solid #333;
	position: relative;
	margin: 5px;
	box-shadow: 10px 10px 5px #888888;
	left:0px;
	top: -55px;
	
		
	
 
}

footer {
  border-top: 1px solid #CCC;
  font-size: 0.8em;
  position: relative;
  z-index: 100;
}

#disclaimer {
  color: red;
  font-weight: bold;
  display: none;
}
.no-csstransforms3d #disclaimer { display: block; }

hr {
  border: none;
  border-top: 1px solid #CCC;
}

figure {
  margin: 0;
}

code {
  font-family: 'Monaco', 'Menlo', monospace;
}

/* navigation */

.index nav ul {
  list-style: none;
  margin: 0 0 3.0em 0;
  padding: 0;
}

.index nav ul a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  border: 1px solid #CCC;
  border-bottom: none;
}

.index nav ul li:first-child a {
  border-radius: 10px 10px 0 0;
}

.index nav ul li:last-child a {
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #CCC;
}

/**** BAckground info for turnwheel seasons ****/

body.doc {
  max-width: 640px;
}

.doc #content {
  font-size: 14px;  
  line-height: 1.5em;
}

.doc #content blockquote {
  margin-left: 0;
  padding: 0.8em;
  background: #EEE;
  background: hsla( 0, 0%, 0%, 0.04 );
}

.doc #content img {
  border: 1px solid #CCC;
  display: inline-block;
}

.doc #content pre {
  font-size: 12px;
  line-height: 1.5em;
}

.doc nav h1 {
  font-size: 20px;
}

.doc nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc nav li a {
  display: block;
  padding: 0.3em 0;
}

.doc nav li.current a {
  font-weight: bold;
  color: #333;
}
.doc nav li.current a:hover { color: white; }

@media screen and (min-width: 768px) {

  body.doc {
    margin-left: 220px;
  }
  
  .doc nav {
    width: 200px;
    position: fixed;
    left: 10px;
    font-size: 14px;
  }

  .doc nav h1 {
    margin-top: 0;
  }

}

/* range of angles */

.proxy-range {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 200px;
  border: 1px solid hsla( 0, 0%, 0%, 0.15 );
  background-color: hsla( 0, 0%, 0%, 0.02 );
  border-radius: 15px;
  -webkit-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
     -moz-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
       -o-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
          box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );

}

.proxy-range.highlighted {
  background-color: hsla( 220, 90%, 50%, 0.15 );
}

.proxy-range .handle {
  width: 38px;
  height: 38px;
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
  border: 1px solid hsla(0, 0%, 0%, 0.3);
  position: absolute;
  top: -5px;
  left: -20px;
  background-color: hsla( 220, 70%, 60%, 1.0 );
  background-image: -webkit-gradient(radial, center 15%, 0, center 30%, 30, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  background-image: -moz-radial-gradient(center 30%, cover,
    hsla( 0, 0%, 100%, 0.5 ),  
    hsla( 0, 0%, 100%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.5 )
  );
  -webkit-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 1.0 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -moz-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -webkit-transition-property: width, height, top, left, -webkit-border-radius;
     -moz-transition-property: width, height, top, left, -moz-border-radius;
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
}

.proxy-range.highlighted .handle {
  height: 98px;
  top: -35px;
  width: 4px;
  left: -3px;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  border-radius: 3px;
}




/******* Colours for seasonal turnwheel *******/



pre {
  background: #111;
  color: white;
  padding: 0.8em;
  white-space: pre-wrap;
}


code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp { color: #5298D4; } /* doctype */
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* writing */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

    .container {
      width: 180px;
      height: 220px;
      position: relative;
	  top: 10px;
	  left: 120px;
      margin: 0 auto 30px;
      border: 1px solid #CCC;
      -webkit-perspective: 1100px;
         -moz-perspective: 1100px;
           -o-perspective: 1100px;
              perspective: 1100px;
    }

    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform: translateZ( -392px );
         -moz-transform: translateZ( -392px );
           -o-transform: translateZ( -392px );
              transform: translateZ( -392px );
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    #carousel figure {
      display: block;
      position: absolute;
      width: 170px;
      height: 210px;
      left: 5px;
      top: 5px;
      border: 1px solid black;
      line-height: 116px;
      font-size: 30px;
      font-weight: bold;
      color: white;
      text-align: center;
	  
    }

    #carousel figure:nth-child(1) {background-image:url(../Images/seasonal%20food/july.gif);}
    #carousel figure:nth-child(2) { background-image:url(../Images/seasonal%20food/august.gif); }
    #carousel figure:nth-child(3) { background-image:url(../Images/seasonal%20food/september.gif); }
    #carousel figure:nth-child(4) { background-image:url(../Images/seasonal%20food/October.gif); }
    #carousel figure:nth-child(5) { background-image:url(../Images/seasonal%20food/november.gif); }
    #carousel figure:nth-child(6) { background-image:url(../Images/seasonal%20food/December.gif); }
    #carousel figure:nth-child(7) { background-image:url(../Images/seasonal%20food/January.gif); }
    #carousel figure:nth-child(8) { background-image:url(../Images/seasonal%20food/february.gif); }
    #carousel figure:nth-child(9) { background-image:url(../Images/seasonal%20food/march.gif); }
	 #carousel figure:nth-child(10) { background-image:url(../Images/seasonal%20food/April.gif); }
	  #carousel figure:nth-child(11) { background-image:url(../Images/seasonal%20food/may.gif); }
	   #carousel figure:nth-child(12) { background-image:url(../Images/seasonal%20food/june.gif); }

    #carousel figure:nth-child(1) {
      -webkit-transform: rotateY(   0deg ) translateZ( 392px );
         -moz-transform: rotateY(   0deg ) translateZ( 392px );
           -o-transform: rotateY(   0deg ) translateZ( 392px );
              transform: rotateY(   0deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(2) {
      -webkit-transform: rotateY(  30deg ) translateZ( 392px );
         -moz-transform: rotateY(  30deg ) translateZ( 392px );
           -o-transform: rotateY(  30deg ) translateZ( 392px );
              transform: rotateY(  30deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(3) {
      -webkit-transform: rotateY(  60deg ) translateZ( 392px );
         -moz-transform: rotateY(  60deg ) translateZ( 392px );
           -o-transform: rotateY(  60deg ) translateZ( 392px );
              transform: rotateY(  60deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(4) {
      -webkit-transform: rotateY( 90deg ) translateZ( 392px );
         -moz-transform: rotateY( 90deg ) translateZ( 392px );
           -o-transform: rotateY( 90deg ) translateZ( 392px );
              transform: rotateY( 90deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(5) {
      -webkit-transform: rotateY( 120deg ) translateZ( 392px );
         -moz-transform: rotateY( 120deg ) translateZ( 392px );
           -o-transform: rotateY( 120deg ) translateZ( 392px );
              transform: rotateY( 120deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(6) {
      -webkit-transform: rotateY( 150deg ) translateZ( 392px );
         -moz-transform: rotateY( 150deg ) translateZ( 392px );
           -o-transform: rotateY( 150deg ) translateZ( 392px );
              transform: rotateY( 150deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(7) {
      -webkit-transform: rotateY( 180deg ) translateZ( 392px );
         -moz-transform: rotateY( 180deg ) translateZ( 392px );
           -o-transform: rotateY( 180deg ) translateZ( 392px );
              transform: rotateY( 180deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(8) {
      -webkit-transform: rotateY( 210deg ) translateZ( 392px );
         -moz-transform: rotateY( 210deg ) translateZ( 392px );
           -o-transform: rotateY( 210deg ) translateZ( 392px );
              transform: rotateY( 210deg ) translateZ( 392px );
    }
    #carousel figure:nth-child(9) {
      -webkit-transform: rotateY( 240deg ) translateZ( 392px );
         -moz-transform: rotateY( 240deg ) translateZ( 392px );
           -o-transform: rotateY( 240deg ) translateZ( 392px );
              transform: rotateY( 240deg ) translateZ( 392px );
    }

    
    #carousel figure:nth-child(10) {
      -webkit-transform: rotateY( 270deg ) translateZ( 392px );
         -moz-transform: rotateY( 270deg ) translateZ( 392px );
           -o-transform: rotateY( 270deg ) translateZ( 392px );
              transform: rotateY( 270deg ) translateZ( 392px );
			  
    }
    #carousel figure:nth-child(11) {
      -webkit-transform: rotateY( 300deg ) translateZ( 392px );
         -moz-transform: rotateY( 300deg ) translateZ( 392px );
           -o-transform: rotateY( 300deg ) translateZ( 392px );
              transform: rotateY( 300deg ) translateZ( 392px );
			  
    }
    #carousel figure:nth-child(12) {
      -webkit-transform: rotateY( 330deg ) translateZ( 392px );
         -moz-transform: rotateY( 330deg ) translateZ( 392px );
           -o-transform: rotateY( 330deg ) translateZ( 392px );
              transform: rotateY( 330deg ) translateZ( 392px );
			  
}

.twitter-share-button{
	margin-left: 840px;
	top: -65px;
	position: relative;
	z-index: 200;
	
}

#facebook{
	margin-left: 770px;
	margin-top: -100px;
	z-index: 500;
	
	
}

#question{
	margin-top: -490px;
	margin-left: 42px;
	font-size: 10px;
	font-color: #630;
}