/*bryanlackey.com style sheet */
body 
{
	font-family: 'Open Sans', sans-serif; /*google Open Sans font */
	background:#332E2E;
	background-image:url('pw_maze_white.png'); /*courtesy subtlepatterns.com */
	color:black;
	font-size: 10pt;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	height:98%;
	width:100%;
	overflow:visible;
	z-index:0;
}

/*header styles */
h1, h2, h3
{
	text-align: left;
	margin: 0;
}

h1
{
	font-size: 24pt;
	font-weight: bold;
	color: #4F4E52;
}

h2
{
	font-size: 17pt;
	font-style: italic;
	color: #4F4E52;
}

a
{
	color: #4F4E52;
}

/* framing boxes */
.innerpadding
{
	clear:both;
	width: 1000px;
	background: white; /* #262424; */
	z-index:0;
	min-height:80%;
	/* max-height:130%; */
	height: auto;
	font-size:10pt;
	position:absolute;
	
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;	
	border-style:solid;
	border-width: thin;
	border-color:black;
	text-align:justify;

	overflow:visible; 
} 

.innerbox
{
	padding:.5em 1em 1em 1em;
	overflow:visible;	
} 

ul.innerbox
{
	position:relative;
}

.outerbox
{
	width: 1000px;
	text-align: left;
	font-size: 200%;
	margin-left: auto;
	margin-right: auto;	
	z-index:1;
	height:100%;
	position:relative;
	overflow:visible;
	
}

.contentbox, .writingsample, .essay /*other than the resume boxes, which have specific formatting, all of these are various innermost
									  boxes.  Each has specific h3, h4, and/or p formattings */
{
	clear:both;
	margin:1% 0 -2em 0;
	padding-bottom:3em; 
	position:relative;
	height:auto;
	overflow:hidden;
	display:inline-block;
	  
}

img
{
	float:right;
	padding: 0 0 5px 5px;
} 

/*music display properties to center images and not screw up the text */
img.musicexample-large, img.musicexample-small, img.centeredpic
{
	float:none;
	position:relative;
	display:inline-block; 
    margin-left: auto;
    margin-right: auto;
	left: 50%;
	right:50%;
	transform: translate(-50%); 
	object-fit:scale-down;
} 

img.centeredpic
{
	width:100%;
}
img.musicexample-large
{
	height:50%;
	width:50%; 
}

img.musicexample-small
{
	height:80%;
	width:80%;
}

img.instrumentimage-left, img.instrumentimage-right
{
	margin-left:0;
	margin-right:1em;
	height:25%;
	width:25%;
	padding-bottom:0.5em;
	object-fit:scale-down;
}

img.instrumentimage-left
{
	float:left;
}

img.instrumentimage-right
{
	float:right;
}


.historybox
{
	display:block;
	clear:both;
	margin:1% 0 -2em 0;
	padding-bottom:1em; 
	position:relative;
	height:auto;
	overflow:auto;
}

.externalexamplevideo
{
	display:block;
	margin: 0 auto;
}

/*formatting for playing example videos made by me */
.examplevideo
{
	
}

/*formatting for grip demo images */
img.grippic
{
	
}
/*menu stuff */
/*general menu section */
.nav, .nav ul 
{
	padding: 0;
	margin: 5 0 5 0; 
	list-style: none;
	position:relative;
	font-weight:bold;
	width:100%;
}

.nav
{
	font-size:10pt;
	border-style:solid;
	border-width:thin;
	border-color:E0DFDF; /* a light silver color that will still show up against white resume backgrounds */
	height:1.5em; /*if you don't give it some height, the borders get chopped off */
	text-decoration:none; /*for text formatting */
	background-color:black;
	z-index:100;
	position:relative;
	margin-top: 1.5em;
	margin-bottom: 0;
	
}

.nav a 
{
	width: auto;
}

/*to avoid duplicate borders */
.nav .first
{
	border-left-style:none;
}

.nav .last
{
	border-right-style:solid;
	border-right-width:thin;
	position:relative;
	border-color:#E0DFDF; /* a light silver color that will still show up against white resume backgrounds */
}

