@charset "utf-8";

/* Fonts */
@font-face {font-family:"Roboto";src:url("../fonts/Roboto-Light.eot?") format("eot"),url("../fonts/Roboto-Light.woff") format("woff"),url("../fonts/Roboto-Light.ttf") format("truetype"),url("../fonts/Roboto-Light.svg#Roboto-Light") format("svg");font-weight:normal;font-style:normal;}
@font-face {font-family:"Roboto";src:url("../fonts/Roboto-Bold.eot?") format("eot"),url("../fonts/Roboto-Bold.woff") format("woff"),url("../fonts/Roboto-Bold.ttf") format("truetype"),url("../fonts/Roboto-Bold.svg#Roboto-Bold") format("svg");font-weight:bold;font-style:normal;}

/* Animation hack */
.anim {
	transform: translateZ(0);
}

/* General */
* {
	margin: 0px;
	padding: 0px;
	line-height: 125%;
	text-decoration:none;
	-webkit-text-size-adjust: 100%;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: Roboto, Arial;
	font-size: 14px;
	background-color: #CCC;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #000;
}

a.textlink {
	color: #333;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-color: #333;
	border-bottom-style: dotted;
}

.full {
	width: 100%;
	height: 100%;
}

.floatleft {
	float: left;
	padding-right: 10px;
}

.floatright {
	float: right;
	padding-left: 10px;
}

.clearfix {
	clear: both;
	float: none !important;
}

.clearfixspace {
	clear: both;
	float: none !important;
	height: 1px;
}

.invisible {
	display: none;
}

ul {
	list-style: none;
}

div.vcenter {
	display: table;
}

div.vcenter span {
	display: table-cell;
	vertical-align: middle;
}

div.vcenter .centerelement {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.small {
	font-size: 80%;
}


section, header, nav, main {
	display: block;
}

header, nav {
	z-index: 920000;
}

section {
	z-index: 910000;
}

main {
	z-index: 900000;
}


/* ---- HEADER ---- */
header {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	background-color: #FFF;
	box-shadow: 0px 5px 10px #777;
}

#titlebox {
	position: absolute;
	top: 0px;
	left: 10px;
	height: 33px;
	padding: 17px 60px 0px 0px;
}


#adlogo {
	position: absolute;
	top: 0px;
	right: 10px;
	height: 33px;
	padding: 17px 60px 0px 0px;
	background-image:url(../images/archery_dojo_logo_header.svg);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: right top;
}

/* ---- NAVIGATION ---- */
#menustart {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 33px;
	padding: 17px 20px 0px 50px;
	font-weight: bold;
}

nav {
	text-align: center;
	margin: 0px 240px 0px 110px;
}

nav ul li {
	display: inline-block;
}

nav ul li a {
	display: block;
	height: 28px;
	padding: 17px 15px 0px 30px;
	border-style: solid;
	border-width: 0px 0px 5px 0px;
	border-color: #FFF;
}

nav ul li a.active {
	border-color: #777 !important;
}

#navigation {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 110%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	z-index: 1000000;
}

#navigation ul {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 280px;
	min-height: 100%;
	background-color: #FFF;
	box-shadow: 10px 0px 10px #777;
}

#navigation ul li.topgradient {
	position: fixed;
	top: 0px;
	left: inherit;
	height: 20px;
	width: inherit;
	background: none;
	background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
}

#navigation ul li.bottomgradient {
	position: fixed;
	bottom: 0px;
	left: inherit;
	height: 20px;
	width: inherit;
	background: none;
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}

#navigation ul li.spacer {
	height: 114px;
}

#navigation ul li a {
	display: block;
	border-width: 0px 0px 1px 0px;
	border-color: #555;
	border-style: solid;
	padding: 8px 10px 4px 35px;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: 7px 5px;
}

#navigation ul li a:hover {
	color: #FFF;
	background-color: #AAA;
}


#navigation ul li.title {
	margin-top: 15px;
	border-width: 0px 0px 1px 0px;
	border-color: #555;
	border-style: solid;
	font-weight: bold;
	padding: 10px 10px 6px 10px;
}

#navigation ul li.username {
	position: absolute;
	bottom: 0px;
	font-size: 80%;
	color: #555;
	padding: 10px 10px 20px 10px;
}

