style.css

/* 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 { 
	margin: 0 auto;
	box-sizing: border-box;
}

h1, h2, h3{
	font-family: Georgia, serif;
}

p { 
	font-family: Verdana, Geneva, sans-serif;
	margin-top: 0; 
	text-align: justify;
}

h3 { 
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px; 
	margin-bottom: 0; 
	color: #5d7e25;
}


a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #5d7e25;
}

a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
}

a:hover, a:focus, a:active { 
	text-decoration: underline; 
	color: #9685BA;
}
abbr {
	border-bottom: none;
	text-decoration: none;
	}




/* specific divs */
.page-wrapper {}

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

header h1 {
  display: block;
  position:absolute;
  top:40%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:7em;
  text-shadow: 2px #000;
  -ms-transform: translate(0,-50%); /* IE 9 */
    -webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);   

}
header h2 { 
  display: block;
  position:absolute;
  top:60%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:3em;
  -ms-transform: translate(0,-50%); /* IE 9 */
    -webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);   
}

header { 
	background-image: url(http://wallpapercave.com/wp/oeF0kRC.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
}

.summary {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}
.summary p {
	margin-top: 15px;
}

.preamble {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}

.main{
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}


.supporting {}

footer { 
	text-align: center; 
	}
footer a:link, footer a:visited { 
	margin-right: 20px; 
	}

.sidebar { 

	width: 100%;
    background-color: #5d7e25;
    overflow: auto;
}


.sidebar .wrapper { 
	font: 10px verdana, sans-serif; 
	max-width: 700px;
    margin: 0 auto;
    width: 100%;

}

.sidebar h3.select, .sidebar h3.archives,  .sidebar h3.resources{ 
	color: #fff;
    font-size: 16px;
}

.design-selection, .design-archives, .zen-resources{
	width: 33.3333333333%;
    float: left;
}



.sidebar h3.archives, .sidebar li.next, li.viewall { 
	padding-left: 70px;
	
	}
.sidebar h3.resources, .sidebar li.view-css, li.css-resources, li.zen-faq, li.zen-submit, li.zen-translations {  

	display: block;
	padding-left: 70px;
	
	}


.sidebar ul {
	margin: 0;
	padding: 0;
	}
.sidebar li {
	line-height: 1.3em; 
	display: block; 
	padding-top: 5px; 
	margin-bottom: 5px;
	list-style-type: none;
	color: #fff;
	}
.sidebar li a:link {
	color: #fff;
	}
.sidebar li a:visited {
	color: #B3AE94;
	}




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


header h1 {
  font-size:4em;
 

}
header h2 { 
  font-size:2em;
 
}



}





	@media screen and (max-width: 700px) {
    body, section{
        width: 95%
        margin: 0 auto;}

	.sidebar .wrapper { 
	width: 100%;
	margin: 0 auto;}

    .design-selection, .design-archives, .zen-resources{
	width: 95%;
	margin: 0 auto;}



	.sidebar h3.select, .sidebar h3.archives,  .sidebar h3.resources{ 
	text-align: center;
}

.design-selection, .design-archives, .zen-resources{
	text-align: center;
}



.sidebar h3.archives, .sidebar li.next, li.viewall { 
	padding-left: 0px;
	text-align: center;
	
	}
.sidebar h3.resources, .sidebar li.view-css, li.css-resources, li.zen-faq, li.zen-submit, li.zen-translations {  

	display: block;
	padding-left: 0px;
	text-align: center;
	
	}

header h1 {
  font-size:3em;
 

}
header h2 { 
  font-size:1em;
 
}

}


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

header h1 {
  font-size:2em;
 

}
header h2 { 
  font-size:1em;
 
}


}