@font-face {

	font-family: roboto;
	src: url('misc/Roboto-Light.ttf');
	font-weight: 300;
}

@font-face {

	font-family: roboto;
	src: url('misc/Roboto-Medium.ttf');
	font-weight: 500;
}

/* -- Smallest acceptable screen is 320px wide -- */

/* -- Mobile Styles -- */

/* -- General -- */

body {

	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;

	background-color: #eceff1;

	color: #78909c;
	font-family: roboto;
}

p {

	padding: 0;
	margin: 0;
}

a {

	text-decoration: none;
}

/* -- Password Check -- */

#passwordCheckContainer {

	width: 280px;

	padding: 0;
	margin: 20px auto;

	border-radius: 3px;
	box-shadow: #999999 0 1px 3px;

	/* For absolute positioning of logo */
	position: relative;

	background-color: #ffffff;

	color: #2196f3;
	font-family: roboto;
	font-weight: 300;

	overflow: auto;
}

#passwordRandomImage {

	width: 280px;
	height: 280px;

	/* To remove extra whitespace beneath image */
	display: block;
}

#passwordLogo {

	padding: 5px 10px;

	background-color: #ffffff;

	font-size: 36px;
	line-height: 36px;
	text-align: center;
}

#passwordCheckInput {

	width: 240px;

	padding: 5px 10px;
	margin: 0 10px;

	border-top: 1px solid #eceff1;
	border-right: none;
	border-bottom: none;
	border-left: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;

	outline: none;

	color: #78909c;
	font-size: 20px;
	font-family: roboto;
	font-weight: 300;
	text-align: center;
}

/* -- Begin Navigation -- */

#naviCont {

	background-color: #ffffff;
}

#navi {

	max-width: 960px;
	height: 51px;

	overflow: auto;

	color: #2196f3;
}

#logo {

	width: 100%;

	padding: 7px 0 9px 0;

	position: absolute;
	z-index: 2;

	background-color: #ffffff;

	text-align: center;
	font-size: 35px;
	line-height: 35px;
	font-weight: 300;
}

#naviLinkContMobile {

	width: 100%;

	position: absolute;
	z-index: 1;

	background-color: #eceff1;

	font-weight: 300;
}

.naviLinkContHidden {

	/*top: -381px;*/
	top: -427px;

	display: none;
}

.naviLinkContShown {

	top: 51px;
}

.naviLink {

	padding: 10px 0;
	margin: 1px auto 0 auto;

	border-left: 5px solid #ffffff;
	border-right: 5px solid #ffffff;

	display: block;

	background-color: #ffffff;

	font-size: 20px;
	/*font-size: 16px;*/
	color: #78909c;
	text-align: center;

	cursor: pointer;
}

.activeNaviLink {

	border-left: 5px solid #2196f3;
	border-right: 5px solid #2196f3;

	color: #2196f3;
}

.naviBox {

	display: none;
	opacity: 0;
}

#scrollToTop {

	padding: 5px 10px;

	border-radius: 3px 3px 0 0;
	box-shadow: #999999 0 1px 3px;

	position: fixed;
	bottom: 0;
	z-index: 1;

	background-color: #ffffff;

	font-size: 20px;
	font-weight: 300;
	color: #2196f3;
}

/* -- List Icon -- */
#listIconCont {

	width: 33px;
	height: 33px;

	margin: 9px;

	position: relative;
	z-index: 3;

	float: left;
}

.listIcon {

	position: absolute;

	background-color: #2196f3;
}

.listIconLeft {

	width: 9px;
	height: 9px;
}

.listIconRight {

	width: 21px;
	height: 9px;
}

#listIconTopLeft {

	top: 0;
	left: 0;
}

#listIconTopRight {

	top: 0;
	left: 12px;
}

#listIconMidLeft {

	top: 12px;
	left: 0;
}

#listIconMidRight {

	top: 12px;
	left: 12px;
}

#listIconBotLeft {

	top: 24px;
	left: 0;
}

#listIconBotRight {

	top: 24px;
	left: 12px;
}

#historyIconCont {

	width: 36px;
	height: 33px;

	margin: 9px;

	position: relative;
	z-index: 3;

	float: right;
}

/* -- History Icon -- */
.historyIcon {

	width: 9px;
	height: 9px;

	margin: 0 0 3px 3px;

	float: left;

	background-color: #2196f3;
}

/* -- Begin List -- */

#list {

	width: 320px;

	margin: 0 auto;

	overflow: auto;
}

/* -- Begin Series Card -- */

.listItem {

	width: 280px;

	margin: 20px;

	border-radius: 3px;
	box-shadow: #999999 0 1px 3px;

	position: relative;

	float: left;
	overflow: hidden;
}

.listImage {

	width: 280px;

	display: block;
}

/* -- Add Episode or Volume Plus -- */

.plusContainer {

	width: 68px;
	height: 68px;

	position: absolute;
	top: 106px;
	left: 106px;
}

.plusBox {

	width: 16px;
	height: 16px;

	border: 5px solid #ffffff;

	position: absolute;

	background-color: #2196f3;
}

