@import url(http://fonts.googleapis.com/css?family=Chango|Open+Sans:400italic,400,700|Open+Sans+Condensed:700|Sunshiney);

* { box-sizing:border-box; }

html {
	min-height:100%;
	background-color:#DDD;
	background:linear-gradient(-30deg,#FED,#987);
	z-index:0;
	font-size:16px;
}

body { 
	margin:0 auto;
	padding:.2em 1em 4em 1em;  /* big padding on bottom for footer 3em high */
	background-color:white;
	width:84em;
	box-shadow:0 0 1.2em rgba(0,0,0,.6);
	font-family:"Open Sans","Trebuchet MS",sans-serif;
	background:linear-gradient(2deg,#4B4,White,#BADCFE);
	z-index:1;
	min-height:40em;
	position:relative;
	overflow-x:hidden;
}
.ultiSVG-container { position:fixed; width:100%; max-width:84em; height:100%; }
.ultiSVG {
	position:absolute;
	opacity:.2;
	right:-1em;
	margin-top:10%;
	transition:all 2s;
	z-index:3;
	width:35em;
	pointer-events: none;
}
.rotate .ultiSVG { transform:rotate(360deg) scale(1.5);}
.frisbeeSVG { fill:#F00;}


header { position:relative;}
footer {
	background-color:darkgreen;
	padding:1em;
	margin:1em -1em -.2em -1em;
	color:#ACB;
	font-family:"Courier New","Courier";
	text-align:right;
	position:absolute;
	bottom:0;
	min-width:100%;
}

h1 {
	font-family:Chango,sans-serif;
	font-weight:bold;
	color:#006;
	font-size:3em;
	margin:0;
	display:inline-block;
	position:relative;
	transition:all .3s;
	z-index:10;
	text-shadow:0 0 1em white;
	cursor:pointer;
}
h1:hover {
	text-shadow:0 0 .7em #FEA;
}

h2 {
	font-size:1.7em;
	line-height:1.2;
	margin:0;
	margin-left:.1em;
	min-width:10em;
	border-top:1px solid;
	text-align:right;
	z-index:10;
	position:relative;
	overflow:hidden;
}
h2 span { font-family:"Sunshiney",sans-serif; font-weight:300; color:#669;}
h2 select {
	float:left; margin:.5em; font-size:16px;
	font-weight:normal;
	max-width:90%;
}

main { position:relative; z-index:10;}

h3 {
	font-family:"Open Sans Condensed","Trebuchet MS",sans-serif;
	font-size:3em;
	margin:.5em 0;
	font-weight:700;
	text-align:center;
	line-height:1;
}
h4 { 
	font-family:"Open Sans Condensed","Trebuchet MS",sans-serif;
	font-size:1.4em;
	font-weight:700;
	margin:0;
	margin-top:.5em;
}
p {
	margin:0;
	font-size:1em;
	color:#444;
	width:75%;
	text-shadow:0 0 1em white;
}

a { color:#159; text-decoration:none; font-weight:700;}
a:hover { color:#369; text-decoration:underline;}


#sun {
	width:10em; height:10em;
	border-radius:5em;
	background-color:yellow;
	background: radial-gradient(#FD0, #FF0);
	position:absolute;
	right:-2em; top:-3em;
	transition: top 2s, right 2s, box-shadow .2s;
	box-shadow:0 0 2em white;
	z-index:2;
	text-align:center;
}
#sun:hover { box-shadow:0 0 2em pink;}
#sun:active { box-shadow:0 0 2em red;}
body.loadAnimation #sun { top:-10em !important;}
body.loadAnimation .ultiSVG { width:0 !important; right:-10em !important; opacity:1 !important;}

#container { text-align:center;}

.smallform { max-width:40em; box-sizing: border-box; margin:auto;}  
  
.smallform .txtinput {   
  font-family: "Helvetica Neue", Arial, sans-serif;  
  border-style: solid 1px #dedede;  
  margin-bottom: 20px;  
  font-size: 2em;  
  padding: 11px 25px;  
  padding-left: 55px;  
  width: 90%;  
  color: #777;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  height:1.8em;
}  
  
.smallform .txtinput:focus {   
  color: #333;  
  border-color: rgba(41, 92, 161, 0.4);  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);  
  outline: 0 none;   
} 
.smallform button { font-size:1.5em; margin-bottom:1em;}
.smallform button.email { float:right;}
.smallform input { opacity:.8;}
.smallform .input-group-addon {
	box-sizing:border-box;
	position:absolute;
	font-size:1.6em;
	color:#669;
	padding: .4em;
	background:#EEE;
	height:2.2em;
	width:2em;
	border:1px solid #999;
	z-index:99;
}

#profileEditor { margin:auto; font-size:1.5em; display:table; border-collapse: collapse; box-sizing:border-box;}
#profileEditor dl { display:table-row; border:1px solid rgba(90,90,90,.2); background-color:rgba(200,220,255,.2);}
#profileEditor dl:nth-child(2n) { background-color:rgba(120,170,220,.2);}
#profileEditor dl.invited { background-color:rgba(255,0,0,.3);}
#profileEditor dt, #profileEditor dd { display:table-cell; padding:.5em; vertical-align:top; position:relative;}
#profileEditor dt { max-width:16em; font-weight:bold; color:#333;}
#profileEditor dt span { font-size:.5em; line-height:1.2em; display:block; margin-top:.2em; font-weight:normal; color:#333;}
#profileEditor input { width:10em; padding-left:.2em;}
#profileEditor textarea { height:5em; font-size:.667em; width:15em;}
#profileEditor button { font-size:.8em; user-select:none;}
.required { color:darkred !important;}
#profileEditor p.description { font-size:.5em; max-width:25em; margin-top:.5em; color:#330;}

.checkmark {
	color:green;
	font-size:3em;
	position:absolute;
	left:50%;
	text-shadow:0 0 .5em yellow;
	margin-left:-1em;
	margin-top:-.2em;
	display:none;
}
.checkmark span { font-size:.3em; position:relative; top:-.8em;}

.invitePlayer { background-color:rgba(200,225,200,0.4); border-radius:1em; border-color:#395;}
.invitePlayer legend { font-size:1.8em; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; color:#264;}
.invitePlayer input[type='text'] { width:100%; padding-left:.2em;}
.inputHalf, .inputFull { box-sizing:border-box; padding:.5em .2em; float:left;}
.inputHalf { width:50%;}
.inputFull { width:100%;}
.invitePlayer .gender, .invitePlayer .invite { text-align:center; padding:.5em; white-space:nowrap;}
.invitePlayer .gender label { margin-left:.5em; margin-right:1em;}
.invitePlayer .gender i { font-size:1.5em; vertical-align:-.1em;}
.fa-male { color:#369;}
.fa-female { color:#A16;}
.invitePlayer p { margin:.2em 0; color:black; width:100%;}
.invitePlayer a {cursor:pointer;}
.invitePlayer textarea { width:100%; height:5em; font-size:.8em; padding-left:.4em;}
.whyInvite, .inviteFields { width:50%; display:inline-block; vertical-align:top; padding:0 1em;}


.subhead { background:lightyellow; padding:.5em; margin-bottom:1em; border:1px solid #999; border-radius:.5em;}
.subhead a { display:inline-block; width:33%; text-align:center;}

.playerInfo { font-size:1.5em; transition:all .2s; cursor:pointer; padding:0; border:1px solid rgba(0,0,0,0); max-width:30em; margin:auto; overflow:hidden;}
.playerInfo:hover,.playerInfo.active { background-color:white; border:1px solid orange;}
.playerInfo.active { border:2px solid; margin:1em auto; box-shadow:.1em .1em .5em rgba(0,0,0,0.5);}
.playerInfo .statusIcon { display:inline-block; font-size:.75em; color:#333; vertical-align:.3em; text-shadow:0 0 .5em yellow; width:1em; text-align:center;}
.playerInfo.status-0 .statusIcon:before {content:"\f128";}
.playerInfo.status-1 .statusIcon:before, .playerInfo.status-2 .statusIcon:before {content:"\f068"; color:red;}
.playerInfo.status-3 .statusIcon:before {content:"\f11c"; font-size:.75em;}
.playerInfo.status-4 .statusIcon:before, .playerInfo.status-5 .statusIcon:before, .playerInfo.status-6 .statusIcon:before {content:"\f00c"}
.playerInfo.status-4 .statusIcon { color:orange;}
.playerInfo.status-5 .statusIcon { color:royalblue; font-size:1em;}
.playerInfo.status-6 .statusIcon { color:green; font-size:1.5em; margin-left:-.1em; vertical-align:.1em;}
.playerInfo.status-1, .playerInfo.status-2 { opacity:.6;}
.playerInfo .playerName {white-space: nowrap; position:relative; overflow:hidden; margin:0; display:inline-block;}
.playerHead .extraInfo {
	margin-left:1em;
	display:inline-block;
	font:.7em normal "Open Sans","Trebuchet MS",sans-serif;
	vertical-align:.3em;
}
.playerInfo.active .playerHead { background-color:rgba(0,0,100,.1); overflow:hidden;  padding:.1em .7em;}
.playerInfo.active .playerHead,.playerInfo .smallStatsRow { margin:0 -.5em;}
.playerInfo.active .extraInfo { float:right; padding:.1em .5em;}
.playerInfo .status { float:right;  font:.7em normal "Open Sans","Trebuchet MS",sans-serif; padding-left:1em; margin-top:.5em;}
.playerInfo .smallStatsRow { display:none; border:1px solid #999;  padding:.2em .1em;}
.playerInfo.active .smallStatsRow { display:block; background:lightyellow;}
.playerInfo .smallStatsRow p { width:32%; display:inline-block; text-align:center;}
.playerInfo .largeStatsRow { margin:.5em 0; font-size:.75em; display:none;  float:left; width:49%; padding:0 .5em; }
.playerInfo.active .largeStatsRow { display:block;}
.playerInfo.active .largeStatsRow p { margin-bottom:.5em; margin-top:0;}

.smallUserPic { width:2.5em; height:2.5em; display:block; margin:.2em auto;}
.rosterPic { display:inline; width:1.5em; height:1.5em; margin:0 0 -.25em .2em; transition:all .2s;}
.rosterPic:hover { transform:scale(1.5); box-shadow:0 0 .2em black; margin-left:.5em;}

.small_text { font-size:.8em; }

.mb-container {
	margin:auto;
	max-width:64em;
	padding:.2em;	
}

.mb-new-button {
	background-color:#FEA;
	padding:.2em .5em;
	border:1px solid #AA6;
	border-radius:.5em;
	font-family:"Open Sans Condensed";
	cursor:pointer;
	transition:all .2s;
	font-size:.8em;
	opacity:.75;
	float:right;
	margin-bottom:.5em;
}

.mb-new-post-area {
	width:75%;
	margin:1em auto;
	clear:both;
	background:rgba(150,175,200,.5);
	border:none;
	padding:1em;
	box-shadow:0 0 1em #541;
	text-align:center;
	position:relative;
	display:none;
}
.mb-new-post-area > div { padding:.5em; width:30em; margin:auto; }
.mb-new-post-area > div:last-of-type { padding-bottom:1em; }
.mb-new-post-area label { font-size:1.2em; font-family:"Open Sans Condensed";}
.mb-new-post-area input { width:100%;}
.mb-new-post-area textarea { width:100%; height:10em;}
.mb-new-post-area .close { position:absolute; right:.3em; top:.3em; color:#666; font-size:1.2em; transition:all .1s;}
.mb-new-post-area .close:hover { font-size:1.5em; right:.2em; top:.2em;}
.mb-new-post-area .close:active { font-size:2em; right:0; top:0;}
.mb-new-button:hover { background-color:#FFF6B6; border-color:#651; box-shadow:0 0 .25em rgba(0,0,0,.5); opacity:1;}
.mb-new-button:active { box-shadow:0 0 .5em rgba(0,0,0,.5);}
.mb { border:1px solid #CCC; background:rgba(255,255,255,.5); clear:both;}
.mb-post { padding:.5em; overflow:auto; transition:all .2s; cursor:pointer; border-bottom:1px solid #EEE; opacity:.6;}
.mb-post:hover, .unseen-post {  opacity:1;}
.mb-post:hover { background-color:rgba(200,225,255,.7); }
.mb-post:hover .mb-posted-by img { opacity:.7;}
.mb-post:active { background-color:rgba(200,225,255,.9); }
.mb-content-group { width:70%; padding-right:1em;}
.mb-subject { font-size:1.5em; padding-right:1em;}
.mb-posted-by { color:#999; font-family:"Open Sans Condensed"; white-space: nowrap;}
.mb-posted-by img { width:2em; height:2em; display:inline-block; border-radius:1em; vertical-align:-.5em; opacity:.5;}
.mb-meta-group {
	width:30%;
	font-family:"Courier","Courier New";
	color:#666;
	line-height:1.4em;
	margin-top:.5em;
	font-size:.9em;
	padding:.2em;
}

.mb-post .mb-meta-group { float:right; text-align:right;}
.mb-post .mb-content-group { float:left; text-align:left;}
.mb-thread .mb-meta-group { float:left; text-align:center;}
.mb-thread .mb-content-group { float:right; padding:1em; font-size:1.2em; line-height:1.6em;}

.mb-container h4 { font-size:2em; background-color:rgba(200,240,220,.5); padding:.2em; margin:0; border-bottom:1px solid #ABC;}
.mb-thread { overflow:auto; border-bottom:1px solid #CCC; margin-bottom:.5em; padding-bottom:.5em;}
.mb-thread img { width:4em; height:4em; border-radius:1em; transition:all .1s;}
.mb-thread img:hover { transform:scale(1.25);}
.mb-thread textarea { width:100%; height:5em; margin-bottom:.2em;}
.mb-thread button { margin:auto; display:block;}
.mb-reply-head { color:#333; font-size:1.5em; font-family:"Open Sans Condensed"; line-height:1.5em; display:block;}
.mb-back { margin:.5em 2em; display:block;}
.mb-replies { display:block;}

.onthislist { text-align:center; margin:1em; border-top:1px solid rgba(0,0,0,.2); padding:.5em;}
.starChoice { color:#ED8; text-shadow:0 0 .1em black;}
.singleDay { color:#633;}

@media screen and (max-width: 84em) {
	body { width:100%; box-shadow:none;}
	#sun { width:9em; height:9em; top:-4em; right:-2em;}
    .playerInfo { font-size:1.4em;}
}

@media screen and (max-width: 48em) {	 /* Tablets */
	h1 { font-size:2.5em;}
	h2 { font-size:1.4em;}
	h3 { margin-top:0; font-size:2.5em;}
	#sun { width:6em; height:6em; top:-2em; right:-1em;}
	.ultiSVG { width:20em; opacity:.1; right:-5em; margin-top:20%;}
	p { width:100%;}
	#login { max-width:30em;}
	#login .txtinput { font-size:1.5em; height:2em;}
	#login .input-group-addon { height:2em; font-size:1.5em; padding:.3em;}
	#profileEditor { width:100%; max-width:none; font-size:1.25em;}
	#profileEditor dt span { margin-bottom:.5em; font-size:.6em;}
	.inputHalf { width:100%;}
    .playerInfo { font-size:1.2em;}
    .playerInfo .smallStatsRow b { display:block;}
	.mb-container { font-size:.9em;}
	.mb-content-group { width:60%;}
	.mb-meta-group { width:40%;}
	.mb-new-post-area { width:100%;}
	.mb-new-post-area > div { width:100%; }
}

@media screen and (max-width: 30em) {	 /* Mobile landscape */
	body,html { max-width:30em; margin:0; padding:0; overflow-x:hidden;}
	body { padding-bottom:3em;}	/* for footer */
	header { margin:0 1em;}
	footer { margin:0;}
	h1 { font-size:2em;}
	h2 { font-size:1.2em; text-align:center;}
	h2 span { display:block; text-align:left;}
	main { padding:1em;}
	#sun { width:4em; height:4em; top:-1em; right:-1em;}
	#profileEditor, #profileEditor dl, #profileEditor dt  { display:block}
	#profileEditor dl { margin:0 -1em; overflow:hidden;}
	#profileEditor dt { padding:.7em 1em 0 1em; max-width:none;}
	#profileEditor dd { padding:0 1em .7em 1em; margin:0; float:left;}
	#profileEditor dd:nth-child(2) { float:left;}
	#profileEditor dd:nth-child(3) { float:right;}
	.invitePlayer { margin:0 -1em; border-radius:0; }
	.whyInvite, .inviteFields { width:100%; display:block; padding:0 .2em;}
	.inputHalf { width:50%;}
	.invitePlayer .gender label { margin-left:.2em; margin-right:.5em;}
    .playerInfo { font-size:1em; margin:0 -1em; padding:.1em .5em;}
    .playerHead .extraInfo { font-size:.8em;}
    .playerInfo.active .playerHead { margin:0 -.5em; padding:.5em;}
	.playerInfo.active .largeStatsRow { width:100%;}
	.subhead a { display:block; width:100%;}
	#login button.email { float:none; display:block;}
	.mb-container { font-size:.8em;}
	.mb-post { width:100%;}
	.mb-content-group, .mb-meta-group { width:100%;}
	.mb-meta-group { text-align:right;}
}

@media screen and (max-width: 20em) {	 /* Mobile portrait */
	body,html { max-width:20em;}
	h1 { font-size:1.6em;}
	.invitePlayer .gender { font-size:.9em; margin-top:.1em;}
    .playerInfo { font-size:.9em;}
    #profileEditor dd:nth-child(2) { padding:0 .2em .7em .7em;}
    #profileEditor dd:nth-child(3) { padding:0 .5em .7em .2em;}
    #profileEditor input { width:10em;}
}