/******************** GENERAL **********************/
body{
	color: #000000;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.15;
}

a {
	color: inherit;
    text-decoration: underline;
}

input, textarea {
    font-size: inherit;
}

textarea {
	vertical-align: top;
}

button {
	text-align: center;
	background: linear-gradient(to bottom, #427fff, #0014ab);
	border-radius: 5px;
	box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
	color: #ffffff;
	cursor: pointer;
	font-family: TankTrouble;			/* FIXME should this be here? */
	vertical-align: middle;
    border: none;						/* Disable default user agent stylesheets */
    outline: none;						/* Disable default user agent stylesheets */
}

button:active:not(.disabled) {
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
	transform: translateY(2px);
}

button.small {
    padding: 0 5px 0 5px;
    font-size: 0.9em;
	min-width: 24px;
    line-height: 24px;
}

button.medium {
    padding: 0 10px 0 10px;
    font-size: 1.2em;
	min-width: 34px;
    line-height: 34px;
}

button.large {
    padding: 0 20px 0 20px;
    font-size: 2.0em;
	min-width: 52px;
    line-height: 52px;
}

button.warning {
	background: linear-gradient(to bottom, #ff0000, #800000);
}

button:disabled {
	background: linear-gradient(to bottom, #cccccc, #4d4d4d);
	color: #f0f0f0;
	cursor: default;
}

/*** Necessary for buttons that have tooltips when disabled ***/
button.disabled {
	background: linear-gradient(to bottom, #cccccc, #4d4d4d);
	color: #f0f0f0;
	cursor: default;
}

.button {
    cursor: pointer;
}

.buttonGroup {
	display: inline-block;
}

.buttonGroup div {
	display: inline-block;
	overflow: hidden;
}

.buttonGroup div:first-child {
	padding-left: 10px;
}

.buttonGroup div:last-child {
	padding-right: 10px;
}

.buttonGroup div:not(:first-child) button {
	border-left: rgba(0, 0, 0, 0.25) 1px solid;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.buttonGroup div:not(:last-child) button {
	border-right: rgba(255, 255, 255, 0.25) 1px solid;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.buttonGroup div.selected button {
	text-shadow: 0 0 4px #427fff, 0 0 4px #ffffff, 0 0 5px #ffffff, 0 0 10px #ffffff;
}

.buttonGroup div.selected button:disabled {
	text-shadow: 0 0 4px #909090, 0 0 4px #ffffff, 0 0 5px #ffffff, 0 0 10px #ffffff;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently not supported by any browser */
  cursor: default;
}

.noscroll {
	overflow: hidden !important; /* Tooltipster defines overflow-x on body, which must be overridden */
}

.hidden {
    display: none;
}

/******************** RESET **********************/

body, html{
	height: 100%;
	margin: 0;
}

img{
	border: none;
	display: block;							/* doctype causes img to display as inline element adding space below */
}

td{
    padding: 0;
}

table{
    border-spacing: 0;
    border-collapse: collapse;
}

/********************* VERSION *********************/

#version {
	position: fixed;
	bottom: 2px;
	left: 2px;

	font-size: 0.5em;
}

/********************* HEADER *********************/

#header{
	position: relative;
	background-image: url('../assets/images/header/background.png');
    background-size: 120px 120px;
}

#topBanner{
	display: none;
	height: 90px;
}

.horizontalAdSlot{
	display: none;
}

#navigation{
	height: 60px;
	width: 100%;
}

#navigation .shadow{
	background-image: url('../assets/images/header/shadow.png');
    background-size: 10px 60px;
	background-repeat: repeat-x;
	display: table-cell;
	height: 60px;
    width: 50%;                             /* Safari 7 does not render the cells without this width */
}

.managedNavigation {
    cursor: pointer;
    text-decoration: underline;
    display: inline;
}

#navigation .tab{
	display: table-cell;
	height: 60px;
    cursor: pointer;
}

#navigation .tab.selected img.selected{
    display: inherit;
}

#navigation .tab.selected img.deselected{
    display: none;
}

#navigation .tab img.deselected{
    display: inherit;
}

#navigation .tab img.selected{
    display: none;
}

/********************* CONTENT *********************/

#contentWrapper{
	margin-top: 10px;
	height: calc(100% - 60px - 10px);	/* navigation = 60px, margin = 10px */
	position: relative;						/* allow absolute placing of vertical banners */
	width: 100%;
}

#content{
	margin: 0 auto;							/* centre content */
	height: 100%;
	max-width: 1284px;						/* make the max width of #main 1024 (incl. margins) */
	width: calc(100% - 300px * 2);
}

#mainContent{
	display: inline-block;
	margin: 0 10px 0 10px;
    position: relative;
	width: calc(100% - 10px - 130px - 10px - 10px - 130px - 10px);	/* #secondaryContent = 130, #tertiaryContent = 130, margins = 40px */
}

#secondaryContent{
	float: left;
	margin-left: 10px;
	width: 130px;
}

#tertiaryContent{
	float: right;
	margin-right: 10px;
	width: 130px;
}

#secondaryContent > *,
#tertiaryContent > *{
	display: inline-block;
	margin-bottom: 10px;
	vertical-align: top;
	width: 100%;
}

#leftBanner{
	left: calc(50% - 1284px / 2 - 300px);	/* #content = 1284, #leftBanner = 300 */
	position: absolute;
	top: 0;
}

#leftBanner .banner {
	text-align: right;
}

#rightBanner{
	position: absolute;
	right: calc(50% - 1284px / 2);	/* #content = 1284 */
	top: 0;
}

.banner{
	position: fixed;
	height: 100%;
	min-height: 600px;
	width: 300px;
}

.verticalAdSlot{
	display: block;
}

/********************* FONTS *********************/

