.clearfix:before, 
.clearfix:after,
.ui-collapsible-content:before,
.ui-collapsible-content:after { 
content : "\0020"; 
display : block; 
height : 0; 
overflow : hidden; }

.clearfix:after,
.ui-collapsible-content:after { 
clear : both; }

/* TYPOGRAPHY ============================================================================= */

@font-face {
    font-family: 'love';
    src: url('fonts/a_love_of_thunder-webfont.eot');
    src: url('fonts/a_love_of_thunder-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/a_love_of_thunder-webfont.woff') format('woff'),
         url('fonts/a_love_of_thunder-webfont.ttf') format('truetype'),
         url('fonts/a_love_of_thunder-webfont.svg#ALoveofThunderRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'impact';
    src: url('fonts/Impact_Label-webfont.eot');
    src: url('fonts/Impact_Label-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Impact_Label-webfont.woff') format('woff'),
         url('fonts/Impact_Label-webfont.ttf') format('truetype'),
         url('fonts/Impact_Label-webfont.svg#ImpactLabelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'impact-reversed';
    src: url('fonts/Impact_Label_Reversed-webfont.eot');
    src: url('fonts/Impact_Label_Reversed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Impact_Label_Reversed-webfont.woff') format('woff'),
         url('fonts/Impact_Label_Reversed-webfont.ttf') format('truetype'),
         url('fonts/Impact_Label_Reversed-webfont.svg#ImpactLabelReversedRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/helveticaneue-webfont.eot');
    src: url('fonts/helveticaneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneue-webfont.woff') format('woff'),
         url('fonts/helveticaneue-webfont.ttf') format('truetype'),
         url('fonts/helveticaneue-webfont.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

.tab-loading{background: url("images/ajax-loader.gif") center center no-repeat; width: 220px; height: 19px; margin: 20px auto;}


.ui-page{
	background: url(images/background.png);
}
.ui-collapsible-set {
	margin: 0.5em 1em;
}
.ui-collapsible-content{padding-bottom: 40px; }
.training .ui-collapsible-content{background: #333;}

#voeding .ui-collapsible-content{padding-bottom: 10px;}
#voeding .ui-collapsible-content img{max-width: 100%;}
#voeding .ui-collapsible-content .ui-block-a b, #voeding .green{color: #8FBF4D; font-style: italic; }
#voeding .ui-collapsible-content .ui-block-b b, #voeding .orange{color: #D95929; font-style: italic; }
#voeding .ui-collapsible-content .ui-block-c b, #voeding .red{color: red; font-style: italic; }


.ui-page .ui-footer{position: absolute; bottom: 0; left: 0;}
#account.ui-page .ui-header{margin-top: 10%;}
#account.ui-page .ui-footer, #communicatie.ui-page .ui-footer{position: relative;}
.ui-content{padding-top: 30px; padding-bottom: 80px;}
#home .ui-content{padding-bottom: 80px;}
#trainers .ui-content{padding-bottom: 20px;}

.ui-bar{position: relative; padding: 10px 15px; height: 29px;overflow: visible;}
.ui-bar::after{
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -35px;
	content: '';
	width: 54px;
    height: 94px;
    background: url(images/logo.png) top center no-repeat;
    background-size: contain;
}

.ui-bar::before{
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: 30px;
	content: 'support system'; 
}
@media only screen and (-webkit-device-pixel-ratio: 1) {
	//.ui-bar{padding: 10px 15px; height: 29px; background: url("images/logo_qpa.png") center center no-repeat;}
	// .team999 .ui-bar {background-image: url('images/logo_fit.png');}
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
	.ui-bar::after{background-image: url("images/logo_2x.png"); }
	// .team999 .ui-bar {background-image: url('images/logo_fit_2x.png'); background-size: 86px auto;}
}

.fullscreen .ui-header {margin-top: 20px;}
.ui-header { overflow: visible;
	background: url("images/header_bg.png") bottom left repeat-x;
}
.ui-bar .ui-block-b {   }

.ui-bar .ui-block-a{text-align: left;}
.ui-bar .ui-block-b{text-align: center;}
.ui-bar .ui-block-c{text-align: right;}
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
	    width: 100%;
	}
#home .ui-grid-a {clear: left;}
#home .ui-content .ui-btn-text, #trainers .ui-content .ui-btn-text {font-family: 'love'; font-weight: normal;}
.lovefont{font-family: 'love'; font-weight: normal;}

#teamonderdelen{position: absolute; bottom: 0; width: 100%}
.teamonderdeel h3{margin: 60px 0 0 20px;}
.teamonderdeel #clock{float: right;}


/* PERSON PROFILE ==================================================== */
.person_image{float: left; position: relative; margin: 0 10px 10px 0; width: 128px; border: 2px solid #bcbcbc;}

.person_image.rood{box-shadow: 0px 0px 30px red; border: 2px solid red; }
.person_image.oranje{box-shadow: 0px 0px 30px #F58220; border: 2px solid #F58220;}

.person_image_top{position: relative;  background: #fff;}
.person_image img{padding: 4px;}
.person_image_bottom{position: relative; background: #fff; width: 128px; height: 26px;}


#home .person_image {width: 68px;}
#home .person_image_bottom{width: 68px; height: 8px}

.person .person_info {float: left; font-family : "Helvetica Neue", Helvetica, Arial; margin: 3px 0; font-size: 18px; color: #333; font-weight: bold; text-shadow: 1px 1px 1px #fff;}
.person .person_info label{float: left; font-family: 'impact-reversed'; color: #333; font-size: 20px; padding: 3px 2px 3px 5px; width: 80px; cursor: default; text-shadow: none;}
.person .person_info div{padding-bottom: 5px; width: 100%; clear: left;}
#home .person_image + .person_info div {width: 208px;}

.person .person_info #person_info_name{border-bottom: 1px solid #cbcbcb;}
.person .person_info #person_info_age{border-top: 1px solid #fefefe; padding-top: 5px;}

.spelers_overview .person{float: left;}
.spelers_overview .person label{clear: left; float: left; margin-bottom: 10px; width: 122px;}
.spelers_overview .person_name{font-size: 11px; font-weight: bold; position: absolute; bottom: 15px; padding: 5px; z-index: 10; background: #fff;}

.nav-custom .ui-btn .ui-btn-inner {
    padding-top: 40px !important;
}
.nav-custom .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#btn_test .ui-icon {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/icon-test.png");
    background-origin: padding-box;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 30px 25px;
}

#btn_training .ui-icon {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/icon-training.png");
    background-origin: padding-box;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 20px 27px;
}

#btn_voeding .ui-icon {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/icon-voeding.png");
    background-origin: padding-box;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 22px 26px;
}

#btn_tracking .ui-icon {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/icon-tracking.png");
    background-origin: padding-box;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 25px 28px;
}


.notification {
    background-color: #EEDC94;
    background-image: -moz-linear-gradient(center top , #FCEEC1, #EEDC94);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
    color: #404040;
    margin: 0 10px 18px;
    padding: 7px 15px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.notification.error{
    color: #FFFFFF;
}

.notification.error {
    background-color: #C43C35;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #C43C35);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.notification.success {
    background-color: #57A957;
    background-image: -moz-linear-gradient(center top , #62C462, #57A957);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.notification.info {
    background-color: #339BB9;
    background-image: -moz-linear-gradient(center top , #5BC0DE, #339BB9);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.notification .close {
    margin-top: 1px;
}
.notification .close {
    font-family: Arial,sans-serif;
    line-height: 18px;
}
.notification a {
    color: #404040;
    font-weight: bold;
    text-decoration: none;
}
.close {
	cursor: pointer;
    color: #000000;
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 13.5px;
    opacity: 0.25;
    text-shadow: 0 1px 0 #FFFFFF;
}

.pl_small{position: absolute; top: -20px; width: 120px; height: 10px; margin: 0; padding: 6px 2px 10px 6px; font-size: 11px; background: #fff;}
.pt_small{position: absolute; top: 0px; width: 116px; height: 10px; margin: 0; padding: 6px 6px 10px 6px; font-size: 11px; background: #fff;}

.performance_level_container{width: 100%;}
.performance_level{position: relative; float: left; width: 100%; margin: 10px auto; padding: 10px 0; border: 1px solid #a9a9a9; background: rgba(236, 236, 236, 0.4); -webkit-box-shadow: inset 1px 1px 2px 1px rgba(236, 236, 236, 0.2); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ; -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, .18); box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.18);}
.performance_level h3{font-family: 'impact-reversed'; color: #333; font-size: 20px; padding: 0; float: left; margin: 0 0 5px 10px;}
.performance_level h4{position: absolute; right: 17px; bottom: 13px; margin: 0; padding: 0; color: #eee; text-shadow: none; z-index: 10; font-weight: normal; font-size: 20px;}
.performance_level small{float: left; padding: 0 0 5px 10px; line-height: 21px;}

.meter {
	clear: left;
        height: 20px;  /* Can be anything */
        position: relative;
        background: #404143; 
        padding: 5px;
        margin: 10px 10px 0;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
        display: block;
        height: 100%;
         -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: rgb(248,142,63);
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(248,142,63)),
          color-stop(1, rgb(243,109,10))
         );
        background-image: -webkit-linear-gradient(
          center bottom,
          rgb(248,142,63) 37%,
          rgb(243,109,10) 69%
         );
        background-image: -moz-linear-gradient(
          center bottom,
          rgb(248,142,63) 37%,
          rgb(243,109,10) 69%
         );
        background-image: -ms-linear-gradient(
          center bottom,
          rgb(248,142,63) 37%,
          rgb(243,109,10) 69%
         );
        background-image: -o-linear-gradient(
          center bottom,
          rgb(248,142,63) 37%,
          rgb(243,109,10) 69%
         );
        -webkit-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
}

.training .trainingTitle {
	margin:5px 10px;
	float: left;
}

.training .trainingSubtitle {
	clear: left;
	margin: 0 10px 5px;
	float: left;
}

.training .meter > span {
	background-image: none;
}
.completeTraining{
/* 	float: right; */
}
.dark-red > span {
     background-color: #b60000;
     color: #fff;
     text-shadow: none;
     border-top: 1px solid #b60000;
}

.dark-red.ui-btn-active{
	border: #b60000;
}

.dark-red.ui-btn-active > span{
	border: 1px solid #b60000;
	background-color: #fff;
	color: #b60000;
}

.red > span {
     background-color: #ff0000;
     border-top-color: #ff0000;
     color: #fff;
     text-shadow: none;
}

.red.ui-btn-active{
	border: #ff0000;
}

.red.ui-btn-active > span{
	border: 1px solid #ff0000;
	background-color: #fff;
	color: #ff0000;
}

.orange > span {
     background-color: #f36d0a;
     color: #fff;
     text-shadow: none;
}

.orange.ui-btn-active{
	border: #f36d0a;
}

.orange.ui-btn-active > span{
	border: 1px solid #f36d0a;
	background-color: #fff;
	color: #f36d0a;
}

.green > span {
     background-color: #00e000;
     border-top-color: #00e000;
     color: #fff;
     text-shadow: none;
}

.green.ui-btn-active{
	border: #00e000;
}

.green.ui-btn-active > span{
	border: 1px solid #00e000;
	background-color: #fff;
	color: #00e000;
}

.dark-green > span {
     background-color: #007500;
     color: #fff;
     text-shadow: none;
     border-top:1px solid #007500;
}

.dark-green.ui-btn-active{
	border: #007500;
}

.dark-green.ui-btn-active > span{
	border: 1px solid #007500;
	background-color: #fff;
	color: #007500;
}

.meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
           -webkit-gradient(linear, 0 0, 100% 100%,
              color-stop(.25, rgba(255, 255, 255, .2)),
              color-stop(.25, transparent), color-stop(.5, transparent),
              color-stop(.5, rgba(255, 255, 255, .2)),
              color-stop(.75, rgba(255, 255, 255, .2)),
              color-stop(.75, transparent), to(transparent)
           );
        background-image:
                -webkit-linear-gradient(
                  -45deg,
              rgba(255, 255, 255, .2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, .2) 50%,
              rgba(255, 255, 255, .2) 75%,
              transparent 75%,
              transparent
           );
        background-image:
                -moz-linear-gradient(
                  -45deg,
              rgba(255, 255, 255, .2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, .2) 50%,
              rgba(255, 255, 255, .2) 75%,
              transparent 75%,
              transparent
           );
        background-image:
                -ms-linear-gradient(
                  -45deg,
              rgba(255, 255, 255, .2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, .2) 50%,
              rgba(255, 255, 255, .2) 75%,
              transparent 75%,
              transparent
           );
        background-image:
                -o-linear-gradient(
                  -45deg,
              rgba(255, 255, 255, .2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, .2) 50%,
              rgba(255, 255, 255, .2) 75%,
              transparent 75%,
              transparent
           );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
           -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
               -moz-border-radius-topright: 8px;
            -moz-border-radius-bottomright: 8px;
                   border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            -webkit-border-top-left-radius: 20px;
         -webkit-border-bottom-left-radius: 20px;
                -moz-border-radius-topleft: 20px;
             -moz-border-radius-bottomleft: 20px;
                    border-top-left-radius: 20px;
                 border-bottom-left-radius: 20px;
        overflow: hidden;
}
.animate > span:after {
        display: none;
}
@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}
.meter > span:after, .animate > span > span {
  -webkit-animation: move 4s linear infinite;
}

.content_middle{background: #fff; border-right: 1px solid #abb8ba; border-bottom: 1px solid #abb8ba; border-left: 1px solid #abb8ba; width: 100%; padding: 20px 0; -moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px; }
.content_middle .content{border: 1px solid #a7b3b5; margin: 0 5px; padding: 15px 0; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

#chart_left{float: left; width: 100%;}
#chart_left div{padding: 0 10px; float: left; width: 95%;}
#chart_left label{float: left; font-size: 16px; background: #606060; color: #fff; padding: 3px 5px; margin: 0 0 10px 0; cursor: default; text-shadow: none;}
#chart_left table{clear: left;}
#chart_left th{text-align: center; color: #f58220; font-size: 12px; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; }
#chart_left tr:nth-child(even) {background: #f5f5f5;}
#chart_left td{color: #414345; font-size: 12px; text-align: center;}
#chart_left td:first-child {text-align: left;}
.charts{float: right; margin: 0 5px; width: 97%; height:500px;}

.trainers_div{float: left; width: 100%; clear: both;}
.trainers_div .ui-select{width: 100%;}
#trainers_chart{width: 100%;}
#tracking_chart{width: 100%; float: left;}

.spelers .ui-checkbox, .spelers fieldset{float: left; position: relative;}
.spelers .ui-checkbox img{width: 75px; height: 112px;}
.spelers .ui-checkbox .spelers_naam{margin: 10px 0 0 -30px; font-size: 11px; width: 120px; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap;}

.tabs, .pills {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.tabs:before, .pills:before, .tabs:after, .pills:after {
    content: "";
    display: table;
}
.tabs:after, .pills:after {
    clear: both;
}
.tabs > li, .pills > li {
    float: left;
}
.tabs > li > a, .pills > li > a {
    display: block;
}
.tabs {
    border-color: #abb8ba;
    border-style: solid;
    border-width: 0 0 1px;
}
.tabs > li {
    margin-bottom: -1px;
    position: relative;
}
.tabs > li > a {
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    line-height: 34px;
    margin-right: 2px;
    padding: 0 5px;
    color: #383838;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    background-color: rgba(190,190,190,0.5);
    border-color: #AAA #AAA #999;
}
.tabs > li > a:hover {
    background-color: #EEEEEE;
    border-color: #EEEEEE #EEEEEE #DDDDDD;
    text-decoration: none;
}
.tabs .active > a, .tabs .active > a:hover, .tabs .ui-state-active a {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: #DDDDDD #DDDDDD transparent;
    border-style: solid;
    border-width: 1px;
    color: #f58220 !important;
    text-decoration: none;
    cursor: default;
}
.tabs .menu-dropdown, .tabs .dropdown-menu {
    border-radius: 0 6px 6px 6px;
    border-width: 1px;
    top: 35px;
}
.tabs a.menu:after, .tabs .dropdown-toggle:after {
    border-top-color: #999999;
    margin-left: 5px;
    margin-top: 15px;
}
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
    border-color: #999999;
}
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
    border-top-color: #555555;
}

.training .tabs li span{position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; display: block;}
.training .tabs #training-uhv span{background: #063559;}
.training .tabs #training-ptraining span{background: #d95929; /* Old browsers */ background: -moz-linear-gradient(left,  #d95929 0%, #d95929 33%, #f2d13e 33%, #f2d13e 66%, #8fbf4d 66%, #8fbf4d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d95929), color-stop(33%,#d95929), color-stop(33%,#f2d13e), color-stop(66%,#f2d13e), color-stop(66%,#8fbf4d), color-stop(100%,#8fbf4d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left,  #d95929 0%,#d95929 33%,#f2d13e 33%,#f2d13e 66%,#8fbf4d 66%,#8fbf4d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left,  #d95929 0%,#d95929 33%,#f2d13e 33%,#f2d13e 66%,#8fbf4d 66%,#8fbf4d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left,  #d95929 0%,#d95929 33%,#f2d13e 33%,#f2d13e 66%,#8fbf4d 66%,#8fbf4d 100%); /* IE10+ */ background: linear-gradient(left,  #d95929 0%,#d95929 33%,#f2d13e 33%,#f2d13e 66%,#8fbf4d 66%,#8fbf4d 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d95929', endColorstr='#8fbf4d',GradientType=1 ); /* IE6-9 */}

.training .tabs li {
	width: 20%;
	text-align: center;
}
.training .tabs li a {
	padding: 10px;
}
.training .tabs li a span {
	display: none;
}
.training .tabs li a::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url(/css/icons/stability-mobility.svg);
	background-size: 32px;
}

.training .tabs #training-ptraining a::before {
	background-image: url(/css/icons/training.png	);
}

.training .tabs #training-mobility a::before {
	background-image: url(/css/icons/stability-mobility.svg);
}
.training .tabs #training-strength a::before {
	background-image: url(/css/icons/power-strength.svg);
}
.training .tabs #training-speed a::before {
	background-image: url(/css/icons/speed-agility.svg);
}
.training .tabs #training-condition a::before {
	background-image: url(/css/icons/condition-endurance.svg);
}

.content_middle .training {
	margin: 0 10px;
}

.training .ui-li-static {
	padding: 0;
}
.training .ui-li-heading {
	margin: 0;
}

.filterList {
  clear: both;
  margin: 20px 10px;
}

.filterList .ui-shadow {
  box-shadow: none;
}

#test_subtabs{position: relative;}
.pills{text-align: center; width: 300px; margin-left: -150px; position: absolute; top: -30px; left: 50%; }
.pills li{display: inline; float: none; margin: 0 -3px;}
.pills li:first-child{-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;  }

.pills a {
	border: 1px solid #a7b3b5;
    line-height: 30px;
    margin: 0;
    padding: 5px;
    text-shadow: 0 1px 1px #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.pills li:first-child a{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}

.pills li:last-child a{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}

.pills > li > a {display: inline}
.pills a:hover {
    background-color: #00438A;
    color: #4c8fa6;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pills .ui-state-active a {
    background: #4c8fa6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 1px 1px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 1px 1px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 1px 2px 2px rgba(0, 0, 0, 0.3); 
}
.pills .ui-state-active a:hover{
	color: #fff;
}
.pills-vertical > li {
    float: none;
}

.oefening_left{width: 230px; float: left;}
.oefening_right{float: left; margin: 40px 0 0 4px; font-size: 20px; color: #fff; text-shadow: 0 1px 0 #666;}
.oefening_right_left{float: left; width: 225px; margin-right: 20px;}
.oefening_right_right{float: left; width: 225px; }
.oefening_right div{padding: 0 0 5px 0; text-align: right;}
.oefening_right label{float: left; background: #606060; color: #fff; padding: 3px 5px 5px 5px; margin-right: 10px; cursor: default; text-shadow: none;}

.oefening_right .kracht.active label{background: #D95929;}
.oefening_right .snelheid.active label{background: #F2D13E;}
.oefening_right .coordinatie.active label{background: #8FBF4D;}
.oefening_right .uhv.active label{background: #06365a;}
.oefening_right .lenigheid.active label{background: #7d27cc;}

.oefening_right table{color: #ddd;}

/* 6.TABLES ============================================================================= */

table { 
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 1.4em; 
width : 100%;
font-size : .875em; /* 14 / 16 = .875 */ }

th, td, caption { 
padding : .25em 10px .25em 5px; }

tfoot { 
font-style : italic; }

caption { 
background-color : transparent; }

/* FLIP CLOCK ============================================================================= */
#clock_display{
	margin: 10px 0;
}

#clock_display label{
	margin: 0 0 0 5px;
	float: left;
	font-size: 20px;
	line-height: 40px;
	padding: 10px 0;
	float: left;
	font-family: 'impact-reversed';
}

#clock {
	margin: 0 40px;
	position: relative;
	float: left;
	width: 200px;
	height: 85px;
	background: -moz-linear-gradient(top,  #000,  #121212);
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#121212));
	-moz-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
	-webkit-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
	box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

#clock:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 200;
	top: 35px;
	left: 9px;
	width: 3px;
	height: 30px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
	border: 1px solid #000;
	-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#clock:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 200;
	top: 35px;
	right: 9px;
	width: 3px;
	height: 30px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
	border: 1px solid #000;
	-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#hour,
#minute {
	width: 94px;
	height: 60px;
	padding-top: 17px;
	overflow: hidden;
	
	background: #333;
	background: -moz-linear-gradient(top -80deg,  #383838, #111 50%, #363636);
	background: -webkit-gradient(linear, 30% top, 70% bottom, from(#383838), color-stop(.5, #111), to(#363636));
	
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
	
	font-size: 60px;
	font-family: 'HelveticaNeueBold', Georgia, 'HelveticaNeue-Bold', Helvetica, Arial, sans-serif;
	color: #fff;
	text-align: center;
	letter-spacing: 0;
	line-height: 40px;
}

#hour {
	position: absolute;
	top: 5px;
	left: 6px;
	
	-moz-border-radius: 18px 0 0 18px;
	-webkit-border-radius: 18px 0 0 18px;
	border-radius: 18px 0 0 18px;
	border-right: 1px solid #000;
	text-indent: 0px;
}

#minute {
	position: absolute;
	top: 5px;
	left: 99px;
	
	-moz-border-radius: 0 18px 18px 0;
	-webkit-border-radius: 0 18px 18px 0;
	border-radius: 0 18px 18px 0;
	text-indent: 0px;
}

#hour:before,
#minute:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 190px;
	height: 40px;
	
	background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .4));
	background: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .4)));
	border-bottom: 1px solid #000;
	-moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
	-webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
	box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
	
	pointer-events: none;
}

#hour:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 25px;
	right: 0px;
	width: 3px;
	height: 30px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
	border: 1px solid #000;
	-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
	box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}

#minute:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 25px;
	left: 0px;
	width: 3px;
	height: 30px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
	border: 1px solid #000;
	-moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
	-webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
	box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
}

#speler_tracking_stats .tijd{
	font-family: 'impact';  font-size: 25px; width: 100%; 
}
#speler_tracking_stats #tracking_pie_chart_group,
#speler_tracking_stats #tracking_pie_chart{
	width: 100%; height: 250px; 
}

.ui-body-suc {
   border: 1px solid       #459216;
   color:               #333333;
   text-shadow: 0 1px 0    #fff;
   background:          #75c443;
   background-image: -moz-linear-gradient(top, 
                     #fff, 
                     #75c443);
   background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0,     #fff),
      color-stop(1,     #75c443));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#75c443')";
}
.ui-body-err {
   border: 1px solid       #6c2527 ;
   color:               #fff;
   text-shadow: 0 0px 0    #000;
   background:          #bf3639;
   background-image: -moz-linear-gradient(top, 
                     #d78485, 
                     #bf3639);
   background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0,     #d78485),
      color-stop(1,     #bf3639));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d78485', EndColorStr='#bf3639')";
}
.ui-body-info {
   border: 1px solid       #235596;
   color:               #333333;
   text-shadow: 0 1px 0    #fff;
   background:          #559ed3;
   background-image: -moz-linear-gradient(top, 
                     #fff, 
                     #559ed3);
   background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0,     #fff),
      color-stop(1,     #559ed3));
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#559ed3')";
}
.ui-field-contain .ui-controlgroup-controls {
	width: 70%;
}

#performanceinsert .ui-radio {width: 20%;}
#performanceinsert .ui-radio .ui-btn {width: 100%;}


/* 480px MEDIA QUERIES ============================================================================= */
@media only screen and (min-width: 480px) {
	.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
	    width: 50%;
	}
	#voeding .ui-grid-a .ui-block-a, #voeding .ui-grid-a .ui-block-b, #voeding .ui-grid-a .ui-block-c {
	    width: 33%;
	    font-size: 13px; 
	}

	.content_middle .content{margin: 0 20px;}
	#chart_left{width: 100%;}
	.pills{width: 370px; margin-left: -185px;}
	.tabs > li > a {padding: 0 15px;}
	.pills a {padding: 5px 15px;}
	
	.oefening_right{float: left; margin: 0 0 0 40px;}
	.training .oefening_charts{clear: both; float: left; width: 100%; height: 250px; }
	
	#speler_tracking_stats #tracking_btns{
		margin-left: -350px;
	}
	#speler_tracking_stats #performance_chart{
		width: 60%;
	}
	#speler_tracking_stats .tijd.groep{
		width: 40%; float: right; text-align: center; margin-top: -50px;
	}
	#speler_tracking_stats .tijd.persoonlijk{
		width: 40%; float: right; text-align: center; margin-top: 10px; padding-top: 10px;
	}
	#speler_tracking_stats #tracking_pie_chart_group{
		width: 40%; margin-top: -25px;
	}
	#speler_tracking_stats #tracking_pie_chart{
		width: 40%; 
	}
}

/* 480px MEDIA QUERIES ============================================================================= */
@media only screen and (max-width: 480px) {	
	#teamonderdelen{position: relative;}
	#speler_tracking_stats #tracking_btns{
		margin-left: 0px;
	}
	#speler_tracking_stats .tijd.groep,
	#speler_tracking_stats .tijd.persoonlijk{
		margin-top: 0; clear: both;
	}
	.ui-bar::before{ display: none;}
	.ui-field-contain .ui-controlgroup-controls{
		width: 100%;
	}
	.ui-btn-inner{
		padding: .6em;
	}
}

// @media only screen and (max-width: 480px) and (-webkit-device-pixel-ratio: 1) {
// 	.ui-bar{padding: 10px 15px; background: url("images/logo_qpa_small.png") center center no-repeat;}
// 	}
// @media only screen and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {
// 	.ui-bar{padding: 10px 15px; height: 29px; background: url("images/logo_qpa_small_2x.png") center center no-repeat; background-size: 86px 32px; }
// }

/* 786px MEDIA QUERIES ============================================================================= */
@media only screen and (min-width: 768px) {
	.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
	    width: 50%;
	    font-size: 24px; 
	}
	.person .person_info div{width: 300px}
	
	#voeding .ui-grid-a .ui-block-a, #voeding .ui-grid-a .ui-block-b, #voeding .ui-grid-a .ui-block-c {
	    width: 33%;
	    font-size: 13px; 
	}
	#chart_left{width: 40%;}
	.charts{clear: none; width: 60%; margin: 0;}
	#clock{
		margin: 30px 0 0 30px;
	}
	#performance_chart,
	#piramide_chart,
	#cardio_chart,
	#standaard_chart{
		float: left;
		width:97%;
	}
	
	.oefening_left{width: 400px;}
	
	#clock_display label{
		font-size: 40px;
		padding: 60px 0;
	}
}