/* Site layout. */
#sidebar-toggler {
	position: fixed;
	top: 0;
}

.sidebar {
	overflow-y: auto;
}

.site-content {
	margin-right: 260px;
	height: 100%;
	overflow-y: auto;
}

.banner {
	background:url(../img/banner.jpg) no-repeat center center;
	background-size: 100%; /* Media query this, gets weird when width of entire site is less than 700px. */
	height: 25%;
}

.logo {
	margin-right: 1em;
	width: 64px;
	height: 64px;
}

.glassy {
	opacity: 0.8;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.glassy:hover {
	opacity: 0.9;
}


/* Generic background colours. */
.rail-indigo {
	background: #1d4396;
}

.rail-blue {
	background: #0c89fd;
}

.rail-violet {
	background: #332843;
}

.rail-pink {
	background: #E91E63;
}

.saudade:hover {
	-webkit-transform: rotate(270deg); /* Safari and Chrome */
    -moz-transform: rotate(270deg);   /* Firefox */
    -ms-transform: rotate(270deg);   /* IE 9 */
    -o-transform: rotate(270deg);   /* Opera */
    transform: rotate(270deg);
}

/*
* EmbedResponsively.com's code, especially used for YouTube videos with playlists.
*/
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**
*	Special thanks to UIGradients.com for these awesome colors!
*/
.shroom-haze, #content-home {
	background: #5C258D; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #5C258D , #4389A2); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #5C258D , #4389A2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.emerald-water {
	background: #348F50; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #348F50 , #56B4D3); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #348F50 , #56B4D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.midnight-city {
	background: #232526; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.behongo {
	background: #52c234; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #52c234 , #061700); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #52c234 , #061700); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.peach {
	background: #ED4264; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #ED4264 , #FFEDBC); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #ED4264 , #FFEDBC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.clear-sky {
	background: #005C97; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #005C97 , #363795); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #005C97 , #363795); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.influenza, #content-animation {
	background: #C04848; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #C04848 , #480048); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #C04848 , #480048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.kashmir, #content-other {
	background: #614385; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #614385 , #516395); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #614385 , #516395); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.moss {
	background: #134E5E; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #134E5E , #71B280); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #134E5E , #71B280); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.harmonic-energy {
	background: #16A085; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #16A085 , #F4D03F); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #16A085 , #F4D03F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */   
}

.kyoto, #content-comics {
	background: #c21500; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.mango-pulp, #content-design {
	background: #F09819; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #F09819 , #EDDE5D); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #F09819 , #EDDE5D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.mojito, #content-software {
	background: #1D976C; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #1D976C , #93F9B9); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #1D976C , #93F9B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}