#plusBoxTop {

	top: 0;
	left: 21px;
}

#plusBoxRight {

	top: 21px;
	left: 42px;
}

#plusBoxBottom {

	top: 42px;
	left: 21px;
}

#plusBoxLeft {

	top: 21px;
	left: 0;
}

#plusBoxMiddle {

	top: 21px;
	left: 21px;
}

/* -- Series Progress Bar -- */

.seriesProgressBar {

	height: 5px;

	position: absolute;
	top: 275px;

	opacity: 0.9;

	background-color: #2196f3;
}

/* -- Series Info -- */

.seriesInfo {

	padding: 0 10px;

	background-color: #ffffff;
}

.seriesTitle {

	padding: 5px 10px;

	font-size: 24px;
	font-weight: 500;
	text-align: center;
	color: #2196f3;
	white-space: nowrap;
	overflow: hidden;

	text-overflow: ellipsis;
}

.seriesText {

	padding: 5px 10px;

	border-top: 1px solid #eceff1;

	text-align: center;
	font-weight: 300;
	font-size: 16px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.seriesLink,
.seriesLink:visited {

	display: block;

	color: #78909c;
}

.changeSeriesInfo {

	cursor: pointer;
}

.scrollToTopCont {

	width: 100%;

	display: inline-block;
}

.scrollToTop {

	width: 101px;

	margin: 0 auto;

	display: block;

	font-weight: 300;
	font-size: 20px;
	color: #2196f3;
}

/* -- Confirmation Dialogues -- */

.confirmationContainer {

	width: 260px;

	padding: 10px;

	position: absolute;
	top: 104px;
	left: -280px;

	overflow: auto;

	background-color: #ffffff;

	text-align: center;
}

.confirmationMessage {

	margin: 0px 0px 5px 0px;

	font-weight: 300;
	font-size: 16px;
}

.confirmationMessageBeforeInput {

	width: 138px;

	margin-left: 13px;

	float: left;
}

.confirmationMessageAfterInput {

	width: 11px;

	margin-right: 13px;

	float: left;
}

.confirmationInput {

	width: 85px;

	padding: 0;
	margin: 0 0 4px 0;

	border: none;
	border-bottom: 1px solid #eceff1;

	float: left;

	color: #78909c;
	outline: none;
	text-align: center;
	font-family: roboto;
	font-weight: 300;
	font-size: 16px;
}

.confirmationResponse {

	width: 130px;

	float: left;

	color: #2196f3;
	font-size: 20px;
	font-weight: 500;
}

.savingProgressBar {

	height: 5px;

	position: absolute;
	top: 0;

	opacity: 0.9;

	background-color: #2196f3;
}

/* -- End Series Card -- */

#copyright {

	margin: 0 0 20px 0;

	font-weight: 300;
	font-size: 15px;
	color: #2196f3;
	text-align: center;
}

/* -- Begin Add Series -- */

#addContainer {

	width: 280px;
	margin: 20px auto;

	border-radius: 3px;
	box-shadow: #999999 0 1px 3px;

	background-color: #ffffff;

	overflow: auto;

	font-weight: 300;
}

#addImageContainer {

	width: 280px;
	height: 280px;

	/* To remove extra whitespace beneath image */
	display: block;

	/* To enable absolute position of corners */
	position: relative;

	background-color: #ffffff;
}

/* -- Add Series File Drop -- */

#addDropNotice {

	width: 260px;

	margin: 0 10px;

	position: absolute;
	top: 129px;

	text-align: center;
	line-height: 22px;
}

.addCorner {

	width: 16px;
	height: 16px;

	position: absolute;

	background-color: #eceff1;
}

#addCornerTopLeft {

	top: 5px;
	left: 5px;
}

#addCornerTopRight {

	top: 5px;
	right: 5px;
}

#addCornerBottomRight {

	bottom: 5px;
	right: 5px;
}

#addCornerBottomLeft {

	bottom: 5px;
	left: 5px;
}

#addImage {

	width: 280px;
	height: 280px;

	display: none;
}

#addProgress {

	height: 5px;

	position: absolute;
	top: 275px;

	opacity: 0.9;

	background-color: #2196f3;
}

.addInput {

	padding: 0 0 2px 0px;

	border: none;
	border-bottom: 1px solid #eceff1;
	outline: none;

	float: left;

	color: #78909c;
	text-align: center;
	font-family: roboto;
	font-weight: 300;
}

/* -- Add Series Info -- */

#addTitle {

	width: 260px;

	margin: 10px 10px 0 10px;

	font-size: 24px;
}

.addInputSmaller {

	font-size: 16px;
}

#addStatus {

	width: 80px;

	margin: 10px 5px 0 10px;
}

#addEpisodes {

	width: 80px;

	margin: 10px 5px 0 5px;
}

#addOngoing {

	width: 80px;

	margin: 10px 10px 0 5px;
}

#addSave {

	width: 260px;

	margin: 10px;

	float: left;
	font-size: 20px;
	font-weight: 500;
	color: #2196f3;
	text-align: center;
}

