/*
   Module 4 Homework - Multimedia Design
   Marcelle Caron
   1-24-16

   Cat Heaven Main Style Sheet
*/


/* Body Styles */
body {
   font-family: Verdana, Geneva, sans-serif;
   line-height: 1.3;
}


.h1 {
	font-weight: bold;
	font-size: 2em;
    margin: 0.67em 0;	
}

h2 {
	color: rgb(192, 218, 110);
	text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000;
}

h2:after {
	content: '';
	display: inline-block;
	height: 24px;
	width: 25px;
	background-image: url(images/cat-springing.png);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

a {
	color: inherit;
	text-decoration: none;	
}

.button {
	display: inline-block;
	padding: 0.5em 1em;
	background-color: #efefef;
	background-color: rgba(192, 218, 110, 0.50);
	box-shadow: 1px 1px 2px #666;
}
.button:hover {
	background-color: rgba(251, 183, 116, 0.50);	
}

/* Header Styles */
.siteHeader {
	background: url(images/banner-bg.jpg) no-repeat right bottom transparent;
	background-size: cover;	
}
.siteHeaderInner {
	padding: 0.5em 1em;
	background: rgba(255,255,255,0.5);
}



/* Main nav */
.siteNav {
	
}
.siteNav ul {
	list-style: none;
	padding: 0;	
}
.siteNav li {
	display: inline-block;	
	margin: 0.2em 0;
}
.siteNav li.currentPage {
	box-shadow: 1px 1px 2px #666;	
}
.siteNav a {
	display: block;
	padding: 0.5em 1em;
	background-color: rgba(255,255,255,0.5);
}
.siteNav a:hover {
	background-color: rgba(251, 183, 116, 0.50);
}


/* Main body */
.wrapper,
main {
	max-width: 1000px;
	margin: 0 auto;	
}

main {
	padding: 0 1em;	
}

article {
	border: 1px solid #ccc;
	background: #efefef;
	background: rgba(251, 183, 116, 0.50);	
	padding: 0 1em;
	margin: 1em 0;
}

article > section {
	background: white;
	padding: 0 1em;
	margin: 1em 0;
}
/* Make sure article sections contain their children's margins */
article section::before,
article section::after {
	content: '';
	display: table;
	clear: both;
}
/* probably a good parent rule for all article elements */
article::before,
article::after {
	content: '';
	display: table;
	clear: both;
}

/* Footer styles */
.siteFooter {
	margin-top: -1em;
	padding: 1em 1em 180px;
	background: url(images/footer-bg.jpg) repeat-x bottom center transparent;	
	background-size: auto 160px;
	
}
.no-backgroundsize .siteFooter {
	padding: 1em 1em 240px;	
}
.siteFooterInner {
	border: 1px solid #ccc;
	padding: 1em;
	background-color: #efefef;
	background-color: rgba(192, 218, 110, 0.50);
		
}
.siteFooterInner::after {
	content: '';
	display: block;
	clear: both;	
}
.emailSignup {
	float: left;	
}
.siteCredit {
	clear: left;
	text-align: right;
	margin: -1rem 0 0;
	font-size: .75em;	
}




/* Homepage */

/* Cat Trends */
.catTrends {
	list-style: none;
	padding: 0;
	margin: 0;	
}
.catTrends li {
	float: left;
	width: 33.3333%;	
}
.catTrend {
	padding: 1em;	
}
.catTrends figure {
	background: #fff;
	padding: 1em;
	margin: 0;
}

figure img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 1em;	
}

.catTrends figcaption {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
}





/* Famous Cats Page */
.catAnchors {

}
.catAnchors ul {
	list-style: none;
	padding: 0;
}
.catAnchors li {
	margin: 0.25em 0;
}
.catAnchors a {
	display: inline-block;
	line-height: 2;
	padding: 0 1em;
	background: #fff;
	position: relative;
}
.catAnchors a:hover::before {
	left: 100%;
	z-index: 2;
}
.catAnchors a::before {
	content: '';
	display: block;
	position: absolute;
	border: 1px solid #ccc;
	background-color: #fff;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -9999px;
	height: 160px;
	width: 160px;
	background-size: auto 80%;	
	background-position: center center;
	background-repeat: no-repeat;
}
.catAnchors a[href="#garfield"]::before {
	 background-image: url(images/famous-cats/garfield.jpg); 
}
.catAnchors a[href="#felix-the-cat"]::before {
	 background-image: url(images/famous-cats/felix.jpg); 
}
.catAnchors a[href="#sylvester"]::before {
	 background-image: url(images/famous-cats/sylvester_tweety.jpg); 
}
.catAnchors a[href="#tom-cat"]::before {
	background-image: url(images/famous-cats/tom_and_jerry.jpg);
}
.catAnchors a[href="#the-cat-in-the-hat"]::before {
	background-image: url(images/famous-cats/cat_in_the_hat.jpg);
}
.catAnchors a[href="#puss-in-boots"]::before {
	background-image: url(images/famous-cats/pussboots.jpg);
}
.catAnchors a[href="#hello-kitty"]::before {
	background-image: url(images/famous-cats/hello-kitty.jpg);
}
.catAnchors a[href="#grumpy-cat"]::before {
	background-image: url(images/famous-cats/grumpy-cat.jpg);
}
.catAnchors a[href="#colonel-meow"]::before {
	background-image: url(images/famous-cats/colonel-meow-tease.jpg);
}
.catAnchors a[href="#maru"]::before {
	background-image: url(images/famous-cats/maru_the_cat.jpg);
}
.catAnchors a[href="#shironeko"]::before {
	background-image: url(images/famous-cats/shironeko.jpg);
}
.famousCats img {
	float: right;
	width: 30%;
	max-width: 260px;
	height: auto;
	margin: 0 0 1em 2em;	
}