/* ------------------------------------------ */
/* CONTENT CSS */
/* ------------------------------------------ */


body     { background: black; padding: 0px; margin: 0px; font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif; margin: 0px; width: 100%; height: 100%; color: rgb(0, 0, 0); font-size-adjust: none; font-stretch: normal; }
.hack_ie { color: #fff; }
iframe   { border: 0px solid #fff; }
img      { border: 0px solid #fff; }
a        { color: #666; text-decoration: none; }
a:hover  { color: #f78d1d; text-decoration: none; }
legend   { color: #666; font-weight: bold; }
h2.mdl-card__title-text { padding-left: 5px; white-space: nowrap; width: calc(100% - 60px); overflow: hidden; }
header span#logo { width: calc(100% - 100px); overflow: hidden; }
body > canvas {
	position: fixed;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
}

#main .mdl-grid { overflow: hidden; }

textarea { padding: 5px; font: 13px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; border: 1px solid #ddd; }
input[type=password] { width: 330px; height: 16px;}

.hide, .mobileonly { display: none; }
.show { display: block; }

#statsrounds div.item, .box-wrapper {
	padding: 5px 15px;
	background: #ccc;
	background: rgba(0,0,0,.05);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

.clear-fix { clear: both; float:left; height: 20px; width: 100%; }

#head { position: absolute; left: 50%; margin-left: -400px; width: 800px; background: #222 url('../img/square.png'); height: 100px; overflow: hidden; }

div#head #power { height: 32px; position: absolute; right: 0px; top: 0px; }
div#head #power ul { margin: 5px 50px 5px 5px; padding: 0px; }
div#head #power ul li { line-height: 30px; height: 30px; float: left; z-index: 100; list-style-type: none; color: #ccc; margin: 0px; padding: 0px; }
div#head #power ul li a { color: #ccc; text-decoration: none; font-size: 11px; padding: 0px 5px; }
div#head #power ul li a:hover { color: #f78d1d; text-decoration: underline; }
div#head #power ul li#home a, div#head #power ul li#inscription a { border-right: 1px solid #999; }
div#head #power ul li a#log { background: url("../img/power.png") -0px 0px no-repeat; width: 34px; height: 30px; text-indent: -9000px; font-size: 1px; float: left; }
div#head #power ul li a#log:hover { background-position: 0px -60px; }
div#head #power ul li a#log.powerg { background-position: 0px -30px; }
div#head #power ul li a#log.powerr { background-position: 0px -90px; }
div#head #power ul li a#log.powerr:hover, div#head #power ul li a#log.powerg:hover { background-position: 0px -60px; }

div#head #inner { background: url('../img/logo.png') no-repeat 50px 10px; background-size: 64px 64px; position: absolute; left: 0px; top: 0px; }
.wrapper .logo, span#logo { height: 64px; color:#333; line-height: 64px; font-weight: bold; white-space: nowrap; margin: 0px 0px 0px; padding: 0px 0px; }
.wrapper .logo { width: 200px; }
span#logo { font-family: logo5; font-size: 32px; font-weight: bold;
/*
	text-shadow: 
		1px 1px 1px #919191,
		1px 2px 1px #919191,
		2px 3px 6px rgba(90,90,90,0.4);
*/
}

#logo_font_picker .button.blue { font-size: 24px !important; line-height: 24px !important; height: 50px !important; width: 180px !important; }

#shortcuts { float: right; margin: 0px 50px 0px 0px; width: 720px; }
#shortcuts li { float: left; margin: 0px 0px 0px 20px; list-style: none; height: 21px; border-bottom: 4px solid #222; }
#shortcuts li a { color: white; text-decoration: none; padding-left: 25px; }
#shortcuts li a:hover { color: #f78d1d; }
#shortcuts li:hover, #shortcuts li.selected { border-bottom: 4px solid #f78d1d; }
#shortcuts li.standby:hover { border-bottom: 4px solid #222; }
#shortcuts li.standby { width: 16px; background: none; }
#shortcuts li.waiting { height: 16px !important; width: 16px !important; background: url('../img/ajax-loader.gif') no-repeat !important; }
#shortcuts li.leagues, h2.leagues { background: url('../img/globe_3.png') no-repeat; }
#shortcuts li.players, h2.players { background: url('../img/user.png') no-repeat; }
#shortcuts li.teams, h2.teams     { background: url('../img/users.png') no-repeat; }
#shortcuts li.seasons, h2.seasons { background: url('../img/calendar_1.png') no-repeat; }
#shortcuts li.days, h2.days       { background: url('../img/calendar_1.png') no-repeat; }
#shortcuts li.dashboard, h2.dashboard { background: url('../img/dashboard.png') no-repeat; }
h2.matches	{ padding: 0px; }
h2.fannys	{ padding-left: 30px; }
#edit_matches h2	{ background: url('../img/map_pin_stroke_24x24.png') 8px 6px no-repeat; }
#edit_players h2, h2.profile { background: url('../img/user.png') 8px 10px no-repeat; }
#edit_leagues h2	{ background: url('../img/globe_3.png') 8px 10px no-repeat; }
#edit_teams h2      { background: url('../img/users.png') 8px 10px no-repeat; }
#edit_tchat h2		{ background: url('../img/spechbubble_2.png') 8px 10px no-repeat; }
h2.roles			{ background: url('../img/shield_icon&16.png') 8px 10px no-repeat; }
h2.links			{ background: url('../img/user.png') 8px 10px no-repeat; }
#shortcuts li.tables, h2.tables, h2.fannys  { background: url('../img/chart_bar.png') no-repeat; }
#shortcuts li.tchat, h2.tchat		{ background: url('../img/spechbubble_2.png') no-repeat; }
#shortcuts li.photos, h2.photos		{ background: url('../img/photo.png') no-repeat; }
#shortcuts li.mailme , h2.mailme	{ background: url('../img/sat_dish.png') no-repeat; }
#shortcuts li#id1 { background: url('../img/big-lock.png') no-repeat; }
#shortcuts li#id2 { background: url('../img/user.png') no-repeat; }
#shortcuts li#id3 { background: url('../img/unblocked-padlock.png') no-repeat; }
#shortcuts li#home { background: url('../img/globe_3.png') no-repeat; }
#shortcuts li#xclose { background: url('../img/out-button.png') no-repeat; border-top: 0px solid black; background-position: right 15px !important;  }


.sidebar li:hover {	opacity:1 !important; }
h2, .iPhoneCal .calheader { background-color: #222 !important; }

h2.leagues table {
	float: right;
    background: #444;
    -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px;
    float: right;
    margin: 1px;
    padding: 1px;
}
h2.leagues td {
	-moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0;
	border-right: 1px solid #222222;
	padding: 0 10px;
}

h2.grid { background-position: 10px 10px; }

.vgrid { float: left; width: 100%; }

#main-content.valid_page #footer, #cmain-ontent.login_page #footer { background: none; color: #fff; }
#main-content.valid_page #footer a, #main-content.login_page #footer a { color: #fff; }
#main-content.valid_page h2, #main-content.login_page h2 { background-color: #000; }
#main-content.valid_page ul.sidebar li a, #main-content.login_page ul.sidebar li a { border-color: #333; }
#main-content.valid_page ul#leftsidebar li a, #main-content.login_page ul#leftsidebar li a { background-color: #111; }
#main-content.valid_page ul.sidebar li a:hover, #main-content.login_page ul.sidebar li a:hover {	border-color: rgba(175, 245, 61, 1.0); }
#main-content.valid_page ul#leftsidebar li a:hover, #main-content.login_page ul#leftsidebar li a:hover { border-color: rgba(81, 203, 238, 1.0); }

#footer { clear: both; float: left; position: relative; text-align: center; width: 100%; height: 60px; line-height: 20px; font-size: 11px; color: #666; background: url('../img/bkg-footer.png') no-repeat top center; }
#footer #copyright { float: right; margin: 30px 30px 0px 0px; }
#footer #other { float: left; margin: 30px 0px 0px 30px; }
#footer #other ul { margin: 0px; padding: 0px }
#footer #other li { float: left; list-style: none; margin: 0px 15px 0px 0px; background: url('../img/icons/dark/appbar.cloud.png') no-repeat -4px -9px; background-size: 36px 36px; padding-left: 28px; }
#footer #other li#mail { background: url('../img/icons/dark/appbar.message.send.png') no-repeat -4px -4px;  background-size: 28px 28px; }
#footer #other li#info { background: url('../img/icons/dark/appbar.information.circle.png') no-repeat 0px -4px;  background-size: 28px 28px; }
#footer #other li#paypal { display: none; background: url('../img/icons/dark/appbar.paypal.png') no-repeat 2px -2px;  background-size: 24px 24px; }

.form-wrapper { float: left; height: 26px; width: 390px; margin: 5px 0px 0px; background: #444; background: rgba(0,0,0,.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 2px solid rgba(255,255,255,.5); }
.form-wrapper input { width: 330px; height: 16px; padding: 5px; float: left; font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #eee; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; }
.form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; }
.form-wrapper input:-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
.form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
.form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 26px;
    width: 50px;
    font: bold 13px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover { background: #e54040; }
.form-wrapper button:active, .form-wrapper button:focus { background: #c42f2f; }
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 5px;
    left: -6px;
}
.form-wrapper button:hover:before { border-right-color: #e54040; }
.form-wrapper button:focus:before{ border-right-color: #c42f2f; }
.form-wrapper button::-moz-focus-inner { border: 0; padding: 0; }

.actions { float: right; margin-top: 7px; }
.actions .button { float: left; }
.actions.controls .button { padding-top: 3px !important; padding-bottom: 3px !important; }
.actions .button .ico { width: 25px; height: 15px; }
.actions #ctrl1 div { background: url('../img/icons/dark/appbar.control.rewind.png') no-repeat -12px -16px; }
.actions #ctrl2 div { background: url('../img/icons/dark/appbar.control.previous.png') no-repeat -12px -16px; }
.actions #ctrl3 div { background: url('../img/icons/dark/appbar.control.next.png') no-repeat -12px -16px; }
.actions #ctrl4 div { background: url('../img/icons/dark/appbar.control.fastforward.png') no-repeat -12px -16px; }
.actions .disable { background-color: #aaa; }
/* .full-circle:hover { background: #fff; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } */
* html .full-circle:hover { background: #fff; }

.full-circle img { border: 0px; }

ul.sidebar { position: absolute; right: -30px; top: 22px; width: 61px; z-index: 999; padding: 0px; }
ul#leftsidebar { left: -30px; right: auto; }
ul.sidebar li { width: 61px; height: 61px; float: left; z-index: 100; list-style-type: none; margin-bottom: 10px;
	-moz-border-radius: 61px;
	-webkit-border-radius: 61px;
	border-radius: 61px;
}

ul.sidebar li a {
	-moz-border-radius: 41px;
	-webkit-border-radius: 41px;
	border-radius: 41px;
	width: 41px;
	height: 41px;
	text-indent: -9000px;
	font-size: 1px;
	display: block;
	text-decoration: none;

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

	background: #444 url('../img/icons/dark/appbar.add.png') no-repeat -4px;
}

.fabmenu a {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    text-indent: -9000px;
    font-size: 1px;
    display: block;
    text-decoration: none;

    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    background: #444 url('../img/icons/dark/appbar.add.png') no-repeat -4px;
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);

}

.fabmenu .annu, ul#leftsidebar li a#annu	{ background: #444 url('../img/icons/dark/appbar.location.round.png') no-repeat -3px; }
.fabmenu .profil, ul#leftsidebar li a#profil	{ background: #444 url('../img/icons/dark/appbar.id.card.png') no-repeat -4px; }
.fabmenu .sb_mail, ul.sidebar li a#sb_mail		{ background: #444 url('../img/icons/dark/appbar.email.png') no-repeat 50% !important; }
.fabmenu .sb_mail2, ul.sidebar li a#sb_mail2	{ background: #444 url('../img/icons/dark/appbar.email.group.png') no-repeat -4px; }
.fabmenu .sb_join, ul.sidebar li a#sb_join		{ background: #444 url('../img/icons/dark/appbar.watchman.png') no-repeat -4px; }
.fabmenu .sb_join2, ul.sidebar li a#sb_join2	{ background: #444 url('../img/icons/dark/appbar.connect.png') no-repeat -4px; }
.fabmenu .sb_link_player, ul.sidebar li a#sb_link_player { background: #444 url('../img/icons/dark/appbar.connect.png') no-repeat -4px; }
.fabmenu .sb_settings, ul.sidebar li a#sb_settings	{ background: #444 url('../img/icons/dark/appbar.cogs.png') no-repeat -4px; }
.fabmenu .sb_sync, ul.sidebar li a#sb_sync		{ background: #444 url('../img/icons/dark/appbar.loop.png') no-repeat -4px; }
.fabmenu .sb_backup, ul.sidebar li a#sb_backup	{ background: #444 url('../img/icons/dark/appbar.database.png') no-repeat -4px; }
.fabmenu .sb_saison, ul.sidebar li a#sb_saison	{ background: #444 url('../img/icons/dark/appbar.calendar.png') no-repeat -4px; }
.fabmenu .sb_stats, ul.sidebar li a#sb_stats	{ background: #444 url('../img/icons/dark/appbar.stock.up.png') no-repeat -4px; }
.fabmenu .swap1, ul.sidebar li#swap1 a.swap	{ background: #444 url('../img/icons/dark/appbar.list.png') no-repeat -4px; }
.fabmenu .swap2, ul.sidebar li#swap2 a.swap	{ background: #444 url('../img/icons/dark/appbar.calendar.png') no-repeat -4px; }
.fabmenu .sb_del, ul.sidebar li a#sb_del		{ background: #444 url('../img/icons/dark/appbar.delete.png') no-repeat -4px; }
.fabmenu .sb_upd, ul.sidebar li a#sb_upd		{ background: #444 url('../img/icons/dark/appbar.edit.png') no-repeat -4px; }
.fabmenu .sb_buildall, ul.sidebar li a#sb_buildall	{ background: #444 url('../img/icons/dark/appbar.magic.wand.png') no-repeat -4px; }
.fabmenu .sb_map, ul.sidebar li a#sb_map		{ background: #444 url('../img/icons/dark/appbar.map2.png') no-repeat 3px !important; }
.fabmenu .sb_best, ul.sidebar li a#sb_best		{ background: #444 url('../img/icons/dark/appbar.stock.up.png') no-repeat -4px; }
.fabmenu .sb_besta, ul.sidebar li a#sb_besta	{ background: #444 url('../img/icons/dark/appbar.people.down.png') no-repeat -4px; }
.fabmenu .sb_bestd, ul.sidebar li a#sb_bestd	{ background: #444 url('../img/icons/dark/appbar.people.up.png') no-repeat -4px; }
.fabmenu .sb_beste, ul.sidebar li a#sb_beste	{ background: #444 url('../img/icons/dark/appbar.leaderboard.png') no-repeat -4px; }
.fabmenu .sb_bestea, ul.sidebar li a#sb_bestea	{ background: #444 url('../img/icons/dark/appbar.people2.down.png') no-repeat -4px; }
.fabmenu .sb_bested, ul.sidebar li a#sb_bested	{ background: #444 url('../img/icons/dark/appbar.people2.up.png') no-repeat -4px; }
.fabmenu .sb_export, ul.sidebar li a#sb_export	{ background: #444 url('../img/icons/dark/appbar.cloud.upload.png') no-repeat -4px; }
.fabmenu .sb_shield, ul.sidebar li a#sb_shield	{ background: #444 url('../img/icons/dark/appbar.shield.alert.png') no-repeat -3px; }
.fabmenu .sb_weight, ul.sidebar li a#sb_weight	{ background: #444 url('../img/icons/dark/appbar.weight.png') no-repeat -4px; }
.fabmenu .sb_runner, ul.sidebar li a#sb_runner	{ background: #444 url('../img/icons/dark/appbar.runner.png') no-repeat -4px; }
.fabmenu .sb_back, ul.sidebar li a#sb_back 	{ background: #444 url('../img/icons/dark/appbar.back.png') no-repeat -4px; }
ul.sidebar li a#sb_export span { width: 290px; left: -315px; }
.fabmenu a { background-position: 50% 50% !important; }
.fabmenu .pucecounter { left: 0px !important; top: -10px !important; }
.menu-open:checked ~ .menu-item .pucecounter { left: 0px !important; top: -10px !important; }
.fabmenu .sb_fb, ul.sidebar li a#sb_fb		{ background: #444 url('../img/icons/dark/appbar.facebook.heart.png') no-repeat -4px; text-indent: 0px; }
ul.sidebar li a#sb_fb img	{ margin: 5px; }


ul.sidebar li a:hover {
	box-shadow: 0 0px 10px rgba(124, 194, 9, 1.0);
	-moz-box-shadow: 0 0px 10px rgba(124, 194, 9, 1.0);
	-webkit-box-shadow: 0 0px 10px rgba(124, 194, 9, 1.0);
	border: 10px solid rgba(175, 245, 61, 1.0);
	background-color: rgba(68, 68, 68, 0.7) !important;
}

ul#leftsidebar li a:hover {
	box-shadow: 0 0px 10px rgba(81, 203, 238, 1.0);
	-moz-box-shadow: 0 0px 10px rgba(81, 203, 238, 1.0);
	-webkit-box-shadow: 0 0px 10px rgba(81, 203, 238, 1.0);
	border: 10px solid rgba(81, 203, 238, 1.0);
	background-color: rgba(68, 68, 68, 0.7) !important;
}


/* tooltip */
.ToolText           { position:relative; }
.ToolTextHover      { position:relative; }
.ToolText span      { display: none; }
.ToolTextHover span { opacity: .9; display:block; position:absolute; border:1px solid gray; top:5px; left:-220px; background:#999; color:#eee; font-weight: bold; text-align: center; text-indent: 0px; font-size: 12px; width: 180px; z-index: 9999; }
#sb_buildall.ToolTextHover span { left:-300px; }
ul#leftsidebar .ToolTextHover span { top:7px; left:55px; }


/* upload */
#f1_upload_form { line-height: 18px; }
#myfile { width: auto !important; }
#f1_upload_process { line-height: 18px; z-index:100; display: none; }
#f1_upload_ok, #f1_upload_err { display: none; }
ul.upload_target { list-style: none; }
ul.upload_target li { float: left; margin: 0px 20px 10px 0px; }


/* build all matches */
.mycalendar { width: 100%; background: #fff; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.mycalendar table { width: 100%; border-right: 1px solid #ccc; }
.mycalendar .vide { background: #eee; }
.mycalendar .vide2, .mycalendar .vide3 { background: #CCFFFF; }
.mycalendar .pleine { background: #E0E0E0; padding: 0px 2px; }
.mycalendar .pleine2, .mycalendar .pleine3 { background: #CCFFFF; padding: 0px 2px; }
.mycalendar td { height: 20px; line-height: 16px; }
.mycalendar td span { font-weight: normal; font-size: 10px; line-height: 10px; }
.mycalendar .mois { font-weight: bold; font-size: 10px; background: #bbb; text-align: center; }
.jours td { font-size: 10px; font-weight: bold; background: #ccc; width: 30px; text-align: center; }
.jours .fonce { background: #99FFFF; }


/* tooltip */
#ttip { position:absolute; display:block; padding: 0px 20px; border:1px solid gray; background:#999; color:#eee; font-weight: bold; text-align: center; font-size: 12px; line-height: 30px; z-index: 9999; }


/* blackscreen */
.blackscreen { background:#000; opacity: 0.85; filter:alpha(opacity=85); position:absolute; z-index: 19999; top:0px; left:0px; width:100%; height: 100%; }
.veryblackscreen { opacity: 0.95; filter:alpha(opacity=95); }
.fullblackscreen {
	opacity: 1.00; filter:alpha(opacity=100);
	background-image: linear-gradient(bottom, rgb(10,10,10) 9%, rgb(56,56,56) 49%, rgb(0,0,0) 100%);
	background-image: -o-linear-gradient(bottom, rgb(10,10,10) 9%, rgb(56,56,56) 49%, rgb(0,0,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(10,10,10) 9%, rgb(56,56,56) 49%, rgb(0,0,0) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(10,10,10) 9%, rgb(56,56,56) 49%, rgb(0,0,0) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(10,10,10) 9%, rgb(56,56,56) 49%, rgb(0,0,0) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(10,10,10)), color-stop(0.49, rgb(56,56,56)), color-stop(1, rgb(0,0,0)) );
}

.scoreblackscreen { opacity: 1.00; filter:alpha(opacity=100); background: #555 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpi/P//PwM6YGLAAuCCmpqacC2MRGsHCDAA+fIHfeQbO8kAAAAASUVORK5CYII=); }


#overblackscreen { position: absolute; top: 100px; left: 50%; margin-left: -340px; z-index: 99999; width: 600px; background: white; padding: 20px; border: 20px solid #ccc; }
#overblackscreen h3 { clear: both; margin: 0px 0px 5px; text-align: right; border-bottom: 1px dotted #bbb; line-height: auto; height: 30px; }

#geolocalisation { position: absolute; height: 800px; width: 800px; z-index: 20000; margin-left: -400px; margin-top: -400px; left: 50%; top: 50%; }

.trombinoscope .button { margin: 10px 5px 0px 5px; }
.trombinoscope .button div { line-height: 20px; }


#statsrounds { clear: both; width: 700px; height: 130px; text-align:center; margin-top: 5px; }
#statsrounds.fannys { height: 270px; }
#statsrounds div.out { margin-left: 26px; }
#statsrounds div.item { padding: 5px; margin: 5px; width: 157px; font-size: 12px; }
#statsrounds li:nth-child(4n+1) div.item { margin-left: 0px; }
#statsrounds li:nth-child(4n) div.item { margin-right: 0px; }
#statsrounds div.label { color: #999; line-height: 14px; padding-top: 5px; white-space: nowrap; overflow: hidden; }

.thumbnail img { height: 32px; width: 32px; margin: 0px 5px 5px 0px; }

.login_form { display: flex; justify-content: space-around; margin: 20px; flex-direction: row; flex-wrap: wrap; }

div#box { clear: both; }

#dash .mdl-card__supporting-text {
    padding: 0px 0px 10px;
    width: 100%;
}
#dashcounter { text-align: center; }
#dashcounter button { width: 250px; height: 45px; line-height: 18px; font-size: 18px; text-align: left; margin: 5px 0px 5px 3px; }

#dashcounter .box, #dashcounter .box { padding: 0px 10px 5px 40px; }

.bf0, #dashcounter #bf0 .box { background: url('../img/icons/dark/appbar.sleep.png') no-repeat -7px -10px; }
.bf1, #dashcounter #bf1 .box { background: url('../img/icons/dark/appbar.smiley.angry.png') no-repeat -7px -10px; }
.bf2, #dashcounter #bf2 .box { background: url('../img/icons/dark/appbar.smiley.cry.png') no-repeat -7px -10px; }
.bf3, #dashcounter #bf3 .box { background: url('../img/icons/dark/appbar.smiley.tounge.png') no-repeat -7px -10px; }
.bf4, #dashcounter #bf4 .box { background: url('../img/icons/dark/appbar.smiley.happy.png') no-repeat -7px -10px; }
.bf5, #dashcounter #bf5 .box { background: url('../img/icons/dark/appbar.smiley.grin.png') no-repeat -7px -10px; }
.bf8, #dashcounter #bf8 .box { background: url('../img/icons/dark/appbar.bed.png') no-repeat -7px -10px; }
.bf9, #dashcounter #bf9 .box { background: url('../img/icons/dark/appbar.plane.rotated.45.png') no-repeat -7px -10px; }

.formeind { background-position: 0px 0px; background-size: 32px 32px; height: 30px; width: 32px; }
#dash .forme { float: left; width: 24px; margin: 2px 10px 2px 5px; }
#dash .formeind { background-size: 24px 24px; height: 24px; width: 24px; }

#dashcounter #bf6 .box { background: url('../img/icons/dark/appbar.smiley.squint.png') no-repeat -7px -10px; }
#dashcounter #bf7 .box { background: url('../img/icons/dark/appbar.transit.car.accident.png') no-repeat -7px -10px; }
#dashcounter #bf88 .box { background: url('../img/icons/dark/appbar.camera.flash.auto.png') no-repeat -7px -10px; }
#dashcounter #bf99 .box { background: url('../img/icons/dark/appbar.chess.rook.png') no-repeat -7px -10px; }
#dashcounter #bf10 .box { background: url('../img/icons/dark/appbar.chess.horse.png') no-repeat -7px -10px; }
#dashcounter #bf11 .box { background: url('../img/icons/dark/appbar.inbox.out.png') no-repeat -7px -7px; }
#dashcounter #bf12 .box { background: url('../img/icons/dark/appbar.inbox.in.png') no-repeat -7px -7px; }
#dashcounter #bf13 .box { background: url('../img/icons/dark/appbar.cert.png') no-repeat 2px 0px; }

#dashcounter .small .cnt { font-size: 14px; line-height: 14px; }
#dashcounter .small .txt { font-size: 10px; line-height: 10px; }

#dashcounter i {
	font-size: 32px;
	height: 30px;
	float: left;
	padding: 0px 15px 0px 5px;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(15, 60, 113, 0.7)
}
#dashcounter .cnt, #dashcounter .txt {
	padding-left: 10px;
	float: left;
	border: 0px !important;
	line-height: 30px; font-size: 16px;
}
#dashcounter .cnt {
	padding-left: 15px;
	width: 30px;
	text-align: right;
}
#dashcounter #saisons button { text-align: center; }

#dashcounter .skills .formeind {
	width: 45px !important;
	float: left !important;
}

#bloc0 { float: right; height: 55px; padding: 0px; margin-top: 10px; }
#bloc1 { height: 65px; margin-top: 10px; }
#bloc2, #bloc4 { height: 65px; margin-top: 10px; }
#bloc2 #b12 { display: none; }
#bloc3 { height: 135px; margin-top: 10px; }
.compact #bloc2 .button, .compact #bloc2 .title, .compact #bloc2 #b13 { display: none; }
.compact #bloc2 #b12, .compact #bloc2 :nth-child(1), .compact #bloc2 :nth-child(2), .compact #bloc2 :nth-child(3), .compact #bloc2 :nth-child(4), .compact #bloc2 :nth-child(5), .compact #bloc2 :nth-child(6), .compact #bloc2 :nth-child(7) { display: block; }
.compact #bloc3, .compact #bloc4 { display: none; }

#bloc3 .box { padding: 0px 0px 5px 0px; }
#bloc2 button .txt, #bloc3 button .txt { white-space: nowrap; overflow: hidden; font-size: 12px; }

#albums button, #albums .txt, #albums .box { width: auto !important; color: #fff; }
#albums .txt { line-height: 14px !important; padding: 0px; font-weight: normal; }

.bt { height: 32px; width: 32px; background: #bbb; border-radius: 16px; -webkit-border-radius: 16px; }
.bt:hover { background-color: #666; cursor: pointer; }

.title .bt { height: 32px; width: 32px; margin: 0px 0px 0px 5px; float: right; }

.nav { float: left; margin: 5px 0px; padding: 0px; height: 30px; }
.nav .bt { margin-top: -1px; float: left; padding: 0px; }
.nav h3 { float: left; width: 88px; }
.nav #pages { float: left; padding: 0px; margin: 0px; }
.nav #pages .lightgray { color: #999; font-weight: normal; text-shadow: none; }
.nav li { display: none; float: left; list-style: none; }
.nav li .button { height: 30px; line-height: 18px; width: 45px !important; font-weight: bold; }

#dash h3 { padding: 0px; margin: 5px 0px 2px; color: #333; text-align: center; }
#dash #box3 { margin-top: 0px !important; }
.dashboard_page .box-wrapper {
    padding: 10px !important;
}
#dash #journee_detail tr td { border-top: 1px solid #ccc; padding: 3px 0px; font-weight: bold; }
#dash #journee_detail tr td { width: 150px; }
#dash #journee_detail tr td.score { width: 100px; }

#dash #journee_detail tr td .score td { padding: 0px 4px; }
#occazbox, #classement_tab { text-align: right; }
#occazbox .button, #classement_tab .button { float: none; }

h2.dashboard .button span { padding: 0px 24px 0px 12px !important; font-weight: normal !important; line-height: 20px !important; }

.bullet { float: left; border: 4px solid #ccc; height: 22px; width: 22px; -webkit-border-radius: 18px; border-radius: 18px; background: #999 url('../img/icons-18-white.png') -107px 2px no-repeat; }
.bullet:hover { background-color: #666; }

.jkgrid td.go div .bullet { display: none; }
.classic .jkgrid td.go div .bullet { display: block; margin: 0px 3px; }


#leftg {
background: #000;
background-image: linear-gradient(left, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -o-linear-gradient(left, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -moz-linear-gradient(left, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -webkit-linear-gradient(left, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -ms-linear-gradient(left, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.20, red), color-stop(0.5, #F8A50E), color-stop(0.75, yellow), color-stop(1, #5ec107));
}
#leftc { background: #5ec107; }
#leftd {
background: #000;
background-image: linear-gradient(right, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -o-linear-gradient(right, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -moz-linear-gradient(right, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -webkit-linear-gradient(right, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -ms-linear-gradient(right, red 20%, #F8A50E 50%, yellow 75%, #5ec107 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0.20, red), color-stop(0.5, #F8A50E), color-stop(0.75, yellow), color-stop(1, #5ec107));
}

.btj div { margin: 5px; border-top: 1px dashed #fff; font-size: x-small; }
.btj2 div { margin: 5px; padding: 3px 0px; border-top: 1px dashed #444; font-size: 12px; line-height: 16px ! important; overflow: hidden; }
.btj2.blue div, .btj2.orange div { border-top: 1px dashed #fff; }
.btj2 div span { width: 100px; white-space: nowrap; overflow: hidden; }

.btj2.gold:before, .btj2.silver:before, .btj2.bronze:before {
	position: absolute;
	margin: 280px 0 0 250px !important;
	transform: scale(.5); -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); -ms-transform: scale(.5);
}
.btj2.gold:before {
	content:url('../img/gold.png');
}
.btj2.silver:before {
	content:url('../img/silver.png');
}
.btj2.bronze:before {
	content:url('../img/bronze.png');
}

.trombinoscope .btj2.gold:before, .trombinoscope .btj2.silver:before, .trombinoscope .btj2.bronze:before { margin: 65px 0 0 80px !important; }

ul.trombinoscope { margin: 0px 0px 0px 8px; padding: 0px; }
ul.huge.trombinoscope { margin: 10px 0px 0px 8px; }

ul.trombinoscope li {
	width: 130px; height: 155px;
	margin: 10px !important;
	-webkit-transform: rotate(-2deg) scale(1);
	-moz-transform: rotate(-2deg) scale(1);
	-o-transform: rotate(-2deg) scale(1);
	-ms-transform: rotate(-2deg) scale(1);
	transform: rotate(-2deg) scale(1);
}
ul.huge.trombinoscope li { width: 104px; height: 124px; margin: 0px 5px 10px !important; }

ul.trombinoscope li img { height: 125px; width: 125px; }
ul.huge.trombinoscope li img { height: 100px; width: 100px; }

ul.trombinoscope li div { white-space: nowrap; }

ul.trombinoscope li:nth-child(even) {
	-webkit-transform: rotate(2deg) scale(1);
	-moz-transform: rotate(2deg) scale(1);
	-o-transform: rotate(2deg) scale(1);
	-ms-transform: rotate(2deg) scale(1);
	transform: rotate(2deg) scale(1);
}

ul.trombinoscope li:nth-child(3n) {
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
	position: relative;
	top: -5px;
}

ul.trombinoscope li:nth-child(5n) {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	position: relative;
	right: 5px;
}

ul.trombinoscope li:nth-child(8n) {
	position: relative;
	top: 8px;
	right: 5px;
}

ul.trombinoscope li:nth-child(11n) {
	position: relative;
	top: 3px;
	left: -5px;
}

ul.trombinoscope li:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-o-transform: scale(1.25);
	-ms-transform: scale(1.25);
	transform: scale(1.25);
	position: relative;
	z-index: 5;
}

ul.trombinoscope li {
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

ul.trombinoscope li:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

.bartable { width: 700px; }
.bartable .bars .item { padding: 0px }
.bartable .bars .pourc { height: 14px; line-height: 14px; margin-top: 2px; }
.bartable .bars .lib { font-size: 14px; }

#type_sport span img { float: left; height: 16px; width: 20px; }
#type_sport_picker .button.blue { width: 184px; }

#edit_leagues #f1_upload_form label { width: 210px; }
#edit_leagues ul.upload_target li { margin-bottom: 0px; }
#edit_leagues .grouped.choices span { padding: 0px; }
#edit_leagues h5 { margin: 0px; line-height: 18px; }

#news_ticker {
	width: 520px;
	height: 33px;
	margin: 5px;
	overflow: hidden;
	padding: 3px;
	position: relative;
}
#news_ticker ul {
	float: left;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	-webkit-animation: ticker 30s ease-in-out 1;
	-moz-animation: ticker 30s ease-in-out 1;
	-ms-animation: ticker 30s ease-in-out 1;
	animation: ticker 30s ease-in-out 1;
}
#news_ticker ul:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}
#news_ticker li { list-style: none; font-size: 11px; }
#news_ticker li span { color: #333; white-space: nowrap; }
#news_ticker li span:first-child { font-weight: bold; }
#news_ticker a {
	color: #0084B4;
	text-decoration: none;
	font-size: 11px;
}

@-webkit-keyframes ticker {
	0%   {margin-top: 0;}
	15%  {margin-top: 0;}
	20%  {margin-top: -37px;}
	35%  {margin-top: -37px;}
	40%  {margin-top: -74px;}
	55%  {margin-top: -74px;}
	60%  {margin-top: -111px;}
	75%  {margin-top: -111px;}
	80%  {margin-top: -145px;}
	95%  {margin-top: -145px;}
	100% {margin-top: 0;}
}
@-moz-keyframes ticker {
	0%   {margin-top: 0;}
	15%  {margin-top: 0;}
	20%  {margin-top: -37px;}
	35%  {margin-top: -37px;}
	40%  {margin-top: -74px;}
	55%  {margin-top: -74px;}
	60%  {margin-top: -111px;}
	75%  {margin-top: -111px;}
	80%  {margin-top: -145px;}
	95%  {margin-top: -145px;}
	100% {margin-top: 0;}
}
@-ms-keyframes ticker {
	0%   {margin-top: 0;}
	15%  {margin-top: 0;}
	20%  {margin-top: -37px;}
	35%  {margin-top: -37px;}
	40%  {margin-top: -74px;}
	55%  {margin-top: -74px;}
	60%  {margin-top: -111px;}
	75%  {margin-top: -111px;}
	80%  {margin-top: -145px;}
	95%  {margin-top: -145px;}
	100% {margin-top: 0;}
}
@keyframes ticker {
	0%   {margin-top: 0;}
	15%  {margin-top: 0;}
	20%  {margin-top: -37px;}
	35%  {margin-top: -37px;}
	40%  {margin-top: -74px;}
	55%  {margin-top: -74px;}
	60%  {margin-top: -111px;}
	75%  {margin-top: -111px;}
	80%  {margin-top: -145px;}
	95%  {margin-top: -145px;}
	100% {margin-top: 0;}
}





/* responsive mobile css */
.nav-trigger, #myloader {
    display: none;
}
.fabmenu {
    position: fixed;
    z-index: 99999;
}

.menu-open {
    display: none;
}

.menu-item, .menu-open-button {
    position: fixed;
    display: block;
    right: 0;
    bottom: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    z-index: 900;
}
.menu-item {
    margin-right: 21px;
    margin-bottom: 21px;
    z-index: 900;
}

.menu-item:nth-child(2), .menu-item:nth-child(3), .menu-item:nth-child(4), .menu-item:nth-child(5), .menu-item:nth-child(6), .menu-item:nth-child(7), .menu-item:nth-child(8), .menu-item:nth-child(9) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}

.menu-open:checked ~ label span {
    -webkit-transform: rotate(-180deg) scale(1);
    -moz-transform: rotate(-180deg) scale(1);
    -o-transform: rotate(-180deg) scale(1);
    -ms-transform: rotate(-180deg) scale(1);
    transform: rotate(-180deg) scale(1);
}
.menu-open:checked ~ .menu-item:nth-child(2) {
    -webkit-transition-duration: 190ms;
    transition-duration: 190ms;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
    -webkit-transition-duration: 290ms;
    transition-duration: 290ms;
    -webkit-transform: translate3d(0, -120px, 0);
    transform: translate3d(0, -120px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
    -webkit-transition-duration: 390ms;
    transition-duration: 390ms;
    -webkit-transform: translate3d(0, -180px, 0);
    transform: translate3d(0, -180px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
    -webkit-transition-duration: 490ms;
    transition-duration: 490ms;
    -webkit-transform: translate3d(0, -240px, 0);
    transform: translate3d(0, -240px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
    -webkit-transition-duration: 590ms;
    transition-duration: 590ms;
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
    -webkit-transition-duration: 640ms;
    transition-duration: 640ms;
    -webkit-transform: translate3d(0, -360px, 0);
    transform: translate3d(0, -360px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
    -webkit-transition-duration: 700ms;
    transition-duration: 700ms;
    -webkit-transform: translate3d(0, -420px, 0);
    transform: translate3d(0, -420px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
    -webkit-transition-duration: 840ms;
    transition-duration: 840ms;
    -webkit-transform: translate3d(0, -480px, 0);
    transform: translate3d(0, -480px, 0);
}
.fabmenu .ToolTextHover span {
	opacity: 1;
    z-index: -10000 !important;
    top: 5px !important;
    left:-250px !important;
	background:rgba(125, 125, 125, .9);
	border-radius: 5px;
	height: 20px;
	line-height: 20px;
	top: 10px !important;
	color: white;
	border: 0px;
	text-align: center;
	padding-right: 10px !important;
	width: 225px !important;
}

#billboard .mdl-card__title, #dashjournee .mdl-card__title {
	padding-top: 8px !important;
	padding-bottom: 5px !important;
}



@media screen and (min-width:0px) and (max-width:1024px)
{

}

@media screen and (min-width:0px) and (max-width:768px)
{
	body { -webkit-font-smoothing: antialiased; }
	.mdl-grid { padding: 0px !important; }
	#main-content { padding: 10px 0px 20px !important; }
	#main .mdl-card__title { padding: 8px !important; }
	#main .mdl-card__menu { top: 5px !important; }
	.leagues_page #main .mdl-card__menu { top: 10px !important; }
    body {
        /* Without this, the body has excess horizontal scroll when the menu is open */
        overflow-x: hidden;
    }

    .site-wrap {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    #head {
        position: relative;
    }
    #footer {
        float: none;
    }

    .section {
        padding: 0px;
    }
    #head {
		height: 60px;
		top: initial !important;
		border-radius: 0px !important;
		-moz-border-radius: 0px !important;
		-webkit-border-radius: 0px !important;
		-moz-box-shadow: 0 0 0px #000 !important;
		-webkit-box-shadow: 0 0 0px #000 !important;
		box-shadow: 0 0 0px #000 !important;
        background: #000 !important;
	}
	div#head #inner {
		background-position-y: -1000px;
	}
	.wrapper .logo, h1#logo {
		padding-left: 20px;
		height: 60px;
		line-height: 65px;
        width: auto;
	}
    span#logo { font-size: 24px; }
    .mymenu {
        float: left;
        display: block;
        margin: 13px 0px 0px 10px;
    }
	#power {
		left: 0px;
		display: none;
	}
    #shortcuts { width: 210px !important; }
    #shortcuts li { margin: 0px 0px 0px; border: 0px solid #222; padding-top: 0px; background-position: 10px 15px !important; }
    #shortcuts li a { padding-left: 10px !important; }
    #shortcuts li.selected { background-color: #D83C3C; border-bottom: 0px solid #000; }
    #shortcuts li.selected a { background: #373a47; color: #FF6A6A; }
    #shortcuts li:hover { border-bottom: 0px solid #f78d1d; }

    h2 {
        border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
    }
    .login_form .form-3 {
        width: 100%;
    }
    .login_form .form-3:nth-child(2) {
        margin-top: 20px;
    }
    .dashboard_page .jkgrid {
        margin: auto;
    }
    .dashboard_page #matches .c2, .dashboard_page #matches .c4  {
        width: 50% !important;
    }
    .dashboard_page #table_players .c2, .dashboard_page #table_teams .c2  {
        width: 100% !important;
    }
    .dashboard_page .box-wrapper {
        margin: 0px !important;
        padding: 5px 10px 0px !important;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, .4) inset, 0 0px 0 rgba(255, 255, 255, .2);
        -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .4) inset, 0 0px 0 rgba(255, 255, 255, .2);
        box-shadow: 0 0px 0px rgba(0, 0, 0, .4) inset, 0 0px 0 rgba(255, 255, 255, .2);
        background: none;
    }
    .dashboard_page .box-wrapper h3 {
        background: #bbb;
        color: #000 !important;
        padding: 5px 5px 2px 0px !important;
        margin-bottom: 1px !important;
    }
    .dashboard_page .bt {
        background: none !important;
    }
    .dashboard_page .box-wrapper #occazbox, .dashboard_page .box-wrapper #classement_tab {
        background: rgba(0, 0, 0, .05);
        margin: 0px !important;
    }
    h2.dashboard span { display: none; }
    #footer { height: auto !important; background: #ccc !important; border-radius: 0px!important; -moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; }
    #footer #other { margin-top: 20px; }
    #footer #copyright { float: none; margin: 0px; }


    /* Navigation Menu - Background */
	.navigation {
		/* critical sizing and position styles */
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -999 !important;

		/* non-critical appearance styles */
		list-style: none;
		background: #373a47;
        padding: 0px 0px 0px !important;
        margin: 0px !important;
	}

	/* Navigation Menu - List items */
	.nav-item {
		/* non-critical appearance styles */
		width: 95%;
		border-top: 1px solid #333;
		border-bottom: 1px solid #000;
        float: none !important;
        height: 48px !important;
	}

	.nav-item a {
		/* non-critical appearance styles */
		display: block;
		color: white;
		font-size: 14px;
        line-height: 48px;
		text-decoration: none;
        margin-left: 40px !important;
	}

	/* Site Wrapper - Everything that isn't navigation */
	.site-wrap {
		/* Critical position and size styles */
		min-height: 100%;
		min-width: 100%;
		background-color: white; /* Needs a background or else the nav will show through */
		position: relative;
		top: initial;
		bottom: 100%;
		left: 0;
		z-index: 1;
	}

	/* Nav Trigger */
	.nav-trigger {
		/* critical styles - hide the checkbox input */
		position: absolute;
		clip: rect(0, 0, 0, 0);
	}

	label[for="nav-trigger"] {
		/* critical positioning styles */
		position: fixed;
		left: 15px; top: 15px;
		z-index: 2;

		/* non-critical apperance styles */
		height: 30px;
		width: 30px;
		cursor: pointer;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' style='fill:rgb(255,255,255);' /><rect y='24' width='30' height='6' style='fill:rgb(255,255,255);' /><rect y='12' width='30' height='6' style='fill:rgb(255,255,255);' /></svg>");
		background-size: contain;
	}

	/* Make the Magic Happen */
	.nav-trigger + label, .site-wrap {
		transition: left 1s;
	}

	.nav-trigger:checked + label {
		left: 305px;
	}

    .nav-trigger:checked ~ .site-wrap #shortcuts {
        left: 0px;
        box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.5) !important;
        -moz-box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.5) !important;
        -webkit-box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.5) !important;
    }

    .nav-trigger:checked ~ .site-wrap #shortcuts {
        z-index: 99999999 !important;
        box-shadow:  0 0 5px 5px rgba(0,0,0,0.5) !important;
        -moz-box-shadow:  0 0 5px 5px rgba(0,0,0,0.5) !important;
        -webkit-box-shadow:  0 0 5px 5px rgba(0,0,0,0.5) !important;
    }

    .choices_picker {
        position: fixed !important;
        width: 100% !important;
        text-align: center;
        margin: auto !important;
        float: none !important;
        border: 0px solid #ccc !important;
        left: auto !important;
        padding: 20px !important;
    }

    .form-wrapper { width: 98%; }
    .form-wrapper input { width: 75%; }
    .form-wrapper button { width: 22%; }
    .iPhoneCal .calweekswrapper .daybox { height: 30px !important; padding-top: 15px !important; }
    .caltitle { line-height: 40px !important; }
    .iPhoneCal .calcontrol { width: 50px !important; }
    .mobileonly { display: block; }

	#leagues .c5, #leagues .c7, #leagues .c8 { display: none; }
	#leagues .c6 div { width: 70px !important; }
	#roles .c2 { width: 100%; }
	#roles .c2 div { width: auto !important; }
	#roles .c3 { display: none; }

	#main #dashjournee .mdl-card__title {
		padding-top: 5px !important;
		padding-bottom: 0px !important;
	}
	#main #dashjournee .mdl-card__title h2 {
			font-size: 20px !important;
	}

	.choices_picker {
		position: relative !important;
		width: calc(100% - 80px) !important;
		margin: 20px !important;
		left: 0px !important;
	}
}

@media only screen and (max-width:480px) {

	.leagues_page .mdl-card__title { height: 50px; }
	.leagues_page h2 { display: none; }

	#head { left: 0px !important; margin-left: 0px !important; width: 100% !important; }
	#leagues .c2, #leagues .c6 { display: none }
	.leagues_page #main .mdl-card__menu { top: 15px !important; }
	#login_panel .mdl-chip__text { display: none; }
	#login_panel .mdl-chip { padding: 0px; }
	header span#logo { width: calc(100% - 40px); }
}

#main-content { padding: 20px 40px; }