.gigantic{
    font-size: 4em;
}

.huge{
	font-size: 3em;
}

.big{
	font-size: 1.2em;
}

.small{
	font-size: 0.8em;
}

.strong{
    font-weight: bold;
}

.note{
	color: #909090;
}

.signature {
    font-family: TankTrouble;
}

:not(button).warning {
	color: #ff0000;
}

/********************** RESPONSIVE STYLES **********************/

/* When viewport width is less than 1884px begin sacrifice #mainContent width */
/* 300 + 10 + 120 + 1024 + 120 + 10 + 300 = 1884 */
@media (max-width: 1883px){
	#leftBanner{
		left: 0;
	}
	#rightBanner{
		right: 300px;
	}
}

/* When #mainContent width is 800px chose a narrower ad format (from 300px to 240px) */
/* 300 + 10 + 120 + 800 + 120 + 10 + 300 = 1660 */
@media (max-width: 1659px) {
	#content {
		width: 1060px;
	}
	#leftBanner {
		left: calc(50% - 1060px / 2 - 240px); /* #content = 1060, .banner = 240 */
	}
	#rightBanner {
		right: calc(50% - 1060px / 2); /* #content = 1060 */
	}
	.banner {
		width: 240px;
	}
}

/* When viewport width is less than 1540px chose a narrower ad format (from 240px to 160px) */
/* 240 + 10 + 120 + 800 + 120 + 10 + 240 = 1540 */
@media (max-width: 1539px){
	#leftBanner{
		left: calc(50% - 1060px / 2 - 160px);	/* #content = 1060, .banner = 160 */
	}
	#rightBanner{
		right: calc(50% - 1060px / 2);	/* #content = 1060 */
	}
	.banner{
		width: 160px;
	}
}

/* When viewport width is less than 1380px begin sacrifice #mainContent width */
/* 160 + 10 + 120 + 800 + 120 + 10 + 160 = 1380 */
@media (max-width: 1379px){
	#content{
		width: calc(100% - 160px - 160px);
	}
	#leftBanner{
		left: 0;
	}
	#rightBanner{
		right: 160px;
	}
}

/* When #mainContent width is 680px chose a narrower ad format (from 160px to 120px) */
/* 160 + 10 + 120 + 680 + 120 + 10 + 160 = 1260 */
@media (max-width: 1259px){
	#content{
		width: 940px;
	}
	#leftBanner{
		left: calc(50% - 940px / 2 - 120px);	/* #content = 940, .banner = 120 */
	}
	#rightBanner{
		right: calc(50% - 940px / 2);	/* #content = 940 */
	}
	.banner{
		width: 120px;
	}
}

/* When #leftBanner and #rightBanner width is less than 120px remove them and show #topBanner */
/* 120 + 10 + 120 + 680 + 120 + 10 + 120 = 1180 */
@media (max-width: 1179px){
	#topBanner{
		display: block;
	}

	.horizontalAdSlot{
		display: block;
	}

	#contentWrapper{
		height: calc(100% - 90px - 60px - 10px);	/* banner = 90, navigation = 60px, margin = 10px */
	}
	#content{
		width: 100%;
	}
	#leftBanner,
	#rightBanner{
		display: none;
	}

	.verticalAdSlot{
		display: none;
	}
}

/* When viewport width is 1024 we assume we are on a tablet and let #mainContent take up full width and show only 5 boxes */
@media (max-width: 1024px){
	#content{
		width: 100%;
	}
	#mainContent{
		width: calc(100% - 20px);
	}
	#secondaryContent{
		margin-left: 5px;
		width: calc(100% / 5 * 3 - 5px);
	}
	#tertiaryContent {
		display: inline-block;
		margin-right: 5px;
		width: calc(100% / 5 * 2 - 5px);
	}
	#secondaryContent > *{
		margin: 0 5px 10px 5px;
		width: calc(100% / 3 - 10px);
	}
	#tertiaryContent > *{
		margin: 0 5px 10px 5px;
		width: calc(100% / 2 - 10px);
	}
	#secondaryContent > *:nth-child(n+4),
	#tertiaryContent > *:nth-child(n+3){
		display: none !important;				/* !important to override jQuery modifications */
	}
	#leftBanner,
	#rightBanner{
		display: none;
	}

	.verticalAdSlot{
		display: none;
	}
}

/* When viewport width is 800 we assume we are on mobile (landscape) and hide #navigation and show only 4 boxes */
/* Show 4 boxes */
@media (max-width: 800px){
	#navigation{
		display: none;
	}
	#contentWrapper{
		height: calc(100% - 90px - 10px);	/* banner = 90, margin = 10px */
	}
	#secondaryContent,
	#tertiaryContent{
		width: calc(50% - 5px);
	}
	#secondaryContent > *{
		width: calc(100% / 2 - 10px);
	}
	#secondaryContent > *:nth-child(n+3),
	#tertiaryContent > *:nth-child(n+3){
		display: none !important;				/* !important to override jQuery modifications */
	}
}

/* When viewport width is 600px we assume we are on mobile (portrait) and show boxes 2 x 2 */
@media (max-width: 600px){
	#secondaryContent >  *,
	#tertiaryContent > *{
		width: calc(100% - 10px);
	}
}

/* When retina, set background-images to high res versions */
@media 	(-webkit-min-device-pixel-ratio: 2),
 		(   min--moz-device-pixel-ratio: 2),
 		(     -o-min-device-pixel-ratio: 2/1),
 		(        min-device-pixel-ratio: 2),
 		(                min-resolution: 192dpi),
 		(                min-resolution: 2dppx) {
	#header {
		background-image: url('../assets/images/header/background@2x.png');
	}

	#navigation .shadow {
		background-image: url('../assets/images/header/shadow@2x.png');
	}


}