.nav li 
{
	float: left;
	width:120px;
	border-left-style:solid;
	border-left-width:thin;
	padding: 2px 0 0 2px;
	position:relative;
	border-color:#E0DFDF; /* a light silver color that will still show up against white resume backgrounds */
}

.nav .menutops
{
	color:white;
}
 
.nav li ul 
{
	position: absolute;
	visibility:hidden;
}

.nav li:hover ul 
{
	left: auto;
	position:relative;
}

.nav li:hover ul, .nav li.sfhover ul 
{
	visibility:visible;
	font-weight:900;
}

.nav a 
{
	text-decoration:none;
	/* color:white; */
	color:#E3E5E6;
	position:relative;
}

.nav a:hover, .dropdown a:hover
{
	color:white;
	position:relative;
	width:100%;
}

.nav a:hover
{
	/* font-weight:900; */
}

.dropdown a:hover
{
	/* font-weight:bold; */
	color: white;
}

.nav  .first .dropdown li
{
	border-left-style:solid;
	border-left-width:thin;
	margin: 0 0 0 -3px;
}

.dropdown 
{
	position:fixed;
	border-width:thin;
	border-bottom-style:solid;
	visibility:hidden;
	margin-top:4px;
}

.dropdown ul
{
	position:relative;
}

.dropdown li
{
	clear:both;
	border-width:thin;
	border-style:none solid solid none;
	float:left;
	width:200px;
	
	font-weight:normal;
	list-style:none;
	display:inline-block;
	position:relative;
	background-color:black;
	margin: 0 0 0 -2px;
}

a.resumepdf  /*for pdf downloads */
{
	font-size:.8em;
	color:red;
}

a.resumepdf:hover
{
	color:blue;
}

/*page specifc stylings */

/*music pages */
/*musicoptionslist and floating player work like col1 and col2, except with an uneven 2 column split  */

.musicoptionslist, .floatingplayer
{
	float:left;
	position:relative;
	padding:0 0 1em 0;
	text-align:justify;
}

.doublepage .musicoptionslist
{
	width:70%;			/* left column content width (column width minus left and right padding) */
}

.doublepage .floatingplayer
{
	width:30%;			/* left column content width (column width minus left and right padding) */
	margin-top:5%;
	margin-left:auto;
	margin-right:auto;
}

.floatingplayer h3
{
	text-align:center;
	font-weight:bold;
	font-style:italic;
	text-decoration:underline;
}

.musicbox1, .musicbox2, .musicbox3, .musicbox4
{
	margin-top:1%;
	margin-bottom:1%;
}

.musicbox1
{
	left:5%;
	position:relative;
	width:95%;
}

.musicbox2
{
	left:10%;
	position:relative;
	width:90%;
}

.musicbox3
{
	left:15%;
	position:relative;
	width:85%;
}

.musicbox4
{
	left:20%;
	position:relative;
	width:80%;
}

