/* stylesheete.css */

body {
    text-align: center;
	font-family: "Slabo 27px", Georgia, serif;
	background-color: #FFFAFA;
	color: #7F7D7D;
	font-size: 70%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "The Girl Next Door", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

h1, h2 {
	letter-spacing: 5px;
}

h3, h4 {
	letter-spacing: 3px;
}

h5, h6 {
    letter-spacing: 2px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a {
    text-decoration: none;
	color: #FFADAD;
}

/* nav */
    .nav {
        font-family: "The Girl Next Door", Helvetica, Arial, sans-serif;
        text-transform: lowercase;
        letter-spacing: 3px;
		word-spacing: -4px;
    }
    
    .nav ul {
        display: inline-block;
    }
    
    .nav ul li {
        display: inline;
		position: relative;	
    }
    
    .nav a {
		color: #7F7D7D;
		display: inline-block;
		padding: 0.5em;
    }
    
    .nav .current {
		display: inline-block;
		padding: 0.5em;
    }
    
    .nav .hide {
		color: #FFFAFA;
		display: inline-block;
		padding: 0.5em;
	}
    
    .nav a:hover {
        color: #FFADAD;
    }

/* header */
	#header h1, #header h2 {
		margin-bottom: 0;
	}

	#header h2 {
	    margin-top: 0;
	}

/* menu */
	#menu ul {
		border-bottom: 1px solid #7F7D7D;
	}

/* main */
    .images {
    	padding-top: 2em;
    }
    
    #instruction {
    	margin-bottom: -2em;
    }
    
    #aboutphoto {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    
    #aboutcontent {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    
    #aboutcontent p {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #portfoliooverview {
        max-width: 200px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 0.5em;
    }
    
    #portfoliooverview img {
        width: 96px;
        height: 96px;
    }
    
    #portfolioimage img {
        max-width: 80%;
        height: auto;
    }

/* imagenav */
	#imagenav ul li {
		padding-left: 1em;
		padding-right: 1em;
	}

/* footer */
    #footer {
        font-size: 95%;
    }

	#footer p {
	    display: inline-block;
	    padding: 0.5em;
	    border-top: 1px solid #7F7D7D;
    }
    
@media only screen and (orientation: landscape) {
	#aboutphoto {
		display: inline-block;
		vertical-align: middle;
	}
	
	#aboutcontent {
		display: inline-block;
		vertical-align: middle;
	}
}

@media only screen and (min-width: 600px) {
    #portfoliooverview {
        max-width: 400px;
        height: auto;
    }
}

@media only screen and (min-width: 600px) and (orientation: portrait) {
    body {
		font-size: 100%;
	}
	
	#footer {
        font-size: 85%;
    }
	
	#portfoliooverview img {
        width: 128px;
        height: 128px;
    }

    #portfoliooverview {
        max-width: 600px;
        height: auto;
    }
}

@media only screen and (min-width: 800px) {
	body {
		font-size: 100%;
	}
	
	#footer {
        font-size: 85%;
    }
	
	#portfoliooverview img {
        width: 128px;
        height: 128px;
    }
    
    #portfoliooverview {
        max-width: 600px;
        height: auto;
    }
    
    #aboutphoto {
		display: inline-block;
		vertical-align: middle;
	}
	
	#aboutcontent {
		display: inline-block;
		vertical-align: middle;
	}
	
	#aboutcontent p {
		max-width: 70%;
	}
}

@media only screen and (min-width: 800px) and (orientation: portrait) {
    #portfolioimage img {
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (min-width: 1600px) {
    body {
		font-size: 140%;
	}
	
	#footer {
        font-size: 75%;
    }
	
	#portfolioimage img {
        max-width: 100%;
        height: auto;
    }
    
    #aboutcontent p {
		max-width: 60%;
	}
}