/*
 * index.css
 * CSS style for homepage
 *
 */


/*   * {
	 border: 1px solid;
  } */
  
body {
	 background-color: #efebe9;
	 color: #6d4c41;
	 font-size: large;
	 font-family: serif;
	 margin: 0 0 75px 0;
	 padding: 0 0 0 0;
 }

nav ul {
	 list-style-type: none; 
}
	
a {
	 text-decoration: none;
 } 

p.nav-title {
	 font-weight: bold;
	 color: #995c00;
}
 
p.nav-desc {
	 font-size: .75em;
}	
	
a:link, a:visited {
	 color: #6d4c41;
 }
 
a:hover  {
	 text-decoration: underline;
 }
 
a:active {
	 /*background-color: #6d4c41; */
	 color: red;
 }

picture, p, img, header {
	 margin: 0 0 0 0;
	 padding: 0 0 0 0;
 }

header {
	position:relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
} 
	
#page-banner {
	width: 100%;
}

#site-logo {
	width: 200px;
	height: 66px;
}

#header-link {
	position: absolute;
	bottom: 1%;
	right: 20px;
}

#site-logo g {
	stroke: #6d4c41;
}

#site-logo:hover g, #site-logo:active g {
	stroke: #995c00;
	/* alternatives: #cc3300 #995c00; */
}

img.home-avatar {
    /* Turn the square image into a circle */
    border-radius: 50%;
}

@media only screen and (max-width: 480px) {

	header picture {
		padding: 0 0 0 0;
		margin: 0 0 0 0
	}
	
	#site-logo {
		width: 150px;
		height: 49px;
	}	
	
	#header-link {
		/* Centering when the width is known
		https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/ */
		
		left: 50%;
		margin-left: -75px;
	}
		
	nav {
		margin-left: 20px;
		padding: 0px;
/*		width: 50%; 
		text-align:left; */
	}

	nav ul {
		 list-style-type: none; 
		 padding:0px;
		 margin: 0px;
		 display:block;
	}	

	li { 
		text-align: left;	
/*		border-style: solid;
  		border-width: 1px 0px 0px 0px;*/
		border-style: none; 
		border-color: #6d4c41;
		padding: 1em 1em 1em 1em;
		margin: 20px 0 0 0;
	}
	 
	li img { 
		position:absolute;
		margin-right: 0;
		width: 60px;
		height: 60px;		
	} 	

	p {
		margin-left: 0em;
		padding-left: 0em;
	}

	p.nav-title {
		font-size: xx-large;
	}	

	p.nav-desc, p.nav-title {
		padding-left: 90px;
	}	
}
 
@media only screen and (min-width: 481px) {

/*	a:link, a:visited {
		color: blue
	}
*/	
	body {
		 font-size: xx-large;
	 }

	header {
		margin-top: 0px;
		margin-bottom: 50px;
		text-align: center;
	}

	#site-logo {
		width: 150px;
		height: 49px;
	}
	
nav {
		margin-left: auto;
		margin-right: auto;
		padding: 0px;
		width: 90%; 
		text-align: left; 
	
}	
	
	ul {
		margin: 0;
		padding: 0;
	}
	
	li {
		display: inline-block;
		vertical-align: top;
		width: 38%;
		margin: 60px 0 0 0;
		padding: 0 0 0 0;
 	}
	
	li:nth-child(odd) {
		margin-left: 10%;
		margin-right: 10%;
	}
	
	li:nth-child(even) {
/*		margin-left: 60px;
		margin-right: 0%
*/		
	}

	li img{ 
		position:absolute;
		vertical-align:middle;
		margin-right: 0px;
		width: 70px;
		height: 70px;		
	} 
	
	p {
		margin: 0 0 0 0;
		padding:0 0 0 0;
	}
	
	nav a {
		margin: 0 0 0 0;
		padding:0 0 0 0;	
		display:block;
		vertical-align: middle;
	}

	p.nav-desc, p.nav-title {
		padding-left: 90px;
	}
	
	p.nav-desc {
		font-size: large;
	}

}	


@media only screen and (min-width: 880px) {
	
/*	a:link, a:visited {
		color: red;
	}
*/	
	#site-logo {
		width: 200px;
		height: 66px;
	}

	nav {
		width: 750px;
	}
	
	li img {
		float: none;
		position:absolute;
		margin-right: 0;
		width: 80px;
		height: 80px;
	}
	
	p.nav-desc, p.nav-title {
		padding-left: 110px;
	}
	
	li:nth-child(odd) {
		margin-left: 0%;
		margin-right: 10%;
	}
	
	li:nth-child(even) {
/*		margin-left: 60px;
		margin-right: 0%
*/		
	}	
	
}