/* Some CSS resets, mixed selectively from Eric Meyer and HTML5 Boilerplate */
html, body, div, span, 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,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0px;
	padding: 0px;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* From HTML5 Boilerplate: 
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
	font-size: 100%; 
	overflow-y: scroll; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}



/* This will enforce block-level properties to HTML5 elements */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, time {
	display: block;
}

/* Make sure there aren't pesky outlines added to click events */
a:hover, a:focus, a:active { 
outline: 0; 
}

body {
	
background:rgb(61,28,44);
color:rgb(226,199,212);
font-size:1.25em;
line-height:1.25em;
}

#container {
	width:90%;
	margin:auto;
	margin-top:2%;
}

li a {
	text-decoration:none;
	padding:0.6em;
	text-align:center;
	font-weight:700;
	background:rgb(106,49,76);
	border:1px solid rgb(226,199,212);
	margin-bottom:0.25em;
	color:rgb(226,199,212);
}

li a {
	display:block;
}

li a:hover, li a:focus, li a:active {
	background:rgb(48,192,201);
	color:white;
}

ul {
	list-style:none;
	padding-left:0px;
	margin-top:1em;
}

figure {
	background:black;
	margin-top:1em;
	padding:0.5em;
	text-align:center;
}

a, figure {
	-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

figure a {
	padding:0px;
	-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
margin-bottom:0px;
	
}

img {
	margin:0.1em;
}

a img {
	border:1px solid rgb(226,199,212);;
}




@media screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and under go here */
	
body {
font-size:1em;
line-height:1em;
}

#container {
	width:700px;
	margin:auto;
	margin-top:7%;
}

li a {
	width:50%;
	margin:auto;
	margin-bottom:0.5em;

}

figure {
	padding:2em;
}

figure a {
	width:auto;
	margin-bottom:0px;
}

img {
	margin:6px;

}
}

@media screen and (min-width: 960px) {
	 
	 #container {
		 margin-top:12%;
	
	 }
	
	li a {
		width:100px;
		padding:3px;
		margin-bottom:none;
		
}

figure a {
	width:auto;
	padding:0px;
}

li { 
float:left;
padding-right:20px; }

figure {
	padding:25px;
}

}