@charset "UTF-8";
/* Sarah-Jane Lesie CSS Document */

/* links */
a:link {
	color: #f79837;
	text-decoration: none;
}

a:visited {
	color: #f79837;
}

a:hover {
	color: #f79837;
	text-decoration: underline;
}

/* main material */
body {
	font-family: Baskerville;
}

.clear-five {
	width: 100%;
	height: 5vh;
}

.container {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
}

.top-padding {
	width: 100%;
	height: 5vh;
	background-color: white;
}

.top-inside {
	position: fixed;
	height: 5vh;
	width: 100%;
	background-color: white;
}

.left-padding {
	width: 100%;
	height: 5vh;
	position:relative;
}

.left-bar {
	width: 20vw;
	float: left;
	position: relative;
	font-size: 0.9em;
}

.left-bar h2 {
	margin: 0;
	text-align: right;
	font-weight: 400;
	letter-spacing: 6px;
	font-size: 28px;
}

.index-image {
	margin-top: 5vh;
	width: 20vw;
	height: 20vw;
	background-image: url('index-image.jpg');
	background-size: cover;
}

.about-text {
	margin-top: 5vh;
	text-align: right;
	position: relative;
}

.content {
	margin-top: 100px;
}

.right-content {
	width: 55vw;
	float: right;
}

.cv-content table {
	width: 100%;
}

.cv-content td {
	margin: 2px;
}

.cv-pdf {
	height: 60vh;
	border-bottom: 2px #525659 solid;
}

.nav-bar {
	width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0 0 30px 0;
	font-family: Montserrat;
	position: fixed;
	background-color: white;
}

.nav-bar li {
    display: inline;
	padding: 6px 10px 6px 10px;
	margin-right: 10px;
}

.nav-bar li.active {
	background-color: #f79837;
}

.nav-bar li.active a:link {
	color: white;
}

.nav-bar li:hover {
	background-color: #f79837;
	cursor: pointer;
}

.nav-bar li:hover a:visited {
	color: white;
}

.nav-bar li:hover a:link {
	color: white;
}

.nav-bar li a:link {
	text-transform: uppercase;
	letter-spacing: 2px;
	color: black;
	text-decoration: none;
}

/* general */
h2 {
	font-family: Montserrat;
	text-transform: uppercase;
}

h3 {
	text-decoration: underline;
	text-align: center;
}

.large {
	font-size: 1.3em;
}

.top {
	border-bottom: 4px #f79837 solid;
}

/* dropdown */
.dropdown {
	padding: 6px 10px 6px 10px;
	margin-right: 10px;
	color: black;
    position: relative;
    display: inline-block;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.dropdown:hover {
	color: white;
	background-color: #f79837;
	cursor: pointer;
}

.dropdown:focus {
	color: white;
	background-color: #f79837;
	cursor: pointer;
}

.dropdown-content {
	color: black;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
	margin: 6px 0 0 -10px;
    z-index: 1;
	text-transform: none;
}

.dropdown-content a {
    color: black;
    padding: 5px 8px;
    text-decoration: none;
    display: block;
	font-weight: 400;
}

.dropdown-content a:hover {
	background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:focus .dropdown-content {
    display: block;
}

@media only screen and (max-device-width: 670px) {
	.nav-bar {
		font-size: 0.7em;
	}
	.left-bar {
		width: 20vw;
		float: left;
		position: fixed;
		font-size: 0.7em;
	}
	h2.top {
		font-size: 10pt;
	}
	h2.bottom {
		font-size: 10pt;
	}
}