#menuclose {
	display: block;
	position: fixed;
	left: 0px;
	right: 0px;
	width: auto;
	height: 100%;
	margin-left: 280px;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 10px 13px;
	background-image:url(../images/nav_close.svg);
	background-color: rgba(0,0,0,0.5);
}

#navigation a.logout {
	position: absolute;
	bottom: 44px;
	width: 235px;
	border-width: 1px 0px 1px 0px !important;
}

#navigation a.logout:hover {
	color: #FFF;
	background-color: #970011;
}

#navigation ul li a.coach {
	background-color: #CCC;
}
#navigation ul li a.coach:hover {
	background-color: #777 !important;
}

#navigation ul li a.clubadmin {
	background-color: #b3caea;
}
#navigation ul li a.clubadmin:hover {
	background-color: #616e80 !important;
}

#navigation a.techadmin {
	background-color: #eab9b3;
}
#navigation a.techadmin:hover {
	background-color: #806461 !important;
}

#navigation a.superadmin {
	background-color: #e8db9e;
}
#navigation a.superadmin:hover {
	background-color: #807857 !important;
}


/* ---- TITLEBAR ---- */
#titlebar {
	position: relative;
	padding: 64px 10px 6px 10px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #999;
	background-color: #DDD;
}

#titlebar h1 {
	font-size: 18px;
	font-weight: normal;
	text-align: center;
}

/* ---- COACH QUICK NAV ---- */
a.qnfloatbutton {
	position: fixed;
	display: none;
	top: 60px;
	width: 44px;
	height: 44px;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #555;
	background-color: #DDD;
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 2px 2px;
	box-shadow: 2px 2px 2px #333;
	opacity: 0.4;
	z-index: 950000;
}

a.qnfloatbutton:hover {
	background-color: #EEE;
	opacity: 1;
}

#qncoursesbutton {
	left: 5px;
	background-image: url(../images/nav_courses.svg);
	
}

#qnusersbutton {
	right: 5px;
	background-image: url(../images/nav_user.svg);
}

ul.qnfloatlist {
	position: fixed;
	display: none;
	top: 60px;
	padding: 8px;
	max-width: 400px;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #555;
	background-color: #DDD;
	box-shadow: 2px 2px 2px #333;
	z-index: 950001;
}

ul.qnfloatlist li {
	padding: 0px !important;
}
ul.qnfloatlist li a {
	display: block;
	padding: 5px 0px 5px 0px;
}

#qncourses {
	left: 56px;
	margin-right: 66px;
}

#qnusers {
	right: 56px;
	margin-left: 66px;
}


/* ---- NOTIFICATION ---- */
#notification {
	position: fixed;
	bottom: 5px;
	right: 10px;
	width: 280px;
	z-index: 1200000;	
}

#notification div {
	width: 290px;
	overflow: hidden;
}

#notification span {
	display: block;
	position: relative;
	cursor: pointer;
	width: 264px;
	padding: 8px;
	margin: 5px 0px;
	border-radius: 5px;
	background-color: #FFF;
	box-shadow: 5px 5px 5px #333;
}

#notification h1 {
	font-weight: bold;
	font-size: 100%;
	padding-bottom: 4px;
	margin-bottom: 4px;
	border-bottom: 1px solid #CCC;
}

#notification a {
	display: block;
	position: absolute;
	top: 5px;
	right: 5px;
}


/* ---- MAIN ---- */
main {
	padding: 20px 10px;
}

main.pagefill {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	margin-top: 80px;
	padding: 0px !important;
	width: 100%;
	height: auto;
}

div.warningbox {
	padding: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #e2001a;
	border-radius: 5px;
	background-color: #ffdfe3;
}

div.twocolumns {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
}

div.fourcolumns {
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
}

div.infotext {
}

div.infotext h2 {
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 8px;
}

div.infotext span.comment {
	display: block;
	margin-bottom: 8px;
}

div.quickinfo {
	
}


.twocolumngroup {
	display: inline-block;
	margin-bottom: 12px;
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;  	
	hyphens: auto;	
}

.multicolumngroup {
	display: inline-block;
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
	hyphens: auto;	
}


/* ---- LISTS ---- */
ul.lines li {
	display: block;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #555;
	padding: 5px 0px 5px 0px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}


ul.lines li:first-child {
	border-top-width: 1px;
}

li.temphidden {
	display: none !important;
}


.leftauto {
	display: block;
	width: auto;
	overflow: hidden;
}

