/* color palette
 body:background-color: rgb(252,213,223);
 #navWrapper : rgb(156,197,203);
 */

/* ========== global styles ==========*/

/* ===== general global ===== */

aside, article, section, header, footer, nav {
  display: block;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/*
#contactName, #contactEmail, #contactUrl, #contactMessage {
  margin: 0;
  padding: 0;
  border: 0;
}

 ------------------------------------------------------------------------------------------ */


body {
	  width: 100%; 
	  margin: auto;	
	  font-family: Helvetica, Arial, sans-serif;
	  font-size: 12px;
	  line-height: 1.5;
	  background-color: rgb(252,213,223);
	  /*color: rgb(179,179,179);*/
	  color: rgb(146,146,146);
	  padding-bottom: 15em; 
}

h1, h2, h3 {
  	font-weight: normal;
}

h2 {
	font-size: 1.4em;
	/*color: rgb(156,197,203);*/
	color: rgb(147,182,186);
}

img {
  	max-width: 100%;
}


#logoCase {
	width: 100%;
}

#logo {
	display:block;
	margin: 0 auto;
}

#bodyChild {
  	margin: 0 auto;
  	overflow: hidden;
  	width: 960px;  /* could set at 75% for fluid */
  	background-color:white;
}

#casing {
	overflow:hidden;
	width:100%;
}

#navWrapper {
  	width: 100%;
  	height:50px;
  	background-color: rgb(156,197,203);
  	z-index: 1000;
}

nav ul {
  	list-style-type: none;  
}

nav ul li {
  	float: left;
}


nav ul li a {
 	color: white;
 	font-size:1.2em;
  	display:block;
 	text-decoration: none;
  	margin: 10px 10px 0 0;
  	width: 80px;
  	text-align: center;
  	cursor: pointer;
}

nav ul li a:hover {
	margin-top: 11px;
	color:rgb(252,213,223);
}

#sideBar{
	float:left;
	width:24.75%;	
	font-size:1em;
}

#rebCake{
	padding: 40px 10% 30px 10%;
	height:270px;
}

#socialMedia {
	padding: 0 10% 20px 10%;	
}

#facebookLogo {	
	width:55%;
	padding: 10px 0 10px 0;
}

#facebookLogo img:hover {
	margin-top:1px;
	margin-bottom:-1px;
}

#whatsNew {
	padding: 0 10% 20px 10%;	
}

#whatsNew p, #slideShowLeft p{
	margin-bottom:1em;
}

#leaderBoard {
	padding: 0 10% 20px 10%;
}

#leaderBoard table {
	padding-top: 10px;
	width: 100%;
}

#leaderBoard table th {
	
	border-bottom: 1px solid rgb(146,146,146);
	padding: 1px 5px 0 5px;
	
}

#leaderBoard table td{
	padding: 2px 20px 0 12px;
	
}


#homeContent {
	float:right;	
	width:72.25%;
	padding: 20px 3%  20px 0;
    font-family: georgia,times,serif;
    font-size: 45px;
    color: rgb(179,179,179);
    line-height: 1.5;
}

/* ===== start of Responsive Scroll ======= */

#slideShow{
	float:right;
	width:72.25%;
	padding: 0 3% 30px 0;
}

#slideShowRight{
	float:right;
	width:70%;
}

#slideShowLeft{
	float:left;
	width:30%;
}
#responsiveScroll {    		
  	position:relative;
  	width:100%;    		
}    	
#responsiveScroll img {    		
  	position:absolute;
  	height:auto;
  	width:427px;
  
  	bottom:0;
  	right:0;
  	cursor:pointer;     		
}    	    	
.currentImage {
  	z-index:2;
}    	
.previousImage {
 	z-index:1;
}    	
#stopImage{
  	z-index:-1;
}  
 
/* ===== end of Responsive Scroll ======= */

#slideTip{
	padding: 8px 0 0 31%;
	font-style:italic;
}
	

/* start of tile game settings */

#tileGame{
	clear:both;
	overflow:hidden;
}

#tileText{
	float:left;	
	width:24.75%;
	
}
#tileText h2{
	padding: 0 10% 0 10%;
}

#tileText ul{
	padding: 0 10% 0 16.5%;
	list-style-type: square;  
}

#tileText ul li{
 	margin: 0 0 .5em 0;
 	
}

#tileText ul li span{
	font-style:italic;
}

#tileChoices{
	float:left;
	width: 18.75%;
}

#tileChoices img{
	cursor:pointer;
}

#tileGameRight {
	float:right;
	width:56.5%;
	
}
#sortableContainer { /* new */
	position:relative;
	padding:14px 20% 22px 20%;
}
#sortable { 
	width: 302px;
	height: 302px;
	position:absolute;
	background-image: url('../_images/mini-banoffe-pies-background-grid-black.jpg');  /* WILL NEED TO BE UPDATED WHEN GAME IMAGES ARE REPLACED */
	background-repeat: no-repeat;
	border-top: 10px solid rgb(156,197,203);
	border-left: 10px solid rgb(156,197,203);
	border-right: 10px solid rgb(147,182,186);
	border-bottom: 10px solid rgb(147,182,186);
	
}