.smallmusicplayer
{
	width:100%;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

h5.compositionlist, .compositionlist h5 
{
	font-size:10pt;
	font-style:normal;
	text-decoration:underline;
	font-weight:normal;
	display:inline;
}

a.sheetmusicdownload
{
	color:#3D6DFE; /*not quite as bright as html blue */
}

/*writing pages */
ul.writinglist
{
	list-style-type:square;
}

ul.writinglist li
{
	margin-top:1em;
}

.writingsample p
{
	text-indent:2em;
	text-align:justify;
	margin-bottom:-1em; 
	position:relative;
}

.writingsample h3
{
	text-align:center;
	font-size:110%;
	position:relative;
}

.samplelist h4
{
	display:inline;
	font-size:100%;
}

.essay h4
{
	font-weight:bold;
	font-size:100%;
	text-decoration:underline;
	margin-bottom:0; 
	position:relative;
}

.essay h5
{
	display:inline;
	font-size:100%;
	font-weight:bold;
	text-decoration:none;
	font-style:normal;
}

.essay p
{
	margin-bottom:0;
	position:relative;
}

ul.argumentlist
{
	list-style-type:none;
	display:inline;
	position:relative;
	margin-top:0;
}

ul.argumentlist li
{
	margin-top:-1em;
	position:relative;
	margin-left:0;
	margin-bottom:2em;
}

ol.numlist
{
	position:relative;
	list-style-type:decimal;
	margin-top:1em;
}

ol.numlist li
{
	margin-left:1em;
	margin-bottom:1em;
	clear:both;
	position:relative;
	display:list-item;
}

/*programming pages */
ul.codelist
{
	list-style-type:none;
	float:left;
	position:relative;
	clear:both;
	height:auto;
	margin-bottom:-2em; /*otherwise it screws up the bottom border */
}

ul.codelist li
{
	display:block;
	margin-bottom:1em;
}

ul.codelist li p
{
	min-height:10em;
	max-height:10em;
	margin-top:0;
}

ul.codelist img
{
	height:150px;
	width:150px;
	display:block;
	position:relative;
	vertical-align:text-bottom;
	border-style:solid;
	border-width:thin;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-1em;
	
}

ul.codelist h4
{
	text-align:center;
	display:block;
	margin-bottom:0;
}

.col1, .col2
{
	float:left;
	position:relative;
	text-align:justify;
}

.doublepage
{
	width:100%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2em;
}

.doublepage .col1
{
	width:46%;			/* left column content width (column width minus left and right padding) */
}

.doublepage .col2 
{
	width:46%;			/* left column content width (column width minus left and right padding) */
}

/* resume css, which is far more efficient than having a word processor generate css at you :P 
  a lot of these have display:inline and bottom margins of 1em, which generates an extra line at the bottom but not at the top */

.resumepadding
{

	font-family:Times New Roman;
	font-size: 12pt;
	text-align:justify;
	color:black;
	background-color:white;
	
	clear:both;
	margin-top: 30px;	
	margin-left:auto;
	margin-right:auto;
	position:absolute;
	padding-top:2.5%;
	width:1000px;
	height:auto;
	overflow:visible;
	background-image:url('white_plaster-white.png'); /*courtesy subtlepatterns.com */
	z-index:0;  
}
 
 
.resume
{
	width:90%;
	height:96%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-2em;
	padding-bottom:3em;
	display:block;
	height:auto;
	overflow:visible;
	position:relative;
}


.resume h1
{
	font-size:16pt;
	font-weight:bold;
}

.resume ul
{
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
}

.resume li
{
	margin-bottom:1em;
}


.resume .header
{
	text-align:center;
	font-weight:bold;
	margin-bottom:1em;
}

.resume h2
{
	text-align:center;
	font-style:normal;
	font-size:14pt;
	font-weight:bold;
}

.resume h3, h4
{
	font-size:12pt;
	text-align:left;
	
}

.resume h3
{
	font-weight:normal;
	text-decoration:underline;
	position:relative;
}

.resume h4
{
	font-weight:bold;
	text-decoration:none;
	display:inline;
}

.resume p
{
	display:block;
	margin-top:0;
	margin-bottom:1em;
}


.section 
{
	position:relative;
	margin-bottom:1em;
} 

.workposition
{
	display:inline;
	left:0%;
	position:relative;
}

.workposition h4
{
	display:inline;
}

.workdate 
{
	margin-top: -1em;
	position:relative;
	float:right;
	text-align:right;
	
}


h3.objective /*for the one thing I couldn't track down */
{
	font-weight:bold;
	text-decoration:none;
	font-size:12pt;
	margin:0 0 0 -.25em;
}

table.resumetable
{
	margin-bottom:0em;
	position:relative;
}

.resumetable td
{
	vertical-align:top;
}
		
h3.musicresume 
{
	font-weight:bold;
	text-decoration:none;
	font-size:12pt;
	margin:0;
}

td.datecell
{
	width:8em;
}

h5
{
	font-style:italic;
	font-size:12pt;
	margin:0;
	font-weight:normal;
}

ul.interestlist
{
	list-style-type:disc;
	display:block;
	margin-left:1.5%;
}

ul.interestlist li
{
	margin-bottom:0;
}