.lefticon {
	display: block;
	width: 50px;
	overflow: hidden;
	float: left;
}

.righticon {
	display: block;
	width: 50px;
	overflow: hidden;
	float: right;
}

.righticons {
	display: block;
	max-width: 120px;
	overflow: hidden;
	float: right;
	text-align: right;
}

.rightmedal {
	display: block;
	width: 35px;
	overflow: hidden;
	float: right;
}

.rightbadges {
	display: block;
	width: 40px;
	overflow: hidden;
	float: right;
}

.rightribbons {
	display: block;
	width: 100px;
	overflow: hidden;
	float: right;
}

.rightinfo {
	display: block;
	float: right;
	text-align: right;
}

.toggler {
	cursor: pointer;
}
.toggler:hover {
	background-color: #EEE;
}

ul.lines li.redhighlight {
	background-color: #eab9b3;
}

ul.lines li.goldhighlight {
	background-color: #dfd8a1;
}

ul.lines li.greyhighlight {
	background-color: #AAA;
}

ul.lines li.inactive {
	opacity: 0.5;
}

ul.lines li:hover {
	background-color: #EEE;
}

ul.lines li.redhighlight:hover {
	background-color: #eab9b3 !important;
}

ul.lines li.goldhighlight:hover {
	background-color: #f6f2d4 !important;
}

ul.lines li.greyhighlight:hover {
	background-color: #DDD !important;
}

div.ranking {
	float:left;
	width: 50px;
}

div.listicon {
	padding-left: 50px;
	padding-right: 10px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 40px;
}

div.listnoicon {
	padding-right: 10px;
	height: 40px;
}

div.listnoiconright {
	padding-left: 10px;
	height: 40px;
}

div.listmedal {
	padding-left: 40px;
	padding-right: 10px;
	background-size: 25px 40px;
	background-repeat: no-repeat;
	background-position: 1px 0px;
	height: 40px;
}

div.listbadge {
	padding-left: 40px;
	padding-right: 10px;
	background-size: 25px 40px;
	background-repeat: no-repeat;
	background-position: 1px 0px;
	height: 40px;
}

div.listribbon {
	padding-left: 40px;
	padding-right: 10px;
	background-size: 32px 8px;
	background-repeat: no-repeat;
	background-position: 1px 15px;
	height: 40px;
}

ul.ok, ul.noscore, ul.missing, ul.ok li, ul.noscore li, ul.missing li {
	list-style: none;
}

ul.ok, ul.noscore, ul.missing {
	margin-bottom: 16px;
}

ul.ok li, ul.noscore li, ul.missing li {
	margin-bottom: 8px;
}

ul.ok li {
	padding-left: 20px;
	background-image: url(../images/stat_ok.svg);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: 0px 2px;
}

ul.noscore li {
	padding-left: 20px;
	background-image: url(../images/stat_partial.svg);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: 0px 2px;
}

ul.missing li {
	padding-left: 20px;
	background-image: url(../images/stat_fail.svg);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: 0px 2px;
}


/* ---- ICONS ---- */
img.imgicon {
	width: 40px;
	height: 40px;
	vertical-align: middle;
}

img.imgbadge {
	width: 25px;
	height: 40px;
	vertical-align: middle;
}

img.imgmedal {
	width: 25px;
	height: 40px;
	vertical-align: middle;
}

img.bigimgicon {
	width: 75px;
	height: 75px;
	vertical-align: middle;
}

img.smallimgicon {
	width: 30px;
	height: 30px;
	padding: 5px;
}

img.smalltexticon {
	width: 30px;
	height: 30px;
	vertical-align: middle;
}

img.tinyimgicon {
	width: 20px;
	height: 20px;
}