#sortable div { 
	position:absolute; 
	width: 100px; 
	height: 100px; 
	background-color:rgb(252,213,223);
	cursor:pointer;
}

#sortable div p { /*not used */
	font-size: 1em; 
	text-align: center;
	
}

#sortable div { /*not used */
	color:black;
	
}
#one {
	background-image: url('../_images/one1.jpg');
	background-repeat: no-repeat;
}	
	
#two {
	margin-left: 101px;
	background-image: url('../_images/two1.jpg');
	background-repeat: no-repeat;
}	

#three {
	margin-left: 202px;
	background-image: url('../_images/three1.jpg');
	background-repeat: no-repeat;
}

#four {
	margin-top: 101px;
	background-image: url('../_images/four1.jpg');
	background-repeat: no-repeat;
}

#five {
	margin-top: 101px;
	margin-left: 101px;
	background-image: url('../_images/five1.jpg');
	background-repeat: no-repeat;
}	

#six {
	margin-top: 101px;
	margin-left: 202px;
	background-image: url('../_images/six1.jpg');
	background-repeat: no-repeat;
}

#seven {
	margin-top: 202px;
	background-image: url('../_images/seven1.jpg');
	background-repeat: no-repeat;
}

#eight {
	margin-top: 202px;
	margin-left: 101px;
	background-image: url('../_images/eight1.jpg');
	background-repeat: no-repeat;
}

#congrats {
	clear:both;
	margin-left: 43.50%;
	height:80px;
	
}

#congrats p{
	display:none;
	padding-left: 13%;
	padding-right: 13%;
	color: rgb(147,182,186);
	font-size: 1.5em;
	text-align:center;
}	

#congrats p span{
	cursor: pointer;
	text-decoration:underline;
}

#emailDialog, #aliasDialog {
	display:none;
	position:fixed;
	z-index: 10;
	left: 35%;
	top: 45%;
	width: 350px;
	height: 100px;
	
	background-color: white;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:8px solid;
}

.title {
	float:left;
	margin: 10px;	
	font-size: 13px;
	color: rgb(156,197,203);
	font-weight:bold;
		
}

#emailValidationMessage, #aliasValidationMessage {
	
	float:left;
	margin: 0 0 0 10px;
	height: 20px;
	font-size: 13px;
	color: gray;
	font-weight:bold;
}

.inputClass {
	float:left;
	
	margin: 10px 10px 10px 5px;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	color: gray;
	
	border:2px solid #9cc5cb;
	
}

#emailId {
	width: 216px;
}
	
#aliasId {
	width: 66px;
}

#cancelButtonEmail, #cancelButtonAlias {
	clear : left;
	float:left;
}

#submitButtonEmail, #submitButtonAlias {
	clear: both;
	float:right;
}

.buttons {
	margin:10px;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #93b6ba;
	display:inline-block;
	color:#93b6ba;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:3px 8px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
.buttons:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	
	background-color:#dfdfdf;
}
.buttons:active {
	position:relative;
	top:1px;
}




/* ===== footer global ===== */

#footerWrapper {
  width: 100%;
  border-bottom: 0.1em solid rgb(179,179,179);
  background-color: rgb(156,197,203);
  text-align: center;
  color: gray;
  margin-top: 2em;
  height: 4.7em;
  clear: both;
}
#copyRight {
  padding: 1em 0 0 0;
}

#wymount a{
	text-decoration:none;
	color: gray;
}

/* ===== aboutMain global ===== 

#processContent {
  display: none;
}
#processImgCont {
  margin: 0 1% 0 2%;
  max-width: 97%;
}
*/
/* ===== contactMain global ===== 
#contactMain {
  border-bottom: 0.1em solid rgb(179,179,179);
}
#contactDetails a:link, #contactDetails a:visited {
  text-decoration: none;
  color: rgb(179,179,179);
}
#contactDetails a:hover, #contactDetails a:active {
  color: rgb(82,173,225);
}
#contactSocial {
  overflow: hidden;
}
#contactSocial div {
  float: left;
  font-size: 0;
}
#contactSocial div:hover {
  background-color: rgb(82,173,225);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#contactForm ul {
  list-style: none;
}
#contactForm ul li {
  margin-top: 0.75em;
}
#contactForm ul li:first-child {
  margin-top: 0;
}
#contactName, #contactEmail, #contactUrl, #contactMessage {
  font-family: arial, sans-serif;
  font-size: 0.8em;
  color: rgb(179,179,179);
  border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 2px solid rgb(179,179,179);
  outline: none;
}
#contactName:focus, #contactEmail:focus, #contactUrl:focus, #contactMessage:focus {
  border: 0.2em solid rgb(82,173,225);
}
#contactName, #contactEmail, #contactUrl {
  height: 3.2em;
	padding-left: 0.8em;
}
#contactMessage {
  height: 10em;
  padding-left: 0.8em;
  padding-top: 0.8em;
}
#contactSubmit {
  text-transform: uppercase;
  cursor: pointer;
  height: 4em;
  -webkit-appearance: button;
}
.okButton:hover {
  cursor: pointer;
}
*/

/* ========== other styles ========== 

@media only screen and (min-width: 1025px) {*/

/* ===== general 1025+ ===== */