/**
 * www.TorbenSorensen.com CSS template
 */

:root {
	--color-background: #CDA13D;
	--color-header-bg: #CCAD71;
	--color-content-bg: #FFF;
	--color-text-default: #000;
	--color-nav-text: #62490F;
	--color-nav-border: #B3B386;
	--color-nav-bg: #E2C98F;
	--color-nav-hover: #9D710D;

	--font-family-body: Arial, sans-serif;
	--font-family-heading: Verdana, sans-serif;
	--font-family-nav: Tahoma, sans-serif;

	--font-size-sm: 0.8rem;  /* 10pt */
	--font-size-md: 1rem;    /* 12pt */
	--font-size-lg: 1.1rem;  /* 13pt */
	--font-size-xl: 1.2rem;  /* 14pt */
}

body {
	font: var(--font-size-md) var(--font-family-body);
	color: var(--color-text-default);
	background-color: var(--color-background);
	margin: 0;
	padding: 0;
}

#content {
	display: flex;
	gap: 15px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color-background);
	max-width: 1184px;
}

.bodycontent {
	margin-left: auto;
	margin-right: auto;
	width: 1184px;
	text-align: left;
	max-width: 100%;
}

#banner {
	text-align: center;
	background: url("/images/allimages.gif")
		no-repeat -116px 0;
	width: 968px;
/*	width: 984px; */
	height: 141px;
	padding-left: 260px;
	max-width: 100%;
}

.headerbackground {
	background: url("/images/tileheader4.gif")
		repeat-x;
}

hr {
	margin-top: 25px;
	margin-bottom: 25px;
}

#centercontent {
	flex: 1; /* Allows this column to grow and fill available space */
	min-width: 0; /* Prevents flex items from overflowing */
	padding: 0 15px;
	text-align: center;
}

#footer {
	background-color: var(--color-background);
	font-size: 0.75rem;
	text-align: center;
	padding: 20px 10px 10px;
}

.leftsidemenus {
	flex: 0 0 140px; /* Do not grow, do not shrink, base width of 140px */
	padding: 0 0 0 10px;
}

.rightsidemenus {
	flex: 0 0 140px;
	padding: 0 0 0 10px;
}

#w3cxhtml1image {
	display: inline-block;
	width: 88px;
	height: 31px;
	background: url("/images/allimages.gif")
		no-repeat 0 -152px;
}

#resumeimage {
	background: url("/images/allimages.gif")
		no-repeat 0 0;
	width: 116px;
	height: 152px;
}

#breadcrumb {
	font-size: var(--font-size-sm);
	color: var(--color-text-default);
	text-align: left;
	padding: 2px 10px 9px;
}

.resumeheader {
	font-size: var(--font-size-md);
	font-weight: 700;
	text-align: left;
	color: var(--color-text-default);
	background-color: var(--color-header-bg);
	border: 1px var(--color-text-default) solid;
	padding: 3px 14px;
}

.resumetext {
	font-family: var(--font-family-body);
	font-size: var(--font-size-md);
	text-align: left;
	color: var(--color-text-default);
	background-color: var(--color-content-bg);
	border: 1px var(--color-text-default) solid;
	border-top: none;
	margin-bottom: 10px;
	padding: 10px 20px;
}

.resumetext ul {
	font: 11pt Arial, sans-serif;
	list-style-type: square;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 10px;
}

.resumetext li {
	padding: 3px 20px 3px 10px;
}

.summarytext {
	font-size: var(--font-size-lg);
	padding: 12px 30px 22px;
}

.resumecompany {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	text-align: left;
	padding: 2px;
}

.job-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em; /* Adds space between items if they wrap */
}

.resumedate {
	font-size: var(--font-size-sm);
	text-align: right;
	padding: 2px;
}

.resumejobheading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	text-align: left;
	padding: 2px;
}

.navtext {
	text-align: left;
	font-family: var(--font-family-nav);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-nav-text);
	margin-left: 10px;
}

.rightnavtext {
	text-align: left;
	font-family: var(--font-family-nav);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-nav-text);
	margin-left: 10px;
}

.navlink {
	font-family: var(--font-family-nav);
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--color-text-default);
	background-color: var(--color-nav-bg);
	border: 1px var(--color-nav-border) solid;
	border-left: 4px var(--color-nav-border) solid;
	border-right: 4px var(--color-nav-border) solid;
	margin: 8px;
	padding: 4px 2px 4px 15px;
}

a.navlinka {
	color: #000;
	text-decoration: none;
}

a.navlinka:hover {
	color: var(--color-nav-hover);
}

.skillsheading {
	font: bold 12pt Arial, sans-serif;
	padding-top: 10px;
	padding-bottom: 4px;
}

.skillsheader {
	font: bold 10pt Arial, sans-serif;
}

.skillsname {
	font: bold 11pt Arial, sans-serif;
}

.skillsdata {
	font: 10pt Arial, sans-serif;
}

ul {
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
}

#banner span,#w3cxhtml1image span,#resumeimage span {
	display: none;
}

a.dropdownmenuitem,a.dropdownmenuitem:link,a.dropdownmenuitem:visited,a.dropdownmenuitem:active
	{
	color: #DDD;
	text-decoration: none;
}

.bannerpadding {
	padding-left: 180px;
}

/* --- Responsive Design --- */

/* For tablets and smaller devices */
@media screen and (max-width: 1184px) {
	.bodycontent, #content {
		width: 100%;
	}

	.leftsidemenus, #centercontent, .rightsidemenus {
		flex: 1 1 100%; /* Allow items to grow and shrink, taking full width */
		float: none; /* Keep for full override */
		width: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	.bannerpadding {
		padding-left: 0;
		display: flex;
		justify-content: center;
	}

	#banner {
		padding-left: 0;
	}
}

/* For mobile phones */
@media screen and (max-width: 768px) {
	.job-header {
		flex-direction: column;
		align-items: flex-start; /* Align items to the left */
		gap: 0.25em;
	}

	.resumedate {
		text-align: left;
		font-size: 9pt;
	}
}