/*******************************************************************************
    Stylesheet for corwinknauss.com
    Author: Corwin Knauss
    Date:   2018-07-03
*******************************************************************************/

/*****  Global Styles  ********************************************************/

/** Containers **/
body {
	background-color: #002240;
	color:            #FFFFFF;
	margin:           0;
}

div {
	overflow: auto;
}

/** Links **/
a, a:link, a:visited {
	color:           #9CF;
	text-decoration: none;
}

/** Horizontal Rule **/
.titleHR {
	margin-left:    auto;
	margin-right:   auto;
	height:         2px;
	background:     linear-gradient(to right, rgba(0, 34, 64, .75), #FFFFFF, #FFFFFF, #FFFFFF, rgba(0, 34, 64, .75));
}

/** Various Font Control **/
.title {
	color:         #FC3;
	font-size:     x-large;
	text-indent:   10px;
	margin-bottom: 10px;
	margin-top:    5px;
	border-bottom: 1px #FFF solid;
	text-shadow:   1px 1px 0 #000;
}

/** Title **/
.titleDiv {
	margin-left:  auto;
	margin-right: auto;
	padding-top:  6px;
}

.titleDiv img {
	margin-left:  auto;
	margin-right: auto;
	display:      block;
	max-width:    400px;
}

/*
.headerCont {
	width:        100%;
	position:     fixed;
	margin-left:  auto;
	margin-right: auto;
	display:      block;
}
*/

/** Navigation **/
.navigationDiv, .navigationDivMin {
	margin-left:  auto;
	margin-right: auto;
	background:   linear-gradient(to right, #002240, #113361, #113361, #113361, #002240);
}

.navigationDiv a:hover, .navigationDivMin a:hover {
	color:            #FC3;
	background-color: #002240;
}

/** Navigation Links **/
.navigationDiv ul, .navigationDivMin ul {
	position:        relative;
	list-style-type: none;
	margin:          0;
	padding:         0;
}

.navigationDiv li {
	display: inline;
}

.navigationDiv li a, .navigationDivMin li a {
	display:     block;
	font-size:   larger;
	font-weight: bold;
	text-align:  center;
	padding:     8px 0 8px 0;
}

/** Breadcrumbs **/
.breadcrumbsDiv {
	margin-left:  auto;
	margin-right: auto;
	padding:      6px;
}

.breadcrumbsDiv p {
	margin:       0;
	margin-left:  30px;
	margin-right: 30px;
	color:        #557795;
}

.breadcrumbsDiv a:hover {
	color: #FC3;
}

/** Main Content Container **/
.bodyDiv {
	/*
	display: flex;
	flex-direction: column;
	*/
	content: "";
	clear: both;
	display: table;

	margin-left:  auto;
	margin-right: auto;
	/*margin-top:   40px;*/
	padding:      12px 0 30px 0;
	/*padding-botton: 70; for footer locked to window bottom */
}

.bodyDiv img {
	padding-bottom: 12px;
}

.textContent {
	margin-left: 10px;
}

/** Footer **/
.footerDiv {
	width:            100%;
	border:           0;
	color:            #ffffff;
	/*position:         fixed;
	bottom:           0;*/
	text-align:       center;
	margin-left:      auto;
	margin-right:     auto;
	background-color: rgba(0, 34, 64, .90);
}

/** Photo Slider **/
.mySlides {
	display:      none;
	margin-left:  auto;
	margin-right: auto;
}

.w3-animate-fading {
	animation: fading 10s infinite
}

@keyframes fading {
	0% {
		opacity: 0
	}
	25% {
		opacity: 1
	}
	75% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

/** Sub-Page Navigation Blocks **/
.subNavigationBlock {
	margin-bottom: 15px;
	overflow: auto;
}

.subNavigationBlock h2 {
	margin-top: 0;
}

.subNavigationBlock img {
	float: left;
	width: 200px;
	padding-right: 8px;
}

/** Filler image **/
.divImageFill200 {
	width: 200px;
	height: 200px;
	float: left;
	padding-right: 8px;
	padding-bottom: 12px;
}

/** Table Style Container **/
.cellFloat {
	float: left;
	padding-right: 12px;
}

/***** Sub-Page Body Blocks ***************************************************/
.subBodyBlock {
	padding: 0 2px 0 20px;
}

.subBodyTitle {
	font-size: larger;
	font-weight: bold;
}

/***** Portfolio Page *********************************************************/
.resumeBlock {
	text-align:    center;
	border:        1px solid #FFF;
	padding:       8px;
	margin-left:   60px;
	margin-right:  60px;
	margin-bottom: 16px;
	font-size:     x-large;
	background:    #113361;
}

.resumeBlock a {
	display:       block;
}

/***** Contact Page ***********************************************************/
.contactImage {
	margin-top: 8px;
}

.contactContent {
	margin-left: 5px;
}

/*****  Mobile Mode  **********************************************************/
@media all and (max-width: 1099px) {

	/** Title **/
	.titleDiv {
		width:      100%;
		background: linear-gradient(to right, #002240, #5577A5, #002240);
	}

	.titleDiv img {
		width: 100%;
	}

	/** Horizontal Rule **/
	.titleHR {
		width: 100%;
	}

	/** Navigation **/
	.navigationDiv {
		width:   100%;
		display: none;
	}

	.navigationDivMin {
		width:   100%;
	}

	/** Breadcrumbs **/
	.breadcrumbsDiv, .breadcrumbsHR {
		display: none;
	}

	/** Main Content Container **/
	.bodyDiv {
		width:     100%;
	}

	img.mySlides {
		max-width:  95%;
		max-height: 95%;
	}

	/** Contact Page **/
	.contactImage {
		width:        250px;
		margin-top:   8px;
		margin-left:  auto;
		margin-right: auto;
	}

	.contactContent {
		width:   99%;
		padding: 0;
	}


	/** Sub-Page Navigation Blocks **/
	.subNavigationBlock img {
		width: 120px;
	}

	/** Filler image **/
	.divImageFill200 {
		width: 120px;
		height: 120px;
	}

}

/*****  Desktop Mode  *********************************************************/
@media all and (min-width: 1100px) {

	/** Title **/
	.titleDiv {
		width:      1100px;
		background: linear-gradient(to right, #002240, #113361, #5577A5, #113361, #002240);
	}

	/** Horizontal Rule **/
	.titleHR {
		width: 1100px;
	}

	/** Navigation **/
	.navigationDiv {
		width: 1100px;
		height: 40px;
	}

	.navigationDivMin {
		display: none;
	}

	/** Navigation Links **/
	.navigationDiv li {
		float: left;
		width: 220px;
	}

	/** Breadcrumbs **/
	.breadcrumbsDiv {
		width: 1088px;
	}

	/** Main Content Container **/
	.bodyDiv {
		width: 1050px;
	}

	img.mySlides {
		max-width:  1050px;
		max-height: 80vh;
	}

	/** Contact Page **/
	.contactImage {
		float: right;
		width: 250px;
	}

	.contactContent {
		float: left;
		width: 770px;
	}

	/** Sub-Page Navigation Blocks **/
	.subNavigationBlock {
		float: left;
		width: 49%;
		padding-right: 1%;
	}

}


/***** DEBUG ******************************************************************/
/*
body div {
	border: 1px solid #002240;
}

.titanic {
	float: none;
}
*/