/* -- Series History -- */

.history {

	width: 280px;

	padding: 0 0 20px 0;
	margin: 20px auto;

	border-radius: 3px;
	box-shadow: #999999 0 1px 3px;

	/* Debug, remove*/
	overflow: hidden;

	background-color: #ffffff;

	overflow: auto;
}

.historyTitle {

	width: 240px;

	padding: 19px 20px;
	margin: 0 auto;

	overflow: hidden;

	font-weight: 500;
	font-size: 24px;
	text-align: center;
	color: #2196f3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.historyEpisode {

	width: 240px;
	height: 50px;

	padding: 10px 0;
	margin: 0 20px;

	float: left;
}

.historyNumber {

	width: 46px;
	height: 46px;

	border-radius: 50px;

	position: relative;
	border: 2px solid #2196f3;

	overflow: hidden;
	float: left;
}

.historyImage {

	width: 46px;
	height: 46px;

	position: absolute;
	top: 0;
	left: 0;
}

.historyNumberText {

	width: 50px;
	height: 50px;

	position: absolute;
	top: 0;
	left: 0;

	color: #ffffff;
	line-height: 48px;
	text-align: center;
	font-weight: 500;
	font-size: 19px;
}

.historyText {

	width: 170px;

	float: left;

	overflow: hidden;

	font-weight: 300;
	font-size: 16px;
	padding: 0 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.historyUpper {

	height: 24px;

	border-bottom: 2px solid #2196f3;

	line-height: 24px;
}

.historyLower {

	height: 24px;

	line-height: 24px;
}

/* -- Tablet Styles -- */
@media screen and (min-width: 658px) {

	#list {

		width: 640px;
	}

	#listIconCont, #historyIconCont {

		display: none;
	}

	#logo {

		width: auto;

		margin-left: 19px;

		float: left;
	}

	#navi {

		/* Temporary fix for Firefox (it is rendering font sizes differently from Chrome as of 41.0.1, test with newer version) */
		overflow: hidden;
	}

	#naviLinkCont {

		width: auto;

		margin-right: 19px;

		position: relative;
		top: 0;
		z-index: auto;

		display: inherit;
		float: right;

		background-color: inherit;

		font-weight: 300;
	}

	.naviLink {

		padding: 0 0 10px 0;
		margin: 15px 0 0 10px;

		border: none;

		float: left;

		background-color: transparent;

		/*font-size: 14px;*/
		/*margin: 16px 0 0 8px;*/
		/*padding: 0 0 11px 0;*/
		font-size: 16px;
	}

	.activeNaviLink {

		border-bottom: 5px solid #2196f3;
		border-left: none;
		border-right: none;

		color: #2196f3;
	}

	.naviBox {

		width: 140px;

		position: absolute;
		top: 51px;
		z-index: 3;

		/*box-shadow: #999999 0px 1px 3px;
		border-radius: 3px;*/

		/*overflow: hidden;*/

		/*background-color: #eceff1;*/
	}

	.naviBoxActive {

		display: inherit;
	}

	.arrow,
	.arrowCover {

		width: 20px;
		height: 20px;

		transform: rotate(45deg);

		background-color: #ffffff;
	}

	.arrow {

		box-shadow: #999999 0 1px 3px;

		position: relative;
		top: 15px;
		z-index: -1;
	}

	.arrowCover {

		box-shadow: none;

		position: absolute;
		top: 15px;
		z-index: 1;
	}

	.naviBoxLinkContainer {

		border-radius: 3px;
		box-shadow: #999999 0 1px 3px;

		overflow: auto;
		position: relative;
		/*top:-4px;*/

		background-color: #eceff1;
	}

	.naviBoxLink {

		padding: 16px 20px 16px 20px;
		margin: 1px 0 0 0;

		border-left: 5px solid #ffffff;
		border-right: 5px solid #ffffff;

		display: block;

		background-color: #ffffff;

		font-size: 16px;
		font-weight: 300;
		color: #78909c;
		text-align: center;
	}

	.naviBoxLink:first-of-type {

		margin: 0;
	}

	.activeNaviBoxLink {

		border-left: 5px solid #2196f3;
		border-right: 5px solid #2196f3;

		color: #2196f3;
	}

	.history {

		width: 600px;
	}

	.historyTitle {

		width: 560px;

		font-size: 34px;
	}

	.historyEpisode {

		padding: 13px 0 12px 0;
		margin: 0 30px;
	}
}

/* -- Desktop Styles -- */
@media screen and (min-width: 977px) {

	#list {

		width: 960px;
	}

	#navi {

		width: 920px;

		margin: 0 auto;
	}

	.naviLink {

		/*padding: 0 0 10px 0;*/
		/*margin: 15px 0 0 10px;*/

		/*font-size: 16px;*/
	}

	#logo {

		margin-left: 0;
	}

	#naviLinkCont {

		margin-right: 0;
	}

	.history {

		width: 918px;

		padding: 0 1px 10px 1px;
	}

	.historyTitle {

		width: 878px;
	}

	.historyEpisode {

		margin: 0 33px;
	}
}