/*** 

Author: Shawn Mitchell
Title : CIS Instructor

Desc  : Portfolio and Classes Page

***/

/*** Generic Page Styles ***/
html, body {
	background-color: #212121;
	height: 100%; 
}

@keyframes forrestScroll {
	from { 
		background-position: 0 0; 
	}
	to { 
		background-position: 100% 0; 
	}
}

#scrolling {
	width: 100%; 
	height: 125px; 
	background-image: url(../assets/forrest.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;

	animation: forrestScroll 10s linear infinite;
}
.container {
	min-height: 100vh;
	background-color: #5C5393;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
	/*background-image: url(../assets/backdrop.png);
	background-size: cover;*/
}

img.profile {
	border-radius: 50%; 
	border: ridge 2px white; 
	
}

.no-gutters { 
	padding-left: 0; 
	padding-right: 0;
}

.footer {
	clear: both;
	background-color: #0F083B;
	min-height: 50px;
}
	/* width */
::-webkit-scrollbar {
	width: 10px;
	margin-left: 4px;
}

	/* Track */
::-webkit-scrollbar-track {
	background: #5C5393;
}

	/* Handle */
::-webkit-scrollbar-thumb {
	background: #323232;
}

	/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/*** Profile Styles (Left Bar) ***/

#profileColumn h3, #profileColumn h4 {
	font-variant: small-caps;
	text-align: center;
	text-shadow: 1px 1px 1px #FFFFFF;
}

#profileColumn {
	background-color: #3C8D2F; 
	height: 100%; 
	padding: 10px;
	border-right: solid 2px #211858;
	background-image: url(../assets/backdrop2.png);
	background-size: cover;
}

#profileColumn nav {
	margin-bottom: 10px; 
}

#profileColumn > nav > ul {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}

#profileColumn > ul > li > ul > li a:link, #profileColumn > ul > li > ul > li a:visited {
	color: #64B058;
	font-weight: bold;
}

#profileColumn > ul > li > ul > li a:hover, #profileColumn > ul > li > ul > li a:active {
	color: white;
	text-decoration:none;

}

#classList, #otherThings {
	font-weight: bold;
	color: #323232; 
}

#profileColumn > nav > ul > li {
	float: left; 
	font-variant: small-caps;
	text-align: center;
	width: 50%; 
}

#profileColumn > nav > ul > li a {
	width: 100%; 
	text-decoration: none; 
}

#profileColumn > nav > ul > li a:link, #profileColumn > nav > ul > li a:visited {
	color: white;
	font-weight: bold; 
}

#profileColumn > nav > ul > li:hover, #profileColumn > nav > ul > li:active {
	background-color: #323232; 
	color: white; 
}

#profileColumn ul {
	padding-left: 0px; 
	list-style-type: none; 
}

#classList, #otherThings {
	font-variant: small-caps;
}

#profileColumn h5 { /*expert {*/
	margin-bottom: -10px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: rgba(12,12,12,0.2);
	color: white;
	display: inline-block;
	border-top-right-radius: 10px; 
	border-top-left-radius: 10px;
}

#profileColumn ul {
	background-color: rgba(12,12,12,0.2);
	padding: 4px;
}

nav#expert_nav ul::after {
	clear: both;
	content: "";
	display: table;
}

nav#expert_nav ul {
	padding-top: 20px;
}

#code-img {
	margin: 0 auto;
	display: block;
}

.legend {
	min-height: 50px;
	border: solid 2px #323232;
	width: 100%;
}

#webLegend {
	background-color: #F8A6AC;
}
#appLegend {
	background-color: #B0DF95;
}
#gameLegend {
	background-color: #857DB1;
}

#theLegends  h5{
	font-variant: small-caps;
	font-size: 16px;
	width: 100%;
	text-align: center;
}

#profileColumn > ul > li a:link, #profileColumn > ul > li a:visited {
	color: #64B058;
	font-weight: bold;
}

#profileColumn > ul > li a:hover, #profileColumn > ul > li a:active {
	color: white;
	text-decoration:none;

}

/*** ***/
		
.card {
	margin-top: 10px;
	padding: 10px 15px;
	background-color: #857DB1;
	position: relative;
	border: double #323232 2px; 
} 

.card-web { 
	background-color: #F8A6AC;
}
.card-app {
	background-color: #B0DF95;
}
.card a {
	margin-top: 8px;
	/*position: absolute;
	bottom: 0;
	right: 10px;*/
}		
.card p {
	/*height: 70px;*/
	padding-right: 4px;
	/*overflow:auto;*/
}
.card img {
	border: double 2px #805815;
}
.card h5, .card h3 {
	font-variant: small-caps;
	text-align:center;

}
.card h3 {
	font-size: 20px;
}
.card h5 {
	font-size: 15px;
}
a.btn-primary:link, a.btn-primary:visited {
	background-color: #0F083B;
	border-color: #323232;
	min-height: 45px;
	border-radius: 0px;
}
a.btn-primary:hover {
	background-color: #5C5393;
}
.clear-both {
	clear: both;
}
hr.clear-both { 
	margin-top: 10px; 
}
.align-right{
	text-align: right;
}