/* Define and manage background image here for greater control, also set font family here as it is used globally */

body { 
	background-color:		black;
	background-image:		url("../assets/backdrop.png");
	background-repeat:		no-repeat;
	background-attachment:	fixed;
	background-position:	center; 
	background-size:		cover;
	padding:				0;
	margin:					0;
	overflow:				hidden;
	font-family:			'Averia Serif Libre', cursive;
	color:					#EFEFEF;
}

h2 {
	text-align:				center;
	color:					#CF9445;
	font-size:				1.4em;
	font-weight:			normal;
}

h3 {
	font-weight:			normal;	
}

ul {
	list-style-type:		none;
	padding:				0;
	margin:					0;
}

#Title {
	position:				absolute;
	text-align:				center;
	width:					100%;
	letter-spacing:			40px;
	font-size:				60px;
	font-weight:			normal;
}

#DemoLink {
	position:				absolute;
	text-align:				center;
	width:					100%;
	font-size:				40px;
	font-weight:			bold;
	margin-top:				120px;
}

/* Remove all default style from buttons to prevent unexpected behaviour in some browsers */

button {
	background:				none;
	color:					inherit;
	border:					none;
	padding:				0;
	font:					inherit;
	cursor:					pointer;
	outline:				inherit;
}



/* Link Styles */

a {
	text-decoration:		none;
}

a:link, a:visited {
	color:					#CF9445;
}

a:hover {
	color:					#ADA28A;
}


/* Custom Scrollbars for Chrome only */

::-webkit-scrollbar {
 	width:					5px;
}

::-webkit-scrollbar-thumb {
	background:				#EFEFEF; 
}

::-webkit-scrollbar-thumb:hover {
	background:				#ADA28A; 
}



/* Sidebar Styles */

.Sidebar {
	position:				absolute;
	height:					100%;
	width:					15%;
	min-width:				200px;
	overflow-y: 			auto;
}

.Sidebar li {
	margin-bottom:			5%;
	cursor:					pointer;
}

/* Select only 1st generation of children using > * */

.Sidebar > * {
	position:				relative;
	width:					90%;
	margin:					5% 5% 0% 5%;
}

#LeftBar {
	left:					0;
	transform:				translateX(-101%);
}

#RightBar {
	right:					0;
	transform:				translateX(101%);
}

#LeftBackground {
	left:					0;
	background-color:		black;
	opacity:				0.5;
	transform:				translateX(-101%);
}

#RightBackground {
	right:					0;
	background-color:		black;
	opacity:				0.5;
	transform:				translateX(101%);
}



/* Sidebar Hide Buttons */

.SideButtonContainer {
	position:				absolute;
	height:					100%;
	width:					18.5%;
	min-width:				250px; /* should at least be 50px wider than main sidebar to accomodate buttons */
}

.HideButton {
	position:				absolute;
	height:					50px;
	width:					50px;
	background:				none;
	border:					3px solid #EFEFEF;
	cursor:					pointer;
	opacity:				0.3;
	outline:				none;
	font-size:				0;
	text-align:				center;
}

.HideButton:hover {
	opacity:				1;
}

/* sidebars will begin offscreen, achieve through translate */

#ButtonContainerLeft {
	left:					0;
	transform:				translateX(-80%);
}

#LeftHideButton {
	top:					50%;
	right:					0;
	transform:				translateY(-50%);
}

#ButtonContainerRight {
	right:					0;
	transform:				translateX(80%);
}

#RightHideButton {
	top:					50%;
	left:					0;
	transform:				translateY(-50%);
}

#ButtonContainerBottom {
	text-align:				center;
	position:				absolute;
	width:					100%;
	height:					22%;
	bottom:					0;
}

#BottomHideButton
{
	transform:				translateX(-50%);
}

.HideButton img {
	height:					30px;
}


/* Album Selector */

#AlbumWrapper {
  	position:				absolute;
  	width:					100%;
  	height:					15%;
	text-align:				center;
	bottom:					0;
}

#Albums {
	display:				inline-block;
	height:					100%;
	font-size:				0;
}

/* select all images in album wrapper */

#Albums img {
	height:					100%;
	padding:				0;
	margin:					0px 2px 0px 2px;
	opacity:				0.5;
	cursor:					pointer;
}

#Albums img:hover {
	opacity:				1;
}