/* ALICE - GLOBAL STYLES  */

aside, article, section, header, footer, nav, html, body, p, h1, h2, h3, div {
	  margin: 0;
	  padding: 0;
}

html {
	  background: #d2b78f;
}

body {
	  margin: 0 auto; 
	  padding: 2%;
	  background: #fff; 
	  font: 90%/1.6 baskerville, palatino, 'palatino linotype', georgia, serif;
	  width:80%;
}

/* CONTENT Styles */
  
header {
	  background: #4F483E;
	  padding: 20px 10px 10px 10px;
	  color: #fff;
	  margin-bottom: 2em;
}

/* style for icon image */
  .icon {
	display:block;
	float:left;
	height:150px;
	margin-right:1em;	
        }

h2.pageid{
	  position: relative;
	  padding: 20px 0px 0px 25px;
	  color: #D2B78F;
	  font-weight:normal; 
	  font-size: 2em;
}

h1 {
	  text-align: right;
	  font-size: 3em;
	  font-weight: normal;
	  font-variant: small-caps;
	  letter-spacing: .1em;
	  margin-right:10px;
}

p {
	  margin-bottom: 1em;
}

article {
	  text-align: justify;
}

article h3 {
	  font-size: 2em;
	  font-weight: normal;
	  margin-bottom: .2em;
}

.gallery {
	text-align: center;
}

.gallery img {
	width: 13%;
}

article p {
	  font-size: 1.2em;
	  margin-bottom: 1em;
}


div.embed-container {
		position: relative; 
		padding-bottom: 56.25%;
		height: 0; 
		overflow: hidden; 
		max-width: 100%;
		} 
		
div.embed-container iframe {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
		overflow: hidden;
		}


aside {
	  font: .9em 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

aside h3 {
	  font-size: 1.2em;
	  margin-bottom: 1em;
}

.author {
	  font-weight: bold;
	  text-align: right;
}


footer {
	  background: #686D7B;
	  font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	  text-transform: uppercase;
	  letter-spacing: .2em;
	  text-align: center;
	  color: #fff;
}



/* RESPONSIVE NAVIGATION */
 /* GLOBAL NAVIGATION */
/* nav */
.main {
	margin: 20px 0;
}

.main ul {
	margin: 0;
	padding: 0;
}

.main li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	display:inline; /* ie7 */
}

.main a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
}

.main a:hover {
	color: #000;
}

.main .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}

/* right nav */
.main.right ul {
	text-align: right;
}

/* center nav */
.main.center ul {
	text-align: center;
}


/* START RECAPTCHA STYLES */

	label {
	display:inline-block;
	margin-bottom:10px;
}	

	.contact-feedback img {
		width:100%;
	}
	
	/* writes to small text above reCAPTCHA upon failure */
	.dateFeedback{
		font-size:150%;
		font-weight:bold;
		color:#f00;
	}
	body {
		min-width:320px; /* reCAPTCHA is 318px */
	}
	/* these 2 rules reposition the reCAPTCHA widget a bit to the left */
	#recaptcha_widget_div{position:relative;}
	#recaptcha_area {
		position:relative;
		left:-4px;
	}
			
			

	/* END RECAPTCHA STYLES */


fieldset label {
	margin:0;
}

input, select, fieldset, textarea, #recaptcha_widget_div {
	margin-bottom: 20px;
}

/*Table syles*/
    table { 
        width: 100%; 
        border-collapse: collapse; 
        margin-bottom: 20%;
		background: #fff; 
		max-width: 98%;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) { 
        background: #f0dccf; 
    }
    th { 
        background: #795737; 
        color: white; 
        font-weight: bold; 
      }
    td, th { 
        padding: 6px; 
        border: 1px solid #ccc; 
        text-align: left; 
     }
	 
	 .tableContainer{
		 padding-bottom: 10px; 
	 }
	 

/* RESPONSIVE BREAK POINTS AND STYLES */

/* desktop */
@media all and (min-width:1280px) {
	body {
		width: 85%;
		max-width: 1280px;
	}
	
	article {
		float: left;
		width: 64%;
		padding-left: 2.5%;
	}
	
	
	aside {
		float: right;
		width: 26%;
		padding: 0px 2.5%;
	}
	
	section {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 2em;
		-moz-column-gap: 2em;
		column-gap: 2em;
		margin-bottom: 1em;
		border-bottom: 1px solid #000;
	}
	
	section:last-of-type {
		border-bottom: none;
	}
	
	footer {
		clear: both;
		padding: 25px 0 15px 0;
	}

}
	
/* tablet */ 
@media all and (min-width:481px) and (max-width:1279px) {
  body {
	  background-color:#f4e7c1;
	  }
  
  .gallery img {
	width:25%;
}
   table{
margin-bottom: 5%;
   }
}
 

/* phone */
@media all and (max-width:480px) {
	body {
	  background: #fff; /* R G B */
	  font: 100%/1.8 baskerville, palatino, 'palatino linotype', georgia, serif;
	  width:98%;
}

	.icon {
	display:block;
	float:none;
	height:100px;	
        }
	
	header h1 {
		font-size:2em;
		text-align:left;
		margin:0;
	}
	
	header h2 {
		display:none;  /* hides page id because nav is clear enough information */
	}

	
	.gallery img {
	width:50%;
}

	.main ul:hover .current {
		background: url(../images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.main.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.main.center ul {
		right:0;
	}
	
	nav {
		text-align:left;
		
	}
	


/* Responsive table */

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Name"; }
	td:nth-of-type(2):before { content: "Hat"; }
	td:nth-of-type(3):before { content: "Sandwich"; }
	td:nth-of-type(4):before { content: "Color"; }
	td:nth-of-type(5):before { content: "Random Number"; }
	td:nth-of-type(6):before { content: "Cake or Death?"; }

}