img.tinytexticon {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

img.iconforants {
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

/* ---- NAV ICONS ---- */
.iconbig {
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 10px 12px;
}

.icon {
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: 5px 14px;
}

.icon_arrows {
	background-image:url(../images/nav_arrows.svg);
}
.icon_arrows_plus {
	background-image:url(../images/nav_arrows_plus.svg);
}
.icon_badge {
	background-image:url(../images/nav_badge.svg);
}
.icon_book {
	background-image:url(../images/nav_book.svg);
}
.icon_bow {
	background-image:url(../images/nav_bow.svg);
}
.icon_bow_plus {
	background-image:url(../images/nav_bow_plus.svg);
}
.icon_bow_arrow {
	background-image:url(../images/nav_bow_arrow.svg);
}
.icon_arch {
	background-image:url(../images/nav_archery_dojo.svg);
}
.icon_checklist {
	background-image:url(../images/nav_checklist.svg);
}
.icon_coach {
	background-image:url(../images/nav_coach.svg);
}
.icon_comment {
	background-image:url(../images/nav_comment.svg);
}
.icon_course {
	background-image:url(../images/nav_course.svg);
}
.icon_courses {
	background-image:url(../images/nav_courses.svg);
}
.icon_diploma {
	background-image:url(../images/nav_diploma.svg);
}
.icon_download {
	background-image:url(../images/nav_download.svg);
}
.icon_exit {
	background-image:url(../images/nav_exit.svg);
}
.icon_group {
	background-image:url(../images/nav_group.svg);
}
.icon_history {
	background-image:url(../images/nav_history.svg);
}
.icon_home {
	background-image:url(../images/nav_home.svg);
}
.icon_key {
	background-image:url(../images/nav_key.svg);
}
.icon_list {
	background-image:url(../images/nav_list.svg);
}
.icon_log {
	background-image:url(../images/nav_log.svg);
}
.icon_logout {
	background-image:url(../images/nav_logout.svg);
}
.icon_mail {
	background-image:url(../images/nav_email.svg);
}
.icon_medal {
	background-image:url(../images/nav_medal.svg);
}
.icon_medalgroup {
	background-image:url(../images/nav_medal_group.svg);
}
.icon_medalgroupadd {
	background-image:url(../images/nav_medal_group_add.svg);
}
.icon_menu {
	background-image:url(../images/nav_menu.svg);
}
.icon_minus {
	background-image:url(../images/nav_minus.svg);
}
.icon_missing {
	background-image:url(../images/nav_missing.svg);
}
.icon_news {
	background-image:url(../images/nav_news.svg);
}
.icon_numbers {
	background-image:url(../images/nav_numbers.svg);
}
.icon_plus {
	background-image:url(../images/nav_plus.svg);
}
.icon_points {
	background-image:url(../images/nav_points.svg);
}
.icon_print {
	background-image:url(../images/nav_print.svg);
}
.icon_ranking {
	background-image:url(../images/nav_ranking.svg);
}
.icon_repeat {
	background-image:url(../images/nav_repeat.svg);
}
.icon_results {
	background-image:url(../images/nav_results.svg);
}
.icon_ribbon {
	background-image:url(../images/nav_ribbon.svg);
}
.icon_score {
	background-image:url(../images/nav_score.svg);
}
.icon_scoreboard {
	background-image:url(../images/nav_scoreboard.svg);
}
.icon_search {
	background-image:url(../images/nav_search.svg);
}
.icon_settings {
	background-image:url(../images/nav_settings.svg);
}
.icon_star {
	background-image:url(../images/nav_star.svg);
}
.icon_statistics {
	background-image:url(../images/nav_statistics.svg);
}
.icon_target {
	background-image:url(../images/nav_target.svg);
}
.icon_token {
	background-image:url(../images/nav_token.svg);
}
.icon_trash {
	background-image:url(../images/nav_trash.svg);
}
.icon_undefined {
	background-image:url(../images/nav_undefined.svg);
}
.icon_user {
	background-image:url(../images/nav_user.svg);
}
.icon_view {
	background-image:url(../images/nav_view.svg);
}
.icon_world {
	background-image:url(../images/nav_world.svg);
}
.icon_zh_city {
	background-image:url(../images/nav_zh_city.svg);
}

/* ---- FORMS ---- */
div.logincontainer {
	display: block;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

div.autherror {
	font-weight: bold;
	color: #e2001a;
	margin-bottom: 20px;
}

div.pwreset {
	font-weight: normal;
	color: #e2001a;
	margin-bottom: 20px;
}
div.pwreset a {
	color: #e2001a;
}


div.userbox {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin: auto;
	padding: 10px;
	max-width: 450px;
	height: 80%;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #555;
	background-color: #CCC;
	box-shadow: 5px 5px 5px #333;
}

div.userbox h1 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 12px;
	text-align: center;
}

div.userlist {
	position: absolute;
	height: auto;
	width: auto;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 5px;
	margin: 130px 10px 60px 10px;
	overflow-y: auto !important;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #555;
	background-color: #CCC;
}


fieldset {
	border-style: none;
}

fieldset dl.centered {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

fieldset dl.widecentered {
	position: relative;
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

fieldset dd {
	margin-bottom: 15px;
}

fieldset dd.twosmalllines {
	min-height: 28px;
}

fieldset dt {
	margin-bottom: 4px;
}

div.formbox {
	padding: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;	
	margin-bottom: 8px;
}

div.formboxcontent {
	margin-bottom: 15px;
}

div.formboxcontentleft {
	float: left;
	clear: left;
	width: 462px;
	margin-bottom: 15px;
}

div.formboxcontentright {
	float: right;
	clear: right;
	width: 462px;
	margin-bottom: 15px;
}

input.textinput, textarea.textinput {
	font-family: Roboto, Arial !important;
	font-size: 13px !important;
	width: 100%;
	border-style:solid;
	border-width: 1px;
	border-color: #555;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	box-sizing: border-box;
}

textarea.textinput {
	height: 150px;
	resize: none;
}

textarea.small {
	height: 50px !important;
	resize: none;
}

input.percent {
	font-size: 80% !important;
	width: 50px !important;
}

input.tinyint {
	width: 40px !important;
}

input.doubleint {
	font-size: 80% !important;
	width: 50px !important;
}

input.tiny {
	width: 25% !important;
}

input.short {
	width: 50% !important;
}

input.medium {
	width: 75% !important;
}

input.datepicker {
	font-family: Roboto, Arial !important;
	font-size: 13px !important;
	width: 250px;
	border-style:solid;
	border-width: 1px;
	border-color: #555;
	padding: 5px;
	border-radius: 5px;
	font-weight: bold;
	box-sizing: border-box;
}

div.preview {
	float:right;
	width:10%;
	position:relative;
	margin-right: 5%;
}

div.preview img {
	width: 100%;
}

input.textinput:focus, textarea.textinput:focus, input.datepicker:focus {
	box-shadow: inset 0px 0px 10px #777;
}

input.missing, textarea.missing {
	border-color: #e2001a !important;
	background-color: #ffdfe3 !important;
}


input.formbutton {
	cursor: pointer;
	min-width: 80px;
	text-align: center;
	border-style:solid;
	border-width: 1px;
	border-color: #555;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	background-color: #AAA;
}

input.formbutton:hover {
	color: #EEE !important;
	background-color: #555 !important;
}

input.invalid {
	border-color: #e2001a !important;
	background-color: #ffdfe3 !important;
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: right 5px center ;
	background-image:url(../images/stat_fail.svg);
	padding-right: 20px;
}

input.ok {
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: right 5px center ;
	background-image:url(../images/stat_ok.svg);
	padding-right: 20px;
}

input.validating {
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: right 5px center ;
	background-image:url(../images/stat_validate.svg);
	padding-right: 20px;
}

input.error {
	border-color: #e2001a !important;
	background-color: #ffdfe3 !important;
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: right 5px center ;
	background-image:url(../images/stat_error.svg);
	padding-right: 20px;
}

div.radiogroupcontainer {
	margin-bottom: 15px;
	padding: 8px 0px 0px 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;	
}

div.missing {
	border-color: #e2001a !important;
	background-color: #ffdfe3 !important;
}

span.radiogroup, span.multicheckgroup {
	display: block;
	float: left;
	cursor: pointer;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;
	text-align: center;
	font-size: 80%;
}

span.radiogroup span.colorbox {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 22px;
	width: 22px;
}

span.bigbutton {
	width: 143px;
	padding: 5px;
	margin-right: 8px;
	margin-bottom: 8px;
}

span.smallbutton {
	width: 42px;
	padding: 5px;
	margin-right: 8px;
	margin-bottom: 8px;
}

span.radiogroup:hover, span.multicheckgroup:hover {
	background-color: #EEE;
}

span.activegroup {
	background-color: #888;
}

span.activegroup:hover {
	background-color: #888 !important;
}

span.radiogroup dd input, span.multicheckgroup dd input {
	display: none;
}

span.radiogroup dd, span.multicheckgroup dd {
	margin-bottom: 0px;
}

span.checkbox {
	display: block;
	cursor: pointer;
}

span.checkbox:hover {
	background-color: #EEE;
}

span.checkbox input {
	display:none;
}

span.checkboxgroup, span.togglegroup, span.lockgroup {
	display: block;
}

span.checkboxgroup h2 {
	font-size: 22px;
	font-weight: bold;
	text-align: left;
}

span.checkboxgroup span.checkbox {
	margin-top: 2px;
	padding-left: 20px;
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: 0px 1px;
	background-image:url(../images/nav_checkbox.svg);
}

span.checkboxgroup span.checked {
	background-image:url(../images/nav_checkbox_checked.svg) !important;
}

span.checkboxgroup span.inactive {
	opacity: 0.5;
	cursor: auto !important;
}

span.checkboxgroup span.inactive:hover {
	background-color: transparent !important;
}

span.togglegroup span.checkbox {
	margin-top: 2px;
	padding-left: 40px;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: 0px -7px;
	background-image:url(../images/nav_toggle_no.svg);
}

span.togglegroup span.checked {
	background-image:url(../images/nav_toggle_yes.svg) !important;
}

span.lockgroup span.checkbox {
	margin-top: 2px;
	height: 40px;
	padding-left: 50px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-image:url(../images/nav_closed.svg);
}

span.lockgroup span.checked {
	background-image:url(../images/nav_open.svg) !important;
}

div.selectboxcontainer select {
	display: none;
}

div.selectboxcontainer {
	position: relative;
	margin-bottom: 15px;
}

div.selectbox {
	cursor: pointer;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

ul.selectdropdown {
	display: none;
	position: absolute;
	padding: 5px;
	margin-left: 5px;
	margin-top: -20px;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;
	background-color: #DDD;
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	z-index: 700000;
}

ul.selectdropdown li {
	cursor: pointer;
	padding: 5px 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #555;
}

ul.selectdropdown li:last-child {
	border-bottom-style: none !important;
}

ul.selectdropdown li:active {
	background-color: #888;
}

ul.selectdropdown li:hover {
	background-color: #FFF !important;
}

ul.selectdropdown li.active:hover {
	background-color: #999 !important;
}


/* ---- WEBKIT and FIREFOX FORM FIX FOR HTML 5 INPUT FIELDS ---- */
input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type='number'] {
    -moz-appearance:textfield;
}

/* ---- MULTIPAGE ---- */
div.multipagebox {
	position: relative;
	margin-top: 52px;
    border-color: #555;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 8px;
    padding: 8px;
}

ul.multipagenav {
	display: block;
	position: absolute;
	top: -52px;
	left: 20px;
	height: 52px;
}

ul.multipagenav li {
	padding: 5px;
	margin-right: 10px;
    border-color: #555;
    border-radius: 5px 5px 0px 0px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: block;
    float: left;
	opacity: 0.4;
}

ul.multipagenav li.active {
	border-bottom-color: #CCC !important;
	opacity: 1 !important;
}

ul.multipagenav li:hover {
	background-color: #EEE !important;
	opacity: 1 !important;
}


ul.multipages li.page {
	display: none;
}

ul.multipages li.active {
	display: block !important;
}

ul.multipages h2 {
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 8px;
}

/* ---- HISTORY AWARDS ---- */
ul.tinyawards {
	position: relative;
	display: block;
	float: right;
}

ul.tinyawards li {
	display: block;
	float: right;
	margin-left: 8px;
	background-repeat: no-repeat;
	background-position: center center;
	border-style: none !important;
}
ul.tinyawards li.medal {
	width: 35px;
	height: 40px;
	background-size: 30px;
}
ul.tinyawards li.badge {
	width: 35px;
	height: 40px;
	background-size: 25px;
}

ul.tinyawards li.ribbons {
	width: 40px;
	height: 15px;
	background-size: 40px;
}
ul.tinyawards li:hover {
	background-color: transparent !important;
}

/* ---- MEDALS ---- */
ul.medals li.medal {
	cursor: pointer;
	position: relative;
	display: block;
	float: left;
	margin-right: 10px;
}

ul.medals img {
	width: 60px;
	margin-top: 20px;
}

/* ---- BADGES ---- */
ul.badges li.badge {
	cursor: pointer;
	position: relative;
	display: block;
	float: left;
	margin-right: 20px;
}

ul.badges img {
	width: 40px;
	margin-top: 20px;
}

/* ---- RIBBONS ---- */
ul.ribbons li.ribbon {
	cursor: pointer;
	position: relative;
	display: block;
	float: left;
	margin-right: 10px;
}

ul.ribbons img {
	width: 75px;
	margin-top: 4px;
}

/* ---- ALL AWARDS --- */
ul.medals span.count, ul.badges span.count {
	display: block;
	position: absolute;
	top: 0px;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

ul.medals span.description, ul.badges span.description, ul.ribbons span.description {
	display: none;
	position: absolute;
}

/* ---- MESSAGE BOX ---- */
div.cover {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color:rgba(0,0,0,0.5);
	z-index: 1000001;
}

div.linedtitle {
	position: relative;
	text-align: center;
	background-color: inherit;
	margin-bottom: 8px;
}

div.linedtitle:before {
	content: "";
	display: block;
	border-top: solid 1px black;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
}

div.linedtitle span {
	background-color: inherit;
	padding: 0 20px;
	position: relative;
}

div.datevalidation {
	background-color: #AAA;
	text-align: center;
	font-weight: bold;
	color: #000;
	margin-bottom: 10px;
	padding: 10px;
}

div.validationfailed {
	background-color: #e2001a;
}

div.message {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #FFF;
	margin: auto;
	padding: 10px;
	max-width: 280px;
	max-height: 280px;
	border-radius: 10px;
	background-color: #e2001a;
}

div.bigmessage {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #FFF;
	margin: auto;
	padding: 10px;
	max-width: 280px;
	max-height: 480px;
	border-radius: 10px;
	background-color: #e2001a;
}

div.confirm {
	color: #000 !important;
	background-color: #ffe100 !important;
}

div.loading {
	color: #000 !important;
	background-color: #FFF !important;
	text-align: center;
}


div.confirmscore {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin: auto;
	padding: 10px;
	max-width: 450px;
	height: 80%;
	border-radius: 10px;
	background-color: #ff9600;
	box-shadow: 5px 5px 5px #333;
}

div.confirmlist {
	position: absolute;
	height: auto;
	width: auto;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 5px;
	margin: 40px 10px 60px 10px;
	overflow-y: auto;
	background-color: #EEE;
}

div.awarddetails {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin: auto;
	padding: 10px;
	max-width: 450px;
	height: 80%;
	border-radius: 10px;
	background-color: #CCC;
	box-shadow: 5px 5px 5px #333;
}

div.awardimage {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 80px;
}

div.awardimage img {
	width: 100%;
}

div.awardlist {
	position: absolute;
	height: auto;
	width: auto;
	top: 0px;
	bottom: 0px;
	left: 90px;
	right: 0px;
	padding: 5px;
	margin: 10px 10px 60px 10px;
	overflow-y: auto;
	background-color: #EEE;
}


div.footerbuttons {
	position: absolute;
	bottom: 0px;
	padding: 10px;
	left: 0px;
	right: 0px;
	width: auto;
}

a.button {
	display: block;
	width: 80px;
	margin-top: 25px;
	color: #FFF;
	border-style:solid;
	border-width: 1px;
	border-color: #FFF;
	padding: 7px 15px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

a.inactivebutton {
	opacity: 0.3;
}

div.confirm a.button, div.confirmscore a.button, div.awarddetails a.button {
	color: #000 !important;
	border-color: #000 !important;
}

a.button:hover, div.confirm a.button:hover{
	background-color: #FFF !important;
	border-color: #CCC !important;
	color: #000 !important;
}

a.formbutton, div.formbutton {
	display: inline-block;
	cursor: pointer;
	border-style:solid;
	border-width: 1px;
	border-color: #555;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	background-color: #AAA;
}

a.formbutton2 {
	display: block;
	width: 80px;
	border-style:solid;
	border-width: 1px;
	border-color: #555;
	padding: 7px 15px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	background-color: #AAA;
}


a.formbutton:hover, div.formbutton:hover, a.formbutton2:hover {
	color: #EEE !important;
	background-color: #555 !important;
}

a.closebutton {
	margin-left: auto;
	margin-right: auto;
}

a.okbutton {
	float: left;
}

a.cancelbutton {
	float: right;
}

/* TABLES */
table.values {
	width: 100%;
	table-layout: fixed;
	border-spacing: 0;
    border-collapse: collapse;
}


table.values tr {
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #555;
}

table.values tr:nth-child(even) {
	background-color: #AAA;
}

table.values td, th {
	padding: 2px 0px;
}

th.icon_row {
	height: 70px;
	font-size: 80%;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 0px 30px;
}

table.values th.badge {
	height: 60px;
	font-size: 80%;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	padding-left: 5px !important;
	background-size: 25px 40px;
	background-repeat: no-repeat;
	background-position: 5px 20px;
}

table.values th.ribbon {
	height: 30px;
	font-size: 80%;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	padding-left: 5px !important;
	background-size: 40px 10px;
	background-repeat: no-repeat;
	background-position: 5px 23px;
}

table.values input.ok, table.values input.invalid {
	background-image: none !important;
	padding-right: 5px !important;
}


/* ---- LOGS ---- */
ul.lognavigation {
	height: 20px;
	margin-bottom: 10px;
}

ul.lognavigation li {
	display: block;
	float: left;
	height: 20px;
	width: 23px;
}

ul.lognavigation li:last-child {
	clear:right;
}

ul.lognavigation li a {
	display: block;
	height: 20px;
	width: 100%;
	font-size: 80%;
	text-align: center;
}

ul.lognavigation li a.number {
	height: 15px !important;
	padding-top: 5px !important;
}

ul.lognavigation li a.active {
	font-weight: bold;
}

table.logs {
	width: 100%;
	font-size: 80%;
	border-spacing: 0;
    border-collapse: collapse;
}

table.logs tr {
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #555;
}

table.logs tr.info {
	border-style: none !important;
}

table.logs tr:nth-child(even) {
	background-color: #AAA;
}

table.logs tr:hover {
	background-color: #EEE !important;
}

table.logs td, th {
	padding: 5px;
}

table.logs th {
	text-align: left;
	font-weight: bold;
}

table.logs td:first-child, th:first-child {
	padding-left: 0px !important;
}
table.logs td:last-child, th:last-child {
	padding-right: 0px !important;
}

/*--- DATEPICKER ---*/
div.calendarbox {
	display: none;
	position: absolute;
	width: 238px;
	margin-top: 5px;
	padding: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;
	background-color: #DDD;
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	z-index: 800000;
}

div.calendarbox table {
	width: 100%;
	border-spacing: 0;
    border-collapse: collapse;
}

div.calendarbox td.right {
	text-align: right;
}


div.calendarbox td.cal_month, div.calendarbox td.cal_year{
	font-weight: bold;
	text-align: center;
}

div.calendarbox table.calendar {
	table-layout: fixed;
}

table.calendar td, table.calendar th {
	border-width: 1px 1px 1px 1px;	
	border-style: solid;
	border-color: #555;
	text-align: center;
	padding: 2px;
}

table.calendar th {
	font-weight: bold;
	border-bottom: 0px !important;
}

table.calendar .weekend {
	color: #777;
}

table.cal_days td {
	cursor: pointer;
}

table.cal_days td.filler {
	color: #777;
}

table.cal_days td.today {
	box-shadow: inset 0px 0px 5px #777;
}

table.cal_days td.outofrange {
	background-color: #FFDFE3 !important;
}

table.cal_days td.active {
	color: #FFF !important;
	background-color: #777 !important;
	font-weight: bold;
}

table.cal_days td:hover {
	background-color: #FFF !important;
}

table.cal_days td.active:hover {
	background-color: #777 !important;
}

/*--- COLORPICKER ---*/
div.colorfieldsbox {
	display: none;
	position: absolute;
	margin-top: -15px;
	margin-left: -94px;
	width: 140px;
	padding: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	border-radius: 5px;
	background-color: #DDD;
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	z-index: 800000;
}

ul.colorfieldcontainer {
	display: block;
}

ul.colorfieldcontainer li {
	display: block;
	float: left;
	width: 35px;
	height: 35px;
}

ul.colorfieldcontainer li.active {
	background-image: url('../images/colorpicker_border.png');
}

ul.colorfieldcontainer li:hover {
	background-image: url('../images/colorpicker_border.png');
}

/*--- ARROWS ---*/
#arrowlist div.arrow.active:first-child a.uparrow {
	display: none;
}

#arrowlist div.arrow.active:last-child a.downarrow {
	display: none;
}


/*--- CHARTS ---*/
div.chartcontainer {
	width: 100%;
	height: 400px;
}

img.charticon {
	width: 20px;
	height: 20px;
}