/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
html {
	margin: 0;
	padding: 0;
	}
body { 
	background: rgb(165, 167, 165) url(https://cdn.stocksnap.io/img-thumbs/960w/japan-culture_REEJPBUW2D.jpg) no-repeat bottom right; 
	background-size: cover;
	opacity: 0.8;
	margin: 0; 
	}

h3 { 
	font-family:'Courier New', Courier, monospace;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px; 
	color: rgb(52, 97, 8);
	}
p { 
		margin-top: 0; 
		font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-size: 14px;
		text-align: left;
		margin-left: 15px;
		color:rgb(0, 0, 0);
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: rgb(85, 47, 47);
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #f12178;
	}
a:hover, a:focus, a:active { 
	text-decoration: underline; 
	color: rgb(151, 38, 38);
	}
abbr {
	border-bottom: none;
	}


/* specific divs */

.intro { 
	min-width: 470px;
	width: 100%;
	}

header h1 { 
	margin: 45px 0 20px 50px;
	font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	color: rgb(4, 65, 27);
	text-indent: 20px;
	display: block;
	float: left;
	}
header h2 { 
	color: rgb(14, 65, 4);
	white-space: nowrap;
	}
header {
	padding-top: 20px;
	height: 87px;
}

.summary {
	clear: both; 
	padding-bottom: 15px;
	float: left;
	}
.summary p {
	font: italic 16px Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	text-align: left;
	padding: 10px 20px 0 15px;
	}

.preamble {
	clear: right; 
	padding: 0px 50px 0 10px;

	}
.supporting {	
	padding-left: 10px; 
	margin-bottom: 40px;
	}

footer { 
	text-align: left;
	padding: 25px;
	position: relative;
	margin:auto;
	font-family: 'Courier New', Courier, monospace;
	width: 1800px;
	height: 30px;
	border: 1px solid black;
	background: transparent url(https://cdn.stocksnap.io/img-thumbs/960w/pathway-tunnel_68J42K09XH.jpg);
	}
footer a:link, footer a:visited { 
	margin-right: 20px; 
	color: beige;
	}

.sidebar {
	left: 0; 
	position: absolute; 
	top: 0; 
	width: 145px;
	float: left;
	}
.sidebar .wrapper { 
	font: 12px 'Courier New', Courier, monospace;
	background: transparent url(https://cdn.stocksnap.io/img-thumbs/960w/nature-landscape_D5VWI2IL21.jpg) top left no-repeat;
	color: rgb(0, 0, 0);
	background-size: cover;
	padding: 10px; 
	margin: 0; 
	}
.sidebar h3.select { 
	margin: 100px 0 15px 0; /*Select a Design is placed at same level as the summary and other text on the right side*/
	width: 150px; 
	height: 20px; 
	font-size: 16px;
	color: beige;
	}
.sidebar h3.archives,
.sidebar h3.resources{ 
	margin: 20px 0 10px 0;
	width: 150px; 
	height: 20px; 
	font-size: 16px;
	color: beige;
	}

.sidebar ul {
	margin: 0;
	padding: 0;
	}
.sidebar li {
	line-height: 1.3em; 
	background: transparent url(http://csszengarden.com/001/cr1.gif) no-repeat top center; /*lines on sidebar*/
	font-size: 12px;
	display: block; 
	padding-top: 5px; 
	padding-left: 20px;	
	margin-bottom: 5px;
	list-style-type: none;
	}
.sidebar li a:link {
	color: rgb(171, 241, 7);
	}
.sidebar li a:visited {
	color: rgb(150, 128, 18);
	}

/*font increases in size and text color changes when you hover over the links*/	
.sidebar li a:hover {
	font-weight: bold;
	font-size: 16px;
	color: rgb(255, 2, 78);
	}
.extra1 {
	background: transparent url(https://cdn.stocksnap.io/img-thumbs/960w/autumn-foliage_HRCYMXOTTT.jpg) repeat-y top center; /*right side image*/
	border: 1px solid black;
}

/*for small screens - the smallest size available on pc browsers*/
@media screen and (max-width: 900px){
	header h1{ /*CSS Zen Garden*/
		margin-left:150px;
		font-size: 22px;
	}
	header h2 { /*The Beauty of CSS design*/
		margin: 20px 155px 20px 170px;
		float: left;
		font-size: 16px;
	}
	.summary { /*A demonstation... text*/
		width: 200px; 
		height: 250px;
		margin: 10px 20px 10px 150px; 
	}
	.sidebar .wrapper { 
		height: 4216px;
		margin: 0; 
	}
	.page-wrapper { 
		background: url(https://cdn.stocksnap.io/img-thumbs/960w/hot-teapot_QLW40Q7LBK.jpg) no-repeat top left; /*tea set*/
		background-size: cover;
		height: 4300px;
	}
	.extra1 {
		background-color: rgb(42, 56, 8);
		position: absolute; 
		top: 0; 
		right: 0; 
		width: 125px; 
		height: 4235px;
	}
	p { 
		padding: 0 150px 10px 150px;
	}

	h3 {  
		margin-left:165px;
		margin-right: 100px;
		margin-top: 10px;
	}
	.preamble h3{ /*The road to enlightenment section*/
		margin-top: 100px;
	}
	footer{
		text-indent: 120px;
		font-size: 12px;
		font-weight: bold;
		margin-left:-10px;
		margin-top: -10px;
	}
}


/*sidebar and extra length changes as screen gets bigger*/
@media screen and (min-width: 900px) {
		header h2 { 
		margin: 100px 15px 100px 350px;
		color: rgb(14, 65, 4);
	}
	.summary {
		width: 300px; 
		height: 100px;
		margin: -10px 10px 70px 45px; 
		padding: 10px;
	}
	.sidebar .wrapper { 
		height: 2450px;
	}
	.page-wrapper { 
		background: url(https://cdn.stocksnap.io/img-thumbs/960w/hot-teapot_QLW40Q7LBK.jpg) no-repeat top left; /*tea set*/
		background-size: cover;
		padding: 0 100px 0 100px;  
		margin: 0 100px; 
		position: relative;
		border: 2px solid rgb(4, 65, 27);
		height: 2500px;
	}
	.extra1 {
		background-color: rgb(42, 56, 8);
		position: absolute; 
		top: 0; 
		right: 0; 
		width: 125px; 
		height: 2470px;
	}
	p { 
		padding: 0 10px 10px 50px;
		text-align: justify;
	}
	
	h3 { 
		margin-left:50px;
		margin-top: 50px;
		padding: 15px;
	}
	footer{
		text-indent: 150px;
		font-size: 18